Highcharts 如何为固体仪表图表定义colorAxis数据类？

我正在尝试使用colorAxis数据类将solid gauge chart设置为对范围使用定义的颜色，但它不起作用。不知道我做错了什么

我应该如何定义colorAxis和DataClass

请参见更新我已经修改了FIDLE使用stops，它适用于定义为红色、绿色的颜色，而不是十六进制的颜色！尝试51、65和81等值

 $(function() {

  Highcharts.chart('container-cpu', {

    chart: {
      type: 'solidgauge'
    },

    title: null,

    pane: {
      center: ['50%', '85%'],
      size: '140%',
      startAngle: -90,
      endAngle: 90,
      background: {
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
        innerRadius: '60%',
        outerRadius: '100%',
        shape: 'arc'
      }
    },

    tooltip: {
      enabled: false
    },

    yAxis: {
      min: 0,
      max: 100,
      title: {
        text: 'CPU'
      }
    },

    colorAxis: {
      dataClasses: [{
        from: 0,
        to: 50,
        color: 'red'
      }, {
        from: 50,
        to: 90,
        color: 'green'
      }, {
        from: 90,
        color: 'yellow'

      }]
    },

    series: [{
      name: 'HDD',
      data: [70]

    }]

  });
});

---

对于任何值，我都会看到默认的蓝色，对于值70，我希望看到绿色。

要给solidgauge的值着色，您应该使用stops，如下所示：

yAxis: {
  stops: [
    [0.5, 'red'], 
    [0.9, 'green'], 
    [1, 'yellow'] 
  ],
  min: 0,
  max: 100,
  title: {
    text: 'CPU'
  }
},

仅适用于固体仪表系列。固体仪表的颜色停止。如果minColor和maxColor之间的线性渐变不够，请使用此选项。stops是一个元组数组，其中第一项是一个介于0和1之间的浮点值，指定渐变中的相对位置，第二项是颜色

工作JSFIDLE示例：

停止时的API:

---

因为你在评论中说你想使用纯色，而不是渐变色；以下是实现该功能的一种方法：

chart: {
  type: 'solidgauge',
  events: {
    load: function() {
      var currentValue = this.series[0].points[0].y;
      var newColor = '';
      console.log(currentValue)
        if(currentValue < 50) {
        newColor = 'red'
      } else if(currentValue < 90) {
        newColor = 'green'
      } else {
        newColor = 'yellow'
      }
      this.series[0].points[0].update({color: newColor}, true)
    }
  }
},

图表：{
类型：“solidgauge”，
活动：{
加载：函数（）{
var currentValue=this.series[0]。点[0]。y；
var newColor=''；
console.log（当前值）
如果（当前值<50）{
新颜色='红色'
}否则如果（当前值<90）{
新颜色='绿色'
}否则{
新颜色='黄色'
}
this.series[0]。点[0]。更新（{color:newColor}，true）
}
}
},

工作示例：

---

点上的API。更新：

而不是

colorAxis

，您需要在

yAxis

中添加带有正确值的

stops

。我相信这就是你要找的。正如我所检查的，它没有创建渐变，颜色是实心的

$（函数（）{
Highcharts.chart（'container-cpu'{
图表：{
类型：“solidgauge”
},
标题：空，
窗格：{
中心：['50%，'85%，]，
大小：“140%”，
startAngle:-90，
端角：90，
背景：{
背景颜色：（Highcharts.theme&&Highcharts.theme.background2）| |'#EEE'，
内半径：“60%”，
外层：“100%”，
形状：“圆弧”
}
},
工具提示：{
已启用：false
},
亚克斯：{
停止：[
[0.5，#DF5353']，//红色
[0.9，#55BF3B']，//绿色
[1，#DDDF0D']//黄色
],
分:0,，
最高：100，
标题：{
文本：“CPU”
}
},
系列：[{
名称：'HDD'，
数据：[49]
}]
});
});

我无法使用“停止”，因为我不想使用渐变。我需要0到50之间的所有值都使用纯色，然后50到90之间的值使用另一种纯色，etcI已更新我的答案以立即解释纯色。tnx以获取您的帮助。似乎只有在使用绿色、红色等颜色名称时，纯色才有效，对于十六进制颜色停止，如#55BF3B，它计算两次停止之间的颜色我更新了fiddle在本例中有两种方法，但有一种是注释的。所以对于值51和81，第一种情况下得到黄色，第二种情况下得到2个停止点之间的计算颜色，我仍然得到计算颜色。试试51、65和81之类的数值。我还得把你的小提琴修好才能让它工作。似乎只有在使用绿色、红色等颜色名称时，纯色才有效，对于十六进制颜色停止，如#55BF3B，它计算两次停止之间的颜色我更新了fiddle在本例中有两种方法，但有一种是注释的。所以对于值51和81，第一种情况下得到黄色，第二种情况下得到两次停止之间的计算颜色