HighCharts导出图片文本样式异常：设置背景色后出现描边效果

可以通过以下两种方式解决该问题：

方法一：全局禁用文本描边 #

在HighCharts配置中，给所有文本元素统一设置textOutline: 'none'，覆盖导出时自动添加的描边样式：

Highcharts.setOptions({
  title: { style: { textOutline: 'none' } },
  subtitle: { style: { textOutline: 'none' } },
  xAxis: { labels: { style: { textOutline: 'none' } } },
  yAxis: { labels: { style: { textOutline: 'none' } }, title: { style: { textOutline: 'none' } } },
  legend: { itemStyle: { textOutline: 'none' } },
  tooltip: { style: { textOutline: 'none' } }
});

之后正常在导出配置中设置背景色即可：

exporting: {
  chartOptions: {
    backgroundColor: '#ffffff' // 替换为你需要的背景色
  }
}

方法二：仅导出场景配置文本样式 #

如果不需要全局修改，可在exporting.chartOptions里针对导出场景单独设置文本描边为无：

exporting: {
  chartOptions: {
    backgroundColor: '#ffffff',
    title: { style: { textOutline: 'none' } },
    xAxis: { labels: { style: { textOutline: 'none' } } },
    yAxis: { labels: { style: { textOutline: 'none' } }, title: { style: { textOutline: 'none' } } },
    legend: { itemStyle: { textOutline: 'none' } }
  }
}

原理说明 #

当设置导出背景色时，HighCharts会自动给文本添加textOutline样式，以提升有色背景下的文本可读性。手动设置textOutline: 'none'可以覆盖这个默认行为，实现自定义背景色与正常文本显示的同时生效。

内容的提问来源于stack exchange，提问作者tiz LIU