react-highcharts-官方延迟加载数据

编程问答 2022-05-24

问题描述

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

但是我没有关于 highcharts-react-offical 的任何文档：

  • 如何正确监听 afterSetExtremes 以触发延迟数据加载？
  • 如何调用 setData？
  • 这如何处理多个系列？

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

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

解决方法

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

highchartshighchartsjavascriptreact-highchartsreactjsreactjsreactjsreactjs