将数据从 JSON 传递到 React 组件 Apexchart 时间线

Question

我正在使用 Apex Chart 创建时间线。我想从 JSON 动态加载数据。您可以通过硬编码数据 here.

查看它的外观

我的 data.json 看起来像这样：

[{
            "name": "Booked",
            "data": [
              {
                "x": "Lady Gita",
                "y": [
                  "new Date('2019-03-05').getTime(),",
                  "new Date('2019-03-08').getTime()"
                ]
              }
            ]
          },

          {
            "name": "Option",
            "data": [
              {
                "x": "Ardura",
                "y": [
                  "new Date('2019-03-10').getTime(),",
                  "new Date('2019-03-17').getTime()"
                ]
              }
            ]
 }]

我也试过这样定义 y:

"new Date('2019-03-05').getTime(), new Date('2019-03-08').getTime()"

像这样：

"new Date('2019-03-05').getTime()"
"new Date('2019-03-08').getTime()"

我的代码如下所示：

import React, { useState, Component } from 'react';
import ReactApexChart from "react-apexcharts";

import "./TimelineChart.css";
import data from "./pages/data.json";

const newData = data;

//I also tried:

//JSON.parse(newData);

//But the my timeline doesnt even show


    
 class ApexChart extends Component {

        constructor(props) {
          super(props);
        
          this.state = {
          
            series: [],
            options: {
              chart: {
                height: 450,
                type: 'rangeBar'
              },
              plotOptions: {
                bar: {
                  horizontal: true,
                  barHeight: '80%'
                }
              },
              xaxis: {
                type: 'datetime'
              },
              stroke: {
                width: 1
              },
              fill: {
                type: 'solid',
                opacity: 0.6
              },
              legend: {
                position: 'top',
                horizontalAlign: 'left'
              }
            },
          
          
          };
        };





  render() {
    return (

        
      <div className="app">
        <div className="row">
          <div className="mixed-chart">
            <ReactApexChart
   options={this.state.options}
   series={newData}
   type="rangeBar"
   height="350"
/>
          </div>
        </div>
      </div>
    );
  }
}
console.log(newData);
export default ApexChart;

我的控制台输出如下所示：

我的图表是这样的：

如您所见，图表上确实显示了我的“姓名”和“x”值，但没有日期范围

Answer 1

这个 JSON 中的新日期应该是 Unix 时间戳。

"y": [   
         "new Date('2019-03-05').getTime(),",
         "new Date('2019-03-08').getTime()"
    ]

您可以将日期和时间转换为 Unix 时间戳here

转换格式后应该如下所示：

"y": [
         1551744000000,
         1552003200000
     ]

Answer 2

详细说明所说的内容。

你的第二张截图有

"y": ["new Date('2019-03-05').getTime()"]

如果正在生成数据文件（由您控制），您需要将生成 y 道具的代码更改为此

y = [new Date('2019-03-05').getTime()]

请注意缺少双引号（因为 new Date 是一个函数调用，您希望在数组中分配该函数调用的结果）。

如果您的 JSON 没有生成，您需要的是带有硬编码字符串值的 vice-radica 响应。

将数据从 JSON 传递到 React 组件 Apexchart 时间线

Passing data from JSON to React component Apexchart timeline

javascript

reactjs

json

apexcharts