javascript - 如何在 reactjs 中使用 highcharts 和从 API 获取的数据

Question

我想使用 highcharts 显示来自 API 的 data 但仍然出现错误，因为 highchart config 在 class app 和 之外声明数据 在 class app 中获取。

如果使用静态数据，它会起作用，这是来自静态 data link 的示例.

import React, { Component } from 'react';
import { render } from 'react-dom';
import ReactHighstock from 'react-highcharts/ReactHighstock';
import './style.css';

const data = [
    [1220832000000, 22.56], [1220918400000, 21.67], [1221004800000, 
    21.66], [1221091200000, 21.81], [1221177600000, 21.28], 
    [1221436800000, 20.05], [1221523200000, 19.98], [1221609600000, 
    18.26], [1221696000000, 19.16], [1221782400000, 20.13], 
    [1222041600000, 18.72], [1222128000000, 18.12], [1222214400000, 
    18.39], [1222300800000, 18.85], [1222387200000, 18.32], 
    [1222646400000, 15.04], [1222732800000, 16.24], [1222819200000, 
    15.59], [1222905600000, 14.3], [1222992000000, 13.87], 
    [1223251200000, 14.02], [1223337600000, 12.74], [1223424000000, 
    12.83], [1223510400000, 12.68], [1223596800000, 13.8], 
    [1223856000000, 15.75], [1223942400000, 14.87], [1224028800000, 
    13.99], [1224115200000, 14.56], [1224201600000, 13.91], 
    [1224460800000, 14.06], [1224547200000, 13.07], [1224633600000, 
    13.84], [1224720000000, 14.03], [1224806400000, 13.77], 
    [1225065600000, 13.16], [1225152000000, 14.27], [1225238400000, 
    14.94], [1225324800000, 15.86], [1225411200000, 15.37], 
    [1225670400000, 15.28], [1225756800000, 15.86], [1225843200000, 
    14.76], [1225929600000, 14.16], [1226016000000, 14.03], 
    [1226275200000, 13.7], [1226361600000, 13.54], [1226448000000, 
    12.87], [1226534400000, 13.78], [1226620800000, 12.89], 
    [1226880000000, 12.59], [1226966400000, 12.84], [1227052800000, 
    12.33], [1227139200000, 11.5], [1227225600000, 11.8], 
    [1227484800000, 13.28], [1227571200000, 12.97], [1227657600000, 
    13.57], [1227830400000, 13.24], [1228089600000, 12.7], 
    [1228176000000, 13.21], [1228262400000, 13.7], [1228348800000, 
    13.06], [1228435200000, 13.43], [1228694400000, 14.25], 
    [1228780800000, 14.29], [1228867200000, 14.03], [1228953600000, 
    13.57], [1229040000000, 14.04], [1229299200000, 13.54]
];

const config = {
  rangeSelector: {
    selected: 1
  },
  title: {
    text: 'aAAPL Stock Price'
  },
  series: [{
    name: 'AAPL',
    data: data,
    tooltip: {
      valueDecimals: 2
    }
  }]
};

class App extends Component {
  render() {
    return (
      <div className="App" />
    );
  }
}

render(<ReactHighstock config={config}/>, 
document.getElementById('root'));

在上面的例子中，两个变量data和config放在了class app之外，所以我认为这不是问题。

但是如果我想从 API 中获取 data，data 放在 class app 和 config 中仍在 class app 之外。所以我得到一个错误“data is not defined”这是 link

import React, { Component } from 'react';
import { render } from 'react-dom';
import ReactHighstock from 'react-highcharts/ReactHighstock';
import './style.css';

const config = {
  rangeSelector: {
    selected: 1
  },
  title: {
    text: 'aAAPL Stock Price'
  },
  series: [{
    name: 'AAPL',
    data: data,
    tooltip: {
      valueDecimals: 2
    }
  }]
};

class App extends Component {
  constructor() {
    super();
    this.state = {
      dataResults: [],
    }
  }

  componentDidMount() {
    this.getData();
  }

  getData = () => {
    fetch('https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/usdeur.json')
      .then(res => res.json())
      .then(data => {
        this.setState({
          dataResults: data
        });
      });
  }

  render() {
    return (
      <div className="App" />
    );
  }
}

render(<ReactHighstock config={config}/>, 
document.getElementById('root'));

如何将 highcharts 与从 API 获取的数据一起使用？

Answer 1

您的 App 组件目前不是 DOM 的一部分，因为您将 ReactHighstock 渲染为根组件。一种解决方案是在 App 组件内呈现图表并动态传递数据:

const getConfig = data => ({
  rangeSelector: {
    selected: 1
  },
  title: {
  text: 'aAAPL Stock Price'
  },
  series: [{
    name: 'AAPL',
    data: data,
  tooltip: {
    valueDecimals: 2
    }
  }]
});

class App extends Component {
  constructor() {
    super();
    this.state = {
      dataResults: [],
    }
  }

  componentDidMount() {
    this.getData();
  }  

  getData = () => {
    fetch('your_endpoint_url')
      .then(res => res.json())
      .then(data => {
        this.setState({
          dataResults: data
        });
      });
    }

  render() {
    const { dataResults } = this.state;
    const chartConfig = getConfig(dataResults);
    return (
      <ReactHighstock config={chartConfig}/>
    );
  }
}

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

您当然应该处理尚未获取数据的用例并显示占位符。