0

我已成功从 Poloniex API 获取数据，但在我的 React 组件中生成实际图表时遇到问题（我使用的是 highcharts——更具体地说是 React JSX Highstock 节点包）。

我已经控制台记录了所有返回的数据，它似乎是一个数组数组。如果我手动将数据强制输入我的反应组件，它将生成一个图表，所以我想我如何将数据传递给我的图表肯定存在问题。我可以使用正确的数据查看 Graph 组件的状态，所以我真的不知道哪里可能出错了。任何帮助表示赞赏。谢谢

class Graph extends Component {

  constructor (props) {
    super(props);

    const now = Date.now();

    this.state = {
      data1:[]
    }
   }

   componentDidMount() {
    this.getData();
   }

   getData = () => {
    fetch(`https://poloniex.com/public?command=returnChartData&currencyPair=BTC_XMR&end=1450499372&period=14400&start=1410158341`)
    .then(res => res.json())
    .then(results => {
     this.setState({
      data1:results.map(item => {
       let newDate = (item.date)*1000;
       return [newDate,item.close]
       })
    })
     console.log(JSON.stringify(this.state.data1));
    })
    .catch(e => e);
  }

  render() {
    return (
      <div className="graph">
        <HighchartsStockChart>
          <Chart zoomType="x" />

          <Title>Highstocks Example</Title>

          <Legend>
            <Legend.Title></Legend.Title>
          </Legend>

          <RangeSelector>
            <RangeSelector.Button count={1} type="day">1d</RangeSelector.Button>
            <RangeSelector.Button count={7} type="day">7d</RangeSelector.Button>
            <RangeSelector.Button count={1} type="month">1m</RangeSelector.Button>
            <RangeSelector.Button type="all">All</RangeSelector.Button>
            <RangeSelector.Input boxBorderColor="#7cb5ec" />
          </RangeSelector>

          <Tooltip />

          <XAxis>
            <XAxis.Title>Time</XAxis.Title>
          </XAxis>

          <YAxis id="price">
            <YAxis.Title>Price</YAxis.Title>
            <AreaSplineSeries id="price" name="Price" data={this.state.data1} />
          </YAxis>


          <Navigator>
            <Navigator.Series seriesId="profit" />
          </Navigator>
        </HighchartsStockChart>

      </div>
    );
  }
4

0 回答 0