具有 5 种不同纯色（无渐变）的 Highcharts solid gauge arc shape

Question

我在 Y 轴停止中使用了实心规格高图表弧形我想使用 5 种不同的颜色，例如

0 to 39 - #B31700
40 to 64 - #F22808 
65 to 79 - #F98928 
80 to 89 - #F3C50B 
90 to 100 - #27aae1

问题是当给出像 90 这样的数据时，当值增加到 95 或 97 或 100 以上时，给定颜色的颜色非常不可见，然后实际颜色出现在图表中。

请帮我看看如何才能在 y 轴的停靠点开始时获得正确的颜色。

这是我使用 fiddle 的示例：

https://jsfiddle.net/9jsp08v7/1/

Answer 1

尝试使用 dataClasses 功能而不是 stops。

yAxis: [{
  ...,
  dataClasses: [{
    from: 0,
    to: 39,
    color: '#B31700'
  }, {
    from: 39,
    to: 64,
    color: '#F22808'
  }, {
    from: 64,
    to: 79,
    color: '#F98928'
  }, {
    from: 79,
    to: 89,
    color: '#F3C50B'
  }, {
    from: 89,
    to: 100,
    color: '#27aae1'
  }]
}],

演示：https://jsfiddle.net/BlackLabel/vxgda85y/

Answer 2

终于找到解决方法了

这里是 fiddle link:

stops: [
    [39 / 100, '#B31700'],
    [40 / 100, '#F22808'],
    [64 / 100, '#F22808'],
    [65/100, '#F98928'],
    [79/100, '#F98928'],
    [80/100, '#F3C50B'],
    [89/100, '#F3C50B'],
    [90/100, '#27aae1'],
    [100/100, '#27aae1']
  ]

https://jsfiddle.net/avdq5rf6/1/

具有 5 种不同纯色（无渐变）的 Highcharts solid gauge arc shape

Highcharts solidgauge arc shape with 5 diffrent solid color (no gradiant)

javascript

jquery

highcharts

gauge