highcharts 内的清除间隔（React）

Question

我正在尝试使用 highcharts 制作实时图表（动态数据），我需要在图表选项中设置间隔，现在我无法清除间隔（这是功能组件），因为它是在 const 和 series.addPoints 中仅在图表选项中工作我无法重新定位它

const getData = async() => {
  const res = await getEquipmentChart(id, Date.now() - 1, Date.now(), chart);
  return res ? .charts ? .[chart];
};


chart: {
  type: 'spline',
  animation: Highcharts.svg, // don't animate in old IE
  marginRight: 10,
  events: {
    load: function() {
      // set up the updating of the chart each second
      var series = this.series[0];
      setInterval(function() {
        getData().then((res) => {
          var x = new Date().getTime(), // current time
            y = parseFloat(res ? .[0] ? .[subchart]);
          series.addPoint([x, y], true, true);
        });
      }, 1000);

      // React.useEffect(() => () => clearInterval(i));
    },
  },
},

Answer 1

最清晰的方法似乎是使用图表组件引用，然后在 useEffect 挂钩中启动并清除间隔。

const HighchartsChart = () => {
  const chartComponentRef = useRef(null);
  const [options, setOptions] = useState({...});

  useEffect(() => {
    const chart = chartComponentRef.current.chart;
    const series = chart.series[0];

    const updateInterval = setInterval(() => {
      series.addPoint(...);
    }, 1000);

    return () => clearInterval(updateInterval);
  }, []);

  return (
    <HighchartsReact
      ref={chartComponentRef}
      highcharts={Highcharts}
      options={options}
    />
  );
};

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

highcharts 内的清除间隔（React）

clearing interval inside highcharts (React)

highcharts

reactjs