如何将 json 数据推入 React-vis 的 XY 数组？

Question

希望在 react-vis 中开始绘制一些图形，我想知道将数据从 json 推送到状态的最佳方法是什么，这样我就可以从图形中访问状态数据。下面是我的测试 json:

[
    {
      "day": "1",
      "flights":"58",
      "passengers": "6076"
    },
    {
        "day": "2",
        "flights": "78",
        "passengers": "7089"
    },
    {
        "day": "3",
        "flights": "101",
        "passengers": "9760"
    }
]

我基本上想将 "day" 和 "flights" 推入数据数组以模仿 react-vis 提供的样本。下面是我的代码：

App.js

//import logo from './logo.svg';
//import './App.css';
import React, { Component } from 'react';
import my_data from './data/csvjson.json';
import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries,
   VerticalGridLines, LineMarkSeries} from 'react-vis';
import '../node_modules/react-vis/dist/style.css';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
     data:[]
  }
  }

  //react vis documentation points to data being an object like so:
   //sample data 
   //data:[
   // {x: 0, y: 8},
   // {x: 1, y: 5},
   // {x: 2, y: 4}
  // ]

  render() {
    return (
      <div>

        <XYPlot width={400} height={300}><XAxis/><YAxis/>
          <HorizontalGridLines />
          <VerticalGridLines />
          <LineMarkSeries data={this.state.data} />
        </XYPlot>
      </div>
    );
  }
}

export default App;

Answer 1

您要做的只是用您从某些 API 中检索到的数据创建一个新数组。这最简单地通过 .map 完成。你可以运行像这样：

jsonData.map((entry) => ({x: entry.day, y: entry.flights}))

Answer 2

您需要预处理my_data并将其存储在状态中。应该有一个函数映射 my_data 和 return 数组，对象具有 x 和 y 属性 {x: day, y: flight}.

import React, { Component } from 'react';
import { render } from 'react-dom';
import my_data from './data/csvjson.json';
import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries,
   VerticalGridLines, LineMarkSeries} from 'react-vis';

const processData = (data) => {
  return data.map(e => ({
    x: e.day,
    y: e.flights
  }));
};

class App extends Component {
  constructor() {
    super();
    this.state = {
      data: processData(my_data)
    };
  }

  render() {
        return (
      <div>
          <XYPlot width={400} height={300}><XAxis/><YAxis/>
          <HorizontalGridLines />
          <VerticalGridLines />
          <LineMarkSeries data={this.state.data} />
        </XYPlot>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

我也在 stackblitz 上做过，你可以在那里查看现场演示：https://stackblitz.com/edit/react-abkc1j

如何将 json 数据推入 React-vis 的 XY 数组？

How to push json data into XY array for React-vis?

javascript

arrays

reactjs

react-vis