如何在 highcharts 仪表图表中更改不同间隔的刻度线和次要刻度线颜色

Question

我用的是highchart的gauge chart。我想按时间间隔更改刻度线的颜色。如果我使用 tickColor 和 minorTickColor 那么它会在整个范围内改变。

我使用了 minorTickColor 和 tickColor 但不知道如何在不同的范围内赋予不同的颜色。

 yAxis:{
            min: 0,
            max: 200,

            minorTickInterval: 'auto',
            minorTickWidth: 1,
            minorTickLength: 10,
            minorTickPosition: 'inside',

            minorTickColor:'blue',



            tickPixelInterval: 30,
            tickWidth: 2,
            tickPosition: 'inside',
            tickLength: 12,
            tickColor: 'red',
            labels: {
                step: 2,
                rotation: 'auto'
            },
            title: {
                text: 'km/h'
            },
            plotBands: [{

                from: 0,
                to: 120,
                className: 'green-band',
            // green
            }, {
                from: 120,
                to: 160,

                className: 'yellow-band' // yellow
            }, {
                from: 160,
                to: 200,
                className: 'red-band' // red
            }]

        },

Answer 1

Highcharts 中没有轴刻度的范围。但是，您可以通过遍历 ticks 集合并在其位置满足要求时更改每个 tick 属性来实现它。检查下面发布的演示和代码。

代码：

chart: {
  ...
  events: {
    load: function() {
      var chart = this,
        yAxis = chart.yAxis[0],
        key, tick, minorTick;

      for (key in yAxis.ticks) {
        tick = yAxis.ticks[key];

        if (tick.pos < 120) {
          tick.mark.attr({
            stroke: 'red'
          });
        } else if (tick.pos >= 120 && tick.pos < 160) {
          tick.mark.attr({
            stroke: 'green'
          });
        } else if (tick.pos >= 160) {
          tick.mark.attr({
            stroke: 'yellow'
          });
        }
      }

      for (key in yAxis.minorTicks) {
        minorTick = yAxis.minorTicks[key];

        if (minorTick.pos < 120) {
          minorTick.mark.attr({
            stroke: 'orange'
          });
        } else if (minorTick.pos >= 120 && minorTick.pos < 160) {
          minorTick.mark.attr({
            stroke: 'tomato'
          });
        } else if (minorTick.pos >= 160) {
          minorTick.mark.attr({
            stroke: 'blue'
          });
        }
      }
    }
  }
}

演示：

https://jsfiddle.net/BlackLabel/kbe6joac/

API参考：

https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr

如何在 highcharts 仪表图表中更改不同间隔的刻度线和次要刻度线颜色

How to change tick and minorTick color in different interval in highcharts gauge charts

highcharts

gauge

reactjs