Highcharts导出时如何使用无HTML标记的不同标签？

要实现浏览器渲染用HTML、导出图片用无标记且效果一致的需求，核心是在labels.formatter中区分渲染场景，分别返回对应内容，具体方案如下：

关键思路 #

Highcharts的formatter函数中可以通过this.chart.renderer.forExport属性判断当前是否处于导出流程：

• 浏览器渲染时：返回带HTML的内容，配合labels.useHTML: true实现样式
• 导出时：返回纯文本，并通过Highcharts原生的labels.style配置匹配HTML中的样式，避免导出时保留HTML标记

代码示例 #

假设你原本的配置是用HTML给标签加加粗和红色样式，修改后的配置如下：

Highcharts.chart('container', {
  // 其他图表配置...
  labels: {
    useHTML: true, // 开启浏览器端的HTML支持
    style: {
      // 配置导出时的文本样式，和HTML中的样式一致
      color: 'red',
      fontWeight: 'bold'
    },
    formatter: function() {
      const displayValue = this.value;
      
      // 判断是否处于导出状态
      if (this.chart.renderer.forExport) {
        // 导出时返回纯文本，依赖style配置实现样式
        return displayValue;
      } else {
        // 浏览器渲染时返回HTML内容
        return `<span style="color: red; font-weight: bold">${displayValue}</span>`;
      }
    }
  },
  exporting: {
    allowHTML: false // 导出时关闭HTML支持，避免保留标记
  }
});

为什么之前的allowHTML: true无效？ #

当你设置exporting.allowHTML: true时，Highcharts并不会将HTML渲染成视觉效果后导出，而是直接把HTML字符串作为文本内容导出，所以会保留<span>、<b>这类标记。只有主动区分场景，在导出时返回纯文本并通过原生样式配置匹配效果，才能解决问题。

如果你的HTML包含换行（<br>）这类元素，导出时可以将<br>替换为\n，同时确保Highcharts导出时支持换行（可通过style.whiteSpace: 'pre'配置实现）。

内容的提问来源于stack exchange，提问作者Ben Williams