Question

所以我创建了一个带有高图的图表，我尝试在栏上自定义颜色，我尝试使数据标签与栏具有相同的颜色。起初我的数据标签没有改变颜色。但是当我调整窗口大小时，数据标签的颜色突然改变了。如何在页面加载后立即更改颜色？（没有调整大小的触发器）。

dataLabels: {
        enabled: true,
        formatter:function() {
            var pcnt = (this.y / dataSum) * 100;
            // return Highcharts.numberFormat(pcnt) + '%';
            return '<tspan style="color:' + this.point.color + '">' + Highcharts.numberFormat(pcnt) + '%' + '</tspan>';
        }

完整代码位于here

Answer 1

此问题的原因是数据标签在之前呈现在colors数组中的选项中定义的SVG模式。更改容器的宽度并应用适当的值时，将重新绘制图表。

重绘之前（[object Object]不是fill的正确值）：

<tspan style="fill:[object Object]" x="5" y="16">25.00%</tspan>

重绘后：

<tspan style="fill:url(#highcharts-gbd5ohb-4)" x="5" y="16">25.00%</tspan>

我不认为它可以被视为错误 - API 指定仅支持十六进制颜色值：https://api.highcharts.com/highcharts/colors

作为解决方法，您可以将dataLabels.formatter定义移至update中的chart.events.load函数：

events: {
   load: function() {         
     this.update({
       plotOptions: {
          series: {
             dataLabels: {
               formatter:function() {
                  var pcnt = (this.y / dataSum) * 100;
                  // return Highcharts.numberFormat(pcnt) + '%';
                   return '<tspan style="color:' + this.point.color + '">' + Highcharts.numberFormat(pcnt) + '%' + '</tspan>';
              }}
          }
       }
     });
   }
}

现场演示： https://codepen.io/anon/pen/PeGWrx

根据条形颜色更改highcharts上的dataLabels

1 个答案: