Highcharts 官方 + React，来自 JSON 的系列人口？

Question

我在用 Highcharts 替换项目中的当前图表时遇到了一些问题。我正在使用 highcharts-react-official（和 highcharts）NPM 包，它不会从响应中呈现“所有内容”。

这个项目非常大，通过旧的图表实现来看，Rechart 似乎非常简单。从 API 响应中获取的当前数据是这样的（在 ComposedChart 包装器中）：

data={chartData}

然后显示所有必要的数据。 我希望这将是一个简单的交换，并以相同的方式填充 Highcharts，但事实并非如此。

在返回方法中我有这个：

<HighchartsReact
 highcharts={Highcharts}
 options={options}
/>

我在渲染方法中的选项是这样的：

const options = {

  chart: {
    events: {
        load: function () {
          console.log(JSON.stringify(chartData[2].value))
        }
      }
    },
  title: {
    text: ''
  },
  series: {
        name: 'test',
        data: chartData
  }

这类作品。控制台日志确实打印了特定值，但如果我在系列中尝试它，比如 data:chartData[2].value 它不起作用。 在使用 data: chartData 时，它确实显示了来自对象的正确数量的条目，作为类别（在本例中为 6 个不同的条目），但仅此而已。是解析错误还是有什么问题？

谢谢！

--

编辑：

好的，这就是它现在的样子，而且它有点工作。

chart: {
    events: {
      load: () => {
        this.state.testChart.map(data =>
        testData.push({
          name: data.time,
          x: data.temp,
          y: data.value
        })
      );
        this.setState({ data: testData });
      }
    }
  },

在我的系列中：

  series: [{
    type: 'column',
    name: 'Current year',
    data: testData
  },

视觉结果是 Highcharts 在响应给我的数组中添加了所有 6 个对象（显示 6 个类别）。但不显示这 6 个条目中的任何数据。 它看起来像这样：

[
 {time: "2018-10-11", temp: "21", value: "10"}, 
 {time: "2018-10-10", temp: "12", value: "31"}
]

同时，当更改时间跨度时（例如单击按钮以显示处理 HC 之外的 testChart 的前一周），这 6 个条目（以及因此 HC 中的类别）会发生变化，正如预期的那样。所以这看起来像我需要走的路，但我如何让数据可见？我错过了什么？

Answer 1

您可能正在尝试在数据尚未下载时创建图表。请看下面的示例，您可以了解如何使用动态数据创建图表：

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    fetch("https://api.myjson.com/bins/q4us4")
      .then(response => response.json())
      .then(data => {
        options.series[0].data = data;
        this.setState({ data: data });
      });
  }

  render() {
    return (
      <div>
        {this.state &&
          this.state.data && (
            <Chart options={options} highcharts={Highcharts} ref={"chart"} />
          )}
      </div>
    );
  }
}

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

现场演示：https://codesandbox.io/s/mz35zwxjoj