Highcharts如何配置让图例脱离SVG，作为外部HTML列表渲染？

Highcharts 没有提供直接将完整图例（含颜色标识）从SVG中移出、渲染为纯HTML列表的原生配置项。
仅配置legend.useHTML = true时，只有图例文本节点会被放到SVG外部以HTML渲染，图例的颜色标记、交互热区仍然属于SVG内部元素，和实际测试观察到的现象一致。

要实现完整的外置HTML列表图例，可按以下步骤实现：

• 禁用默认内置图例
  初始化图表时设置legend.enabled = false，彻底关闭SVG内部的原生图例渲染，避免冗余节点残留。
• 自行渲染外部HTML列表结构
  在图表load、redraw事件回调中遍历图表实例的chart.series数组，读取每个序列的名称、主题色、当前显隐状态，在图表容器外的自定义DOM节点中生成<ul>列表结构，用带背景色的<span>元素替代原SVG内的图例颜色标识。
• 对齐原生图例交互
  给每个列表项绑定点击事件，触发对应序列的setVisible()方法切换序列显隐，同时同步更新列表项的透明度、样式，匹配原生图例的交互反馈。

核心实现代码参考：

// 图表初始化配置
Highcharts.chart('chart-container', {
  legend: {
    enabled: false // 关闭默认图例
  },
  chart: {
    events: {
      load() {
        const chart = this;
        const legendWrap = document.querySelector('#external-legend');
        legendWrap.innerHTML = '';
        // 遍历序列生成列表项
        chart.series.forEach(series => {
          const listItem = document.createElement('li');
          listItem.style.display = 'flex';
          listItem.style.alignItems = 'center';
          listItem.style.cursor = 'pointer';
          // 自定义颜色标识
          const marker = document.createElement('span');
          marker.style.width = '12px';
          marker.style.height = '12px';
          marker.style.marginRight = '6px';
          marker.style.background = series.color;
          // 图例文本
          const label = document.createElement('span');
          label.textContent = series.name;
          // 初始状态匹配序列显隐
          listItem.style.opacity = series.visible ? 1 : 0.4;
          // 绑定点击切换逻辑
          listItem.addEventListener('click', () => {
            series.setVisible();
            listItem.style.opacity = series.visible ? 1 : 0.4;
          });
          listItem.append(marker, label);
          legendWrap.appendChild(listItem);
        })
      },
      // 重绘时同步更新图例状态
      redraw() {
        // 此处可补充序列动态更新时的图例同步逻辑
      }
    }
  },
  // 其余业务配置：坐标轴、tooltip、series数据等
  series: []
})

对应页面DOM结构：

<!-- 图表容器 -->
<div id="chart-container" style="width: 100%; height: 400px"></div>
<!-- 外置HTML图例容器 -->
<ul id="external-legend" style="list-style: none; display: flex; gap: 20px; padding: 12px 0; margin: 0"></ul>

如果需要匹配折线图、饼图等不同图表类型的原生图例标记样式，只需要调整自定义marker元素的CSS（比如折线图改成短横线、饼图改成扇形）即可，所有图例节点完全在SVG外部，符合纯HTML列表的渲染要求。

内容的提问来源于stack exchange，提问作者Sidra Sultana