Javascript Apex图表，设置处于状态的阵列中的系列数据

在我的react应用程序中，我从PockDB中获取结果，我想将其用作apexCharts系列中的数据点

我正在获取结果并将其置于状态，称为

maxcarries

，当登录控制台时，它们的格式如下：

因此，我希望这7个数字（所有的索引名都是

卡路里燃烧

）成为我在图表系列中的数据，但我目前在图表上得到了NaN

这是完整的代码，如何将它们设置为正确的格式，以便在图表数据中使用它们

import React, { Component } from "react";
import Chart from "react-apexcharts";
import DB from '../../db';
import * as moment from 'moment';

class TrendsComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      maxCalories: '',
      calorieRecord: {
            caloriesConsumed: '',
            caloriesBurned: '',
            createdAt: this.newestDate,
            updatedAt: undefined
      },
      caloriesDB: new DB('calorie-records'),
      calories: {},
      calorieElements: null,
      options: {
        },
        chart: {
          toolbar: {
            show:false
          },
          id: "basic-bar"
        },
        xaxis: {
          categories: ['3/20', '3/21', '3/22', '3/23', '3/24', '3/25','3/26']
        }
      },
      series: [
        {
          name: "Trend (tracked)",
          data: {this.maxCalories}
        }
      ]
    };
  }


   componentDidMount(){
        this.setMax();
    }


      setMax = () => {
        this.state.caloriesDB.db.find({
          selector: {
            $and: [
              {_id: {"$gte": null}},
              {caloriesBurned: {$exists: true}},
              {createdAt: {$exists: true}}
            ]
          },
          fields: ['caloriesBurned', 'createdAt'],
          sort: [{'_id':'desc'}],
          limit: 7
        }).then(result => {
          console.log('max');
          console.log(result);
          const newDocs = result.docs;
          this.setState({
            maxCalories: newDocs.map(docs => docs)
          });
          console.log('maxCalories');
          console.log(this.state.maxCalories);

        }).catch((err) =>{
          console.log(err);
        });
      }

  render() {


    return (

          <div className="mixed-chart">

            <Chart

              options={this.state.options}
              series={this.state.series}
              type="area"
              stacked="true"
              width="700"
            />
          </div>



    );
  }
}

export default TrendsComponent;

import React，{Component}来自“React”；
从“react apexcharts”导入图表；
从“../../DB”导入数据库；
从“时刻”导入*作为时刻；
类TrendsComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
MaxCarries:“”，
热量记录：{
消耗的热量：''，
燃烧的卡路里：，
createdAt:this.newestDate，
updatedAt:未定义
},
卡路里数据库：新数据库（“卡路里记录”），
卡路里：{}，
卡路里元素：空，
选项：{
},
图表：{
工具栏：{
节目：假
},
id:“基本酒吧”
},
xaxis：{
类别：['3/20'，'3/21'，'3/22'，'3/23'，'3/24'，'3/25'，'3/26']
}
},
系列：[
{
名称：“趋势（跟踪）”，
数据：{this.maxcarries}
}
]
};
}
componentDidMount（）{
这是setMax（）；
}
setMax=（）=>{
this.state.caloriesDB.db.find({
选择器：{
美元及：[
{{u id:{“$gte”：null}，
{卡路里燃烧：{$exists:true}}，
{createdAt:{$exists:true}
]
},
字段：['carriesburned'，'createdAt']，
排序：[{''u id'：'desc'}]，
限额：7
})。然后（结果=>{
console.log（'max'）；
控制台日志（结果）；
const newDocs=result.docs；
这是我的国家({
maxCarries:newDocs.map（docs=>docs）
});
console.log（'maxcarries'）；
console.log（this.state.maxcarries）；
}).catch（（错误）=>{
控制台日志（err）；
});
}
render（）{
返回(
);
}
}
导出默认趋势组件；

我在我的项目中也遇到了同样的问题。我花了很多时间寻找解决方案。因此，我得到的是：

const FinacialResultChart = (props) => {

  const options = {
    chart: {
      toolbar: {
        show: false
      },
      animations: {
        enabled: false
      }
    },
    stroke: {
      curve: "smooth",
      dashArray: [0, 8],
      width: [4, 2]
    },
    grid: {
      borderColor: props.labelColor
    },
    legend: {
      show: false
    },
    colors: [props.dangerLight, props.strokeColor],
    fill: {
      type: "gradient",
      gradient: {
        shade: "dark",
        inverseColors: false,
        gradientToColors: [props.primary, props.strokeColor],
        shadeIntensity: 1,
        type: "horizontal",
        opacityFrom: 1,
        opacityTo: 1,
        stops: [0, 100, 100, 100]
      }
    },
    markers: {
      size: 0,
      hover: {
        size: 5
      }
    },
    xaxis: {
      labels: {
        style: {
          colors: props.strokeColor
        }
      },
      axisTicks: {
        show: false
      },
      categories: [
        "Январь",
        "Февраль",
        "Март",
        "Апрель",
        "Май",
        "Июнь",
        "Июль",
        "Август",
        "Сентябрь",
        "Октябрь",
        "Ноябрь",
        "Декабрь"
      ],
      axisBorder: {
        show: false
      },
      tickPlacement: "on"
    },
    yaxis: {
      tickAmount: 5,
      labels: {
        style: {
          color: props.strokeColor
        }
      }
    },
    tooltip: {
      x: { show: false }
    }
  }

  const data = [
    {
      name: "Итоговый результат",
      data: props.userData.traidingMonth
    }
  ]

  return (
        <Chart
          options={options}
          series={data}
          type="line"
          height={280}
        />
  )
}

export default FinacialResultChart

const FinacialResultChart=（道具）=>{
常量选项={
图表：{
工具栏：{
节目：假
},
动画：{
已启用：false
}
},
笔划：{
曲线：“平滑”，
dashArray:[0,8]，
宽度：[4,2]
},
网格：{
borderColor:props.labelColor
},
图例：{
节目：假
},
颜色：[props.dangerLight，props.strokeColor]，
填写：{
类型：“梯度”，
坡度：{
阴影：“黑暗”，
反转颜色：假，
渐变色：[props.primary，props.strokeColor]，
阴影强度：1，
类型：“水平”，
不透明性来源：1，
不透明度：1，
停止：[0，100，100，100]
}
},
标记：{
尺寸：0，
悬停：{
尺码：5
}
},
xaxis：{
标签：{
风格：{
颜色：道具
}
},
axisTicks：{
节目：假
},
类别：[
"Январь",
"Февраль",
"Март",
"Апрель",
"Май",
"Июнь",
"Июль",
"Август",
"Сентябрь",
"Октябрь",
"Ноябрь",
"Декабрь"
],
axisBorder：{
节目：假
},
滴答声：“开”
},
亚克斯：{
金额：5，
标签：{
风格：{
颜色：props.strokeColor
}
}
},
工具提示：{
x:{show:false}
}
}
常数数据=[
{
名称：“зззззааааа”，
数据：props.userData.traidingMonth
}
]
返回(
)
}
导出默认财务结果图表

因此，您需要将类更改为const，并将所有道具（例如api数据）推送到子图表组件中