Highcharts气泡图数据标签颜色对比问题答案

【问题标题】：Highcharts bubble chart datalabels color contrast issueHighcharts气泡图数据标签颜色对比问题
【发布时间】：2021-05-12 07:02:50
【问题描述】：

最近我将 highcharts 版本从 v8.2.2 更新到 v9.1.0。在这次迁移之后，我注意到 highcharts 并没有像以前那样绘制气泡图数据标签，标签的对比度也不再令人满意。

这里是 v8.2.2 的图像，数据标签没问题。如您所见，数据标签的对比度很好。甚至 highcharts 也为文本添加了轮廓和边框，以便更好地呈现。

这是 v9.1.0 的图像，其中代码没有任何更改，仅通过更新，数据标签显示不佳。

如何在 v9.1.0 中实现以前的数据集设计？

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

解决了这个问题。只需将这两个属性添加到 plotOptions.bubble.dataLabels.style 或 plotOptions.series.dataLabels.style 即可。

color: 'contrast',
textOutline: 'none'

我的完整 plotOptions 对象：

plotOptions: {
  bubble: {
    minSize: '1%',
    maxSize: '20%',
    dataLabels : {
      style: {
        color: 'contrast',
        textOutline: 'none'
      }
    }
  },
  series: {
    dataLabels: {
      enabled: true,
      format: '{point.name}',
      
    },
    animation: false
  }
},

【讨论】：