[英]Why is chart-data not showing?
为什么图表数据不显示?
我传递给“数据”数组但它没有显示任何内容......但是如果你制作数据,那么一切都会起作用
我的文件(收入)仪表板 > DashboardView > 图表https://codesandbox.io/s/hopeful-glitter-c868j
// Charts.js const [chartOptions, setChartOptions] = useState({ options: { chart: { id: "basic-bar" }, xaxis: { categories: moment.monthsShort() } }, series: [ { name: "Доход", data: [incomeData] // My data - console.log(incomeData) - 4 } ] });
将您的代码更改为只有一个状态对象,并且不要像当前那样嵌套不同的状态。 删除data: [incomeData]
并使用单个状态对象来管理图表状态。
像这样的东西:
import React, { useState, useEffect } from "react"; import Chart from "react-apexcharts"; import moment from "moment"; import "moment/locale/ru"; const ChartsView = props => { const { income } = props; const [chartOptions, setChartOptions] = useState({ options: { chart: { id: "basic-bar" }, xaxis: { categories: moment.monthsShort() } }, series: [ { name: "Доход", data: [] } ] }); const handleData = (dataFeed) => { const formattedDataFeed = 'format the data ready for the chart' setChartOptions({ ...chartOptions, series: [{ name: chartOptions.series[0].name, data: [ { ...chartOptions.series[0].data }, { ...formattedDataFeed } ] }] }) } return ( <Chart options={chartOptions.options} series={chartOptions.series} type="area" width="100%" height="400px" /> ); }; export default ChartsView;
您正在更改incomeData
的状态,这不会更改与<Chart />
相关的任何状态。 您需要更改与<Chart />
关联的状态,因此chartOptions
。
我希望这有效并有所帮助?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.