如何在Reactjs中使用Highcharts与从API提取的数据

ras 发表于 Dev

拉斯

我想data从具有highcharts的API显示，但仍然会出错，因为highchartconfig在外部声明class app并data在内部获取class app。

如果使用static data，则可以使用，这是staticdata 链接中的示例。

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，所以我认为这不是问题。

但是，如果我想data从API中获取内容，则将其data放置在class app和config之外class app。所以我得到一个错误'数据未定义'这是链接

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提取的数据一起使用？

亚兰

你的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'));

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。