Question

我尝试使每个数据标签Xaxis具有相同的颜色，如bar的颜色

有没有办法让它匹配？

继承人的代码

var colors = ['#76daff','#b9f','#99ffa6','#ffc312'];
xAxis: {
      type: 'category',
      labels: {
        useHTML : true,
        formatter: function () {
             return '<div class="myToolTip" style="color:'+colors+'">'+this.value+'</div>';
        },
      }
    },

继承人link for full code

Answer 1

目前，您已将完整colors数组的表示填充到样式定义中。这导致以下结果：

style="color:#76daff,#b9f,#99ffa6,#ffc312"

这显然不是理想的行为。

但是您的formatter函数可以使用this获取有关其上下文的信息（在本例中为相应的数据点），如已使用this.value显示正确的值所示。 this附加项具有this.pos属性，其中包含当前数据点的索引。（值得庆幸的是，索引开始按0计数，因为每个程序员都会这样做）

因此，通过稍微调整代码，您将获得当前匹配的颜色而不是完整的数组：

formatter: function () {
  return '<div class="myToolTip" style="color:'+colors[this.pos]+'">'+this.value+'</div>';
}

但是作为另一种保护措施，你可以在颜色数量少于数值的情况下复制highcharts行为（在颜色数组的末尾，你只需使用modulo重新开始）：

formatter: function () {
  return '<div class="myToolTip" style="color:'+colors[this.pos % color.length]+'">'+this.value+'</div>';
}

修改：我updated your codepen向您展示一个有效的示例。我还使用标准formatString来相应地设置实际值的样式。

make xaxis datalabels与bar Highcharts具有相同的颜色

1 个答案: