[英]Why is chart-data not showing?
Why is chart-data not showing?为什么图表数据不显示?
I pass to the "data" array But it does not show anything ... But if you make data, then everything will work我传递给“数据”数组但它没有显示任何内容......但是如果你制作数据,那么一切都会起作用
My files (income) Dashboard > DashboardView > Charts https://codesandbox.io/s/hopeful-glitter-c868j我的文件(收入)仪表板 > 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 } ] });
Change your code to have only one state object and don't nest different states like you are currently.将您的代码更改为只有一个状态对象,并且不要像当前那样嵌套不同的状态。 Remove the
data: [incomeData]
and use a single state object to manage the chart state.删除
data: [incomeData]
并使用单个状态对象来管理图表状态。
Something like this:像这样的东西:
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;
You were changing the state of the incomeData
and this was not changing any state associated with the <Chart />
.您正在更改
incomeData
的状态,这不会更改与<Chart />
相关的任何状态。 You need to change the state associated with the <Chart />
so the chartOptions
.您需要更改与
<Chart />
关联的状态,因此chartOptions
。
I hope that works and helps?我希望这有效并有所帮助?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.