Почему не отображаются данные диаграммы?

Почему не отображаются данные диаграммы?

Перехожу в массив "data" Но он ничего не показывает ... Но если сделать data, то все будет работать

Мои данные введите здесь описание изображения

Данные по умолчанию введите здесь описание изображения

Мои файлы (доход) Панель инструментов> 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
    	 }
        ]
    });


reactjs apexcharts
person luckydev    schedule 04.02.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Измените свой код, чтобы иметь только один объект состояния и не вкладывать разные состояния, как сейчас. Удалите 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.

Надеюсь, это сработает и поможет?

person DevStormUK    schedule 05.02.2020