Highcharts柱状图数据标签与柱子颜色同步：页面加载不生效的解决办法

嗨，这个问题我做项目时也踩过坑！本质原因是Highcharts初始化数据标签的时机太早——当formatter函数第一次执行时，柱状条的最终颜色还没完全赋值到this.point.color上；而窗口resize时图表会触发重新渲染，此时颜色已经确定，所以数据标签颜色就同步了。

给你几个靠谱的解决方案，按需选择：

方案1：直接给dataLabels绑定颜色函数（最推荐） #

不用在formatter里通过tspan设置样式，直接把dataLabels的color属性设为动态获取颜色的函数，让Highcharts在合适的时机读取柱子颜色：

dataLabels: {
  enabled: true,
  // 直接绑定对应柱子的颜色
  color: function() {
    return this.point.color;
  },
  formatter:function() {
    var pcnt = (this.y / dataSum) * 100;
    return Highcharts.numberFormat(pcnt) + '%';
  }
}

这个方法最简洁，完全贴合Highcharts的设计逻辑，从根源上避免了时机问题。

方案2：在图表加载完成后手动更新数据标签 #

如果一定要保留tspan的写法，可以在图表的load事件里，手动给每个数据标签设置对应柱子的颜色：

chart: {
  type: 'column',
  events: {
    load: function() {
      var chart = this;
      // 遍历所有系列的所有数据点
      chart.series.forEach(function(series) {
        series.points.forEach(function(point) {
          // 给数据标签设置和柱子一致的颜色
          point.dataLabel.attr({
            fill: point.color
          });
        });
      });
    }
  }
}

方案3：触发一次重绘（简单粗暴） #

如果不想写遍历代码，也可以在load事件里直接触发图表重绘，强制数据标签重新计算样式：

chart: {
  type: 'column',
  events: {
    load: function() {
      this.redraw();
    }
  }
}

不过这个方法会让图表重新渲染一次，性能略逊于前两种，适合简单场景。

补充说明 #

不管你是通过series.color设置统一的自定义颜色数组，还是给每个data项单独指定color，this.point.color都会正确存储对应柱子的颜色值，所以上述方案都能生效。

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