Highcharts自定义tooltip中如何获取pattern样式展示对应图例

问题原因 #

渐变、pattern填充属于SVG内部定义在<defs>节点的可复用资源，point.color.toString()返回的url(#highcharts-xxx)只是SVG文档内的引用锚点，脱离当前Highcharts生成的SVG上下文（比如直接放到HTML元素的CSS属性、独立标签里）时，会找不到对应id的资源定义，自然无法正常渲染。

零手写SVG的实现方案 #

不需要手动编写SVG路径、渐变规则、图案逻辑，直接复用Highcharts已经渲染完成的图例资源即可，适配所有填充类型（纯色/渐变/pattern），后续修改系列样式时tooltip图例自动同步，维护成本极低：

tooltip: {
  useHTML: true,
  formatter() {
    const series = this.series;
    const point = this.point;
    // 读取当前系列已经渲染好的图例符号节点
    const symbolNode = series.legendSymbol.element;
    let defContent = '';
    // 非纯色填充时读取对应渐变/pattern的定义节点
    if (typeof series.color === 'string' && series.color.startsWith('url(')) {
      const defId = series.color.match(/url\(([^)]+)\)/)[1];
      const defNode = document.querySelector(defId);
      defContent = defNode?.outerHTML || '';
    }
    // 拼接为可独立渲染的内联SVG，尺寸可根据自身UI需求调整
    const legendIcon = `
      <svg width="16" height="12" style="display: inline-block; vertical-align: middle; margin-right: 6px;">
        <defs>${defContent}</defs>
        ${symbolNode.outerHTML}
      </svg>
    `;
    // 拼接自定义tooltip内容即可
    return `${legendIcon}${series.name}: ${point.y}`;
  }
}

适配注意事项 #

• 如果是多系列共享tooltip的场景，遍历所有对应系列重复上述取节点拼接的逻辑即可
• 不需要提前注入全局SVG资源，拼接的内联SVG自带完整的填充定义，在HTML上下文里可以独立渲染
• 不需要额外引入Highcharts模块，所有属性都是渲染完成后可直接读取的原生DOM节点属性

内容的提问来源于stack exchange，提问作者Augustin Riedinger