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

我想用highcharts显示API中的

数据

，但仍然得到一个错误，因为highchart

配置

在

类应用

之外声明，而

数据

在

类应用

内部获取

如果使用静态

数据

， 下面是静态

数据
中的示例

如何将highcharts与从API获取的数据一起使用？
您的
应用程序
组件当前不是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'));

const getConfig=data=>({
范围选择器：{
选定：1
},
标题：{
文本：“aAAPL股票价格”
},
系列：[{
名称：“AAPL”，
数据：数据，
工具提示：{
数值小数：2
}
}]
});
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
数据结果：[]，
}
}
componentDidMount（）{
这是getData（）；
}  
getData=（）=>{
获取（'您的\u端点\u url'）
.then（res=>res.json（））
。然后（数据=>{
这是我的国家({
数据结果：数据
});
});
}
render（）{
const{dataResults}=this.state；
const chartConfig=getConfig（数据结果）；
返回(
);
}
}
渲染（，
document.getElementById（'root'）；

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

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

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