為什么圖表數據不顯示？

Question

為什么圖表數據不顯示？

我傳遞給“數據”數組但它沒有顯示任何內容......但是如果你制作數據，那么一切都會起作用

我的資料

默認數據

我的文件（收入）儀表板 > 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 } ] });

Answer 1

將您的代碼更改為只有一個狀態對象，並且不要像當前那樣嵌套不同的狀態。 刪除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 。

我希望這有效並有所幫助？