Question

我成功从Poloniex API获取数据，但我在我的React组件中生成实际图表时出现问题（我使用的是高级图表 - 更具体地说是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>
    );
  }

在React中使用Highcharts获取Poloniex API

0 个答案: