时间戳

首页 > 解决方案 > 使 xaxis 数据标签具有与条形 Highcharts 相同的颜色

jquery - 使 xaxis 数据标签具有与条形 Highcharts 相同的颜色

问题描述

我尝试使每个数据标签 Xaxis 具有与条形颜色相同的颜色

有什么办法让它匹配吗？

这是代码

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

这是完整代码的链接

标签： jqueryhighcharts

解决方案

目前，您正在将完整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 行为（在颜色数组的末尾，您只需使用模数重新开始）：

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

编辑：我更新了您的 codepen以向您展示一个工作示例。我还使用标准 formatString 来相应地设置实际值的样式。

推荐阅读