React highcharts 实现 - 超出最大更新深度

Question

我正在使用 highcharts 在反应中创建时间序列图表，在加载和调整大小时我触发一个函数，该函数将更新工具提示的位置和最后一项的时间戳。但我收到最大更新深度执行错误

import React, { useState } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import sampleData from './output.json';
import { Tooltip } from './components/Tooltip.jsx';
import './App.css';

function App() {
  const [left, setLeft] = useState(0);
  const [showToolTip, toggleToolTip] = useState(true);
  const [timeStamp, setTimeStamp] = useState(null);

  const getColor = (color) => {
    switch (color) {
      case 'NORMAL':
        return 'red';
      case 'MISSING':
        return 'grey';
      case 'WARNING':
        return 'blue';
      default:
        return 'blue';
    }
  };

  // Extract timeline data
  var timelineData = sampleData.data;

  // Format data for Highcharts
  var chartData = timelineData.map(function (entry) {
    return {
      x: new Date(entry.timestamp),
      y: 10, // Fixed y-value
      color: getColor(entry.status),
    };
  });

  const options = {
    credits: {
      enabled: false,
    },
    chart: {
      type: 'column',
      height: '140px',
      zoomType: 'x',
      resetZoomButton: {
        position: {
          align: 'right', // right by default
          verticalAlign: 'top',
          x: -10,
          y: 10,
        },
        relativeTo: 'chart',
      },
      marginTop: '40',
      events: {
        load: function () {
          const chart = this;
          var points = this.series[0].points;
          const lastItem = points[points.length - 1];
          setLeft(chart.plotWidth);
          setTimeStamp(lastItem.x);
        },
        redraw: function () {
          const chart = this;
          var points = this.series[0].points;
          const lastItem = points[points.length - 1];
          setLeft(chart.plotWidth);
          setTimeStamp(lastItem.x);
        },
      },
    },
    title: {
      text: null, // To Remove the tile
    },
    xAxis: {
      minPadding: 0,
      maxPadding: 0,
      dateTimeLabelFormats: {
        hour: '%I %p', // Format hours like "12 AM", "1 AM", etc.
      },
      events: {
        setExtremes: function (e) {
          console.log(e);
          if (typeof e.min == 'undefined' && typeof e.max == 'undefined') {
            // setLeft(e.target.len);
            console.log('e', e.target.len);
          } else {
            // setLeft(e.target.len);
            console.log('e', e.target.len);
          }
        },
      },
      type: 'datetime',
      title: {
        text: null, // To Remove the x axis tile
      },
    },
    yAxis: {
      visible: false,
      title: {
        text: null, // To Remove the y axis title
      },
    },
    tooltip: false,
    plotOptions: {
      series: {
        turboThreshold: 2000,
        groupPadding: 0,
        pointPadding: 0,
        showInLegend: false,
        marker: {
          enabled: true, // Disable markers
        },
        cursor: 'pointer',
        point: {
          events: {
            click: function (x) {
              setLeft(x.chartX);
              setTimeStamp(x.point.x);
              toggleToolTip(true);
              // alert("Category: " + this.category);
            },
          },
        },
      },
    },
    series: [
      {
        name: '',
        showInLegend: false,
        data: chartData,
        dataLabels: {
          enabled: true,
          formatter: function () {
            return this.point.cause;
          },
        },
      },
    ],
  };

  return (
    <div className="App">
      <div id="container">
        <HighchartsReact highcharts={Highcharts} options={options} />
        <Tooltip left={left} timeStamp={timeStamp} showToolTip={showToolTip} />
      </div>
    </div>
  );
}

export default App;

代码链接：https://stackblitz.com/edit/vitejs-vite-jqf7qw?file=src%2FApp.jsx

Answer 1

如果我们使用选择方法而不是使用重绘方法，它就可以正常工作

    selection: function (event) {
      const chart = this;
      if (event?.xAxis && event.xAxis.length > 0) {
        setLeft(chart.plotWidth);
        setTimeStamp(event.xAxis[0]?.max);
      } else {
        const chart = this;
        const lastItem = sampleData.data[sampleData.data.length - 1];
        setLeft(chart.plotWidth + 10);
        setTimeStamp(lastItem.timestamp);
      }
    },

完整代码链接https://stackblitz.com/edit/vitejs-vite-g4kjrc?file=src%2FApp.jsx