react-highcharts-官方懒加载数据

Question

我喜欢延迟加载数据，例如 highstock sample "1.7 million points with async loading" 通过 highcharts-react-offical 在具有多个系列的打字稿中使用 highstock。

但是我缺少关于 highcharts-react-offical 的任何文档：

• 如何正确监听 afterSetExtremes 触发延迟数据加载？
• 如何调用 setData？
• 这如何与多个系列一起使用？

谁能帮我解决这个问题并提供任何样本？

非常感谢您的专业知识和帮助！

Answer 1

Highcharts 图表的选项在有和没有反应包装器的情况下是相同的，它们是独立的。实现延迟加载图表的最简单方法是将数据加载功能排除在 React 之外 - 您只需要使用与 jsfiddle 示例中几乎相同的代码。

现场演示： https://codesandbox.io/s/highcharts-react-demo-forked-ci7hf?file=/chartOptions.js

---

但是，您也可以使用更“响应式”的方式，通过更新状态来更新图表。

const ChartComponent = () => {
  const [options, setOptions] = useState({
    ...,
    xAxis: {
      events: {
        afterSetExtremes
      }
    }
  });

  function afterSetExtremes(e) {
    const { chart } = e.target;
    chart.showLoading("Loading data from server...");
    fetch(`${dataURL}?start=${Math.round(e.min)}&end=${Math.round(e.max)}`)
      .then((res) => res.ok && res.json())
      .then((data) => {
        setOptions({ // update chart with new data
          series: [{ data }]
        });
        chart.hideLoading();
      })
      .catch((error) => console.error(error.message));
  }

  return (
    <HighchartsReact
      options={options}
      ...
    />
  );
};

现场演示： https://codesandbox.io/s/highcharts-react-demo-forked-wvrd6?file=/demo.jsx