0

我在用 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 中的类别）会发生变化，正如预期的那样。所以这看起来像我需要走的路，但我如何让数据可见？我错过了什么？

4

1 回答 1

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

于 2018-09-24T16:07:59.387 回答