highcharts - 如何为实体仪表图定义 colorAxis 数据类？

Question

我正在尝试使用 colorAxis dataClasses 将实体仪表图设置为对范围使用定义的颜色，但它不起作用。不确定我做错了什么。

我应该如何定义 colorAxis 和 dataClasses？

请参阅http://jsfiddle.net/edob/27oc38L1 更新!!! 我修改了 fiddle 以使用停止点，它适用于定义为红色、绿色的颜色，而不是十六进制颜色!试试 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 的绿色。

Answer 1

要为 solidgauge 的值着色，您应该使用止损，如下所示:

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

Solid gauge series only. Color stops for the solid gauge. Use this in cases where a linear gradient between a minColor and maxColor is not sufficient. The stops is an array of tuples, where the first item is a float between 0 and 1 assigning the relative position in the gradient, and the second item is the color.

工作 JSFiddle 示例: http://jsfiddle.net/ewolden/c8qy4x5o/1/

API 停止: https://api.highcharts.com/highcharts/yAxis.stops

---

既然你在评论中说你想使用纯色，而不是渐变；以下是您可以实现的一种方式:

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)
    }
  }
},

工作示例: http://jsfiddle.net/ewolden/s9qrhtmb/

API on point.update: https://api.highcharts.com/class-reference/Highcharts.Point#update