为什么图表数据不显示？答案

【问题标题】：Why is chart-data not showing?为什么图表数据不显示？
【发布时间】：2020-02-06 04:48:06
【问题描述】：

为什么图表数据不显示？

我传递给“数据”数组但它没有显示任何东西......但是如果你制作数据，那么一切都会工作

我的数据

默认数据

我的档案（收入）仪表板 > 仪表板视图 > 图表 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
    	 }
        ]
    });

【问题讨论】：

标签： reactjs apexcharts

【解决方案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。

我希望这有效并有所帮助？

【讨论】：