React highcharts - 根据窗口调整大小定位自定义工具提示

Question

我将 highcharts 与 React 一起使用。我添加了一个自定义工具提示，基于用户单击我正在定位工具提示。这很好用。但问题是工具提示的位置与窗口大小相同或减小或增大。我想在屏幕尺寸变化时调整工具提示的位置

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

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 '#01a982';
      case 'MISSING':
        return '#757575';
      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;
          const lastItem = sampleData.data[sampleData.data.length - 1];
          setLeft(chart.plotWidth + 10);
          setTimeStamp(lastItem.timestamp);
        },
        selection: function (event) {
          const chart = this;
          if (event?.xAxis && event.xAxis.length > 0) {
            setLeft(chart.plotWidth + 10);
            setTimeStamp(event.xAxis[0]?.max);
          } else {
            const chart = this;
            const lastItem = sampleData.data[sampleData.data.length - 1];
            setLeft(chart.plotWidth + 10);
            setTimeStamp(lastItem.timestamp);
          }
        },
      },
    },
    title: {
      text: null, // To Remove the tile
    },
    xAxis: {
      minPadding: 0,
      maxPadding: 0,
      dateTimeLabelFormats: {
        hour: '%I %p', // Format hours like "12 AM", "1 AM", etc.
      },
      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;

Answer 1

您可以在图表重绘时触发组件更新：

chart: {
  ...,
  events: {
    ...,
    redraw: function(){
      setChartRedraw({});
    }
  },
}

并使用

toPixels

方法计算左侧工具提示的位置：

  useEffect(() => {
    const chart = chartComponent.current?.chart;

    if (chart && timeStamp) {
      const xAxis = chart.xAxis[0];
      setLeft(xAxis.toPixels(timeStamp));
    }
  }, [chartRedraw]);

---

现场演示：https://stackblitz.com/edit/vitejs-vite-mgpemw

API 参考： https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels