React 中 Highcharts 动态自定义提示框：逐步指南

2024-03-07 09:56:15

在 React 中使用 Highcharts 创建动态自定义提示框

引言

在数据可视化的世界中，提示框是一个至关重要的元素，它可以提供有关图表数据的附加信息。通过定制提示框，您可以增强用户的体验，使其根据特定需求轻松理解数据。本文将指导您如何在 React 中使用 Highcharts 库创建自定义提示框，并使其随着窗口大小的改变而动态调整位置。

步骤 1：自定义提示框组件

创建 Tooltip 组件，它包含自定义提示框的逻辑。该组件将接收 left、timeStamp 和 showToolTip 道具。

// Tooltip.jsx
import React from 'react';

const Tooltip = ({ left, timeStamp, showToolTip }) => {
  return (
    <div
      className="tooltip"
      style={{ left: `${left}px`, display: showToolTip ? 'block' : 'none' }}
    >
      {/* 提示框内容 */}
      <p>时间戳：{timeStamp}</p>
    </div>
  );
};

export default Tooltip;

步骤 2：集成 Highcharts

在您的 React 组件中，导入 Highcharts、Highcharts-React-Official 和您创建的 Tooltip 组件。

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

// ...其他代码

步骤 3：配置 Highcharts 选项

在 Highcharts 选项中，配置提示框并将其设置为 false，因为您将使用自定义提示框。

const options = {
  // ...其他选项
  tooltip: false,
  // ...其他选项
};

步骤 4：添加事件处理程序

在 Highcharts 选项中，添加事件处理程序以侦听窗口大小改变事件并更新自定义提示框的位置。

const options = {
  // ...其他选项
  chart: {
    // ...其他选项
    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);
        }
      },
    },
  },
  // ...其他选项
};

步骤 5：渲染组件

最后，在您的 React 组件中渲染 Highcharts 图表和自定义提示框组件。

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