如何在React中为Highcharts添加无交互自定义额外图例且不影响原有图例

核心思路 #

借助Highcharts的renderer API在图表容器内独立绘制自定义图例元素，完全不干涉原有图例的逻辑和样式，确保原有交互功能不受影响。

实现步骤 #

1. 获取图表实例并挂载后绘制自定义图例
   在React组件中通过useRef获取图表实例，在组件挂载完成后调用自定义绘制函数：

import React, { useEffect, useRef } from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

const LineChart = () => {
  const chartRef = useRef(null);
  // 原有折线图配置，保留原有图例设置
  const chartOptions = {
    series: [
      { name: '折线1', data: [12, 24, 18, 30, 22] },
      { name: '折线2', data: [8, 16, 22, 14, 28] }
    ],
    legend: {
      enabled: true, // 保持原有图例正常显示
      align: 'center'
    }
  };

  useEffect(() => {
    const chartInstance = chartRef.current?.chart;
    if (chartInstance) {
      renderCustomStaticLegends(chartInstance);
    }
  }, []);

  // 自定义图例绘制函数
  const renderCustomStaticLegends = (chart) => {
    // 定义需要展示的自定义图例数据
    const staticLegends = [
      { color: '#ff6b6b', label: '异常阈值' },
      { color: '#4ecdc4', label: '参考基线' },
      { color: '#ffe66d', label: '预警区间' }
    ];

    // 获取原有图例的位置，用于对齐自定义图例
    const originalLegend = chart.legend;
    const startX = originalLegend.group.translateX;
    const startY = originalLegend.group.translateY + originalLegend.legendHeight + 15; // 下方间距15px
    let currentX = startX;
    const itemGap = 30; // 图例项之间的间距

    // 创建分组统一管理自定义图例元素，方便后续销毁重绘
    if (chart.customLegendGroup) {
      chart.customLegendGroup.destroy();
    }
    chart.customLegendGroup = chart.renderer.g().add();

    staticLegends.forEach(item => {
      // 绘制图例标记方块
      chart.renderer.rect(currentX, startY, 12, 12)
        .attr({ fill: item.color, stroke: '#fff', strokeWidth: 1 })
        .add(chart.customLegendGroup);

      // 绘制图例文本
      chart.renderer.text(item.label, currentX + 16, startY + 10)
        .attr({ fontSize: '12px', color: '#555' })
        .add(chart.customLegendGroup);

      // 更新下一个图例项的X坐标（简单估算文本宽度，可根据实际调整）
      currentX += 12 + 16 + itemGap + item.label.length * 6;
    });
  };

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

export default LineChart;

2. 适配窗口大小变化
   如果图表需要响应窗口缩放，在图表的resize事件中重新绘制自定义图例，避免错位：

// 在chartOptions中添加resize事件配置
chartOptions.chart = {
  events: {
    resize: function() {
      renderCustomStaticLegends(this);
    }
  }
};

3. 样式自定义

• 图例标记：将rect改为circle可实现圆形标记，通过attr调整尺寸、边框样式。
• 文本样式：修改fontSize、fontWeight、color等属性匹配UI需求。

内容的提问来源于stack exchange，提问作者Bhagyesh Bodhe