Question

我对React很陌生。

我正在尝试将以下测试json数据文件导入到我的React图中。

{
    "data": [
        {"datetime": "", "data": [1,2,3,4]},
        {"datetime": "", "data": [1,2,3,4]}
    ]
}

由于x轴是时间，因此它并不重要。但是我不知道如何将数据读入y轴。

这是我的Graph.js：

import React, { Component } from 'react';
import Highcharts from 'highcharts';
import socketIOClient from "socket.io-client";
import {
  HighchartsChart, Chart, withHighcharts, XAxis, YAxis, Title, Legend, LineSeries
} from 'react-jsx-highcharts';
import './Graph.css'
var jsonData = import '../jsonData.json'     //pass the json file location


class Graph extends Component {

  constructor (props) {
    super(props);
    this.addDataPoint = this.addDataPoint.bind(this);

    const now = Date.now();
    this.state = {
        data: []
    }
  }


  componentDidMount() {

    //THIS is to add points from json


    //Please don't mind the stuff here--------
    //This is for another graph 
    var sensorSerial = this.props.match.params.sensorId
    const socket = socketIOClient("http://localhost:5001/test");
    socket.on("newnumber", data => this.addDataPoint(data));
    //----------------------------------------
  }


  addDataPoint(data){

    //This is for another graph------------
    if(data.sensorSerial == this.props.match.params.sensorId){
      var newData = this.state.data.slice(0)
      console.log(new Date(data.dateTime.split(' ').join('T')))
      newData.push([new Date(data.dateTime.split(' ').join('T')), data.number])

      this.setState({
        data: newData
      })
    }
    //-------------------------------------


  }



  render() {
    // const {data} = this.state;

    const plotOptions = {
      series: {
        pointStart: new Date("2019-04-04T10:55:08.841287Z")
      }
    }

    return (
      <div className="graph">
        <HighchartsChart plotOptions={plotOptions}>
          <Chart />

          //Title
          <Title>Sensor Data</Title>

          //Legend          
          <Legend layout="vertical" align="right" verticalAlign="middle" >
            <Legend.Title>Legend</Legend.Title>
          </Legend>

          <XAxis type="datetime">
            <XAxis.Title>Time</XAxis.Title>
          </XAxis>

          <YAxis>
            <YAxis.Title>Y-axis</YAxis.Title>
            <LineSeries name="Channel 1" data={this.state.data}/>
          </YAxis>

        </HighchartsChart>
      </div>
    );
  }
}

export default withHighcharts(Graph, Highcharts);

如果这是一个重复的问题，请告诉我们！我并不是Stakoverflow上的常客，所以如果有什么我可以改善我的帖子的话，请告诉我。

谢谢您的时间！

将JSON数据文件导入图形

0 个答案: