json - 解析 jsonData 以获取图形

Question

我正在做一个项目，我必须使用下拉菜单显示 2 个不同的图表。2 个不同的图表是： - 实时数据 - json 导入数据

我完成了第一个，并且完成了更改显示的下拉菜单。但我不知道如何导入 jsonData 并绘制它。我对 javascript、react 和 json 很陌生。我的队友告诉我当前的 jsonData 文件看起来像这样

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

我不明白格式。

构造函数看起来

   this.state = {
        data: [],
        jsonData: [1,2,3,4]
    }

他给了我一个关于代码的提示：

// parse jsonData and set this.state.jsonData to the formated version of the jsonData

我不明白发生了什么事。我很感激任何帮助！

我不是 stackoverflow 的常客，所以如果我能做些什么来让我的帖子变得更好，请告诉我！

下面是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'
//import jsonData from '../jsonData.json';

var jsonData = require('../jsonData.json')

class Graph extends Component {

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

    const now = Date.now();

    this.state = {
        data: [],
        jsonData: [1,2,3,4]
    }
}

componentDidMount() {

  // parse jsonData and set this.state.jsonData to the formated version of the jsonData


  console.log(jsonData)

    var sensorSerial = this.props.match.params.sensorId

    const socket = socketIOClient("http://localhost:5001/test");
    socket.on("newnumber", data => this.addDataPoint(data));
  }


  handleChange(event) {
    this.setState({value: event.target.value});
    }

  addDataPoint(data){

    console.log(data)

    if(data.sensorSerial == this.props.match.params.sensorId){
      var newData = this.state.data.slice(0)

      console.log(new Date(data.dateTime.split(' ').join('T')))
      //console.log(data.dateTime)
      newData.push([new Date(data.dateTime.split(' ').join('T')), data.number])

      // if(newData.length > 50){
      //   newData.shift()
      // }

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

  handleChange(event){
    this.setState({value: event.target.value});
  }


  render() {

    console.log("calling render()")

    var data = this.state.data

    if(this.state.value === 'processed'){
      var data = this.state.jsonData
    }

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

    return (

      <div className="container">

        <div className="graph">

          <HighchartsChart plotOptions={plotOptions}>
            <Chart />

            <Title>Sensor Data</Title>

            <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={data}/>
            </YAxis>
          </HighchartsChart>
        </div>


    <div className="side">  
      <div className="SideContainer">

          <div className="upSide">
              <h4>Information</h4>
                  <ul>
                      <li>Device:  <b>Light Absorbtion</b></li>
                      <li>Status:  <b>Connected</b></li>
                      <li>Packets: <b>1021/1220</b></li>
                  </ul>
          </div>

          <div className="downSide">
              <form>
                <label>
                  <h4>Options</h4>
                    <select value={this.state.value} onChange={this.handleChange}>
                      <option value="live">Live</option>
                      <option value="raw">Raw</option>
                      <option value="processed">Processed</option>
                    </select>
                </label>
              </form>

              <form>
                <label>
                  <h4>Channel</h4>
                    <select value={this.state.value} onChange={this.handleChange}>
                      <option value="20">20</option>
                      <option value="40">40</option>
                      <option value="80">80</option>
                    </select>
                </label>
              </form>

              <form>
                <label>
                  <h4>Graph View</h4>
                    <select value={this.state.value} onChange={this.handleChange}>
                      <option value="map">Map</option>
                      <option value="timeseries">Time Series</option>
                    </select>
                </label>
              </form>
          </div> 
        </div>
      </div>


      </div>
    );
  }
}

export default withHighcharts(Graph, Highcharts);

标签： jsonreactjs