如何在 highchart 仪表上显示特定的刻度值？答案

【问题标题】：how to show specific tick value on highchart gauge?如何在 highchart 仪表上显示特定的刻度值？
【发布时间】：2018-11-09 22:02:06
【问题描述】：

我想显示绿色和黄色以及红色 plotBands 之间的值。

在附加的示例中，我想显示值 135,172（颜色正在变化）

yAxis: {
min: 0,
max: 200,

minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',

tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
    step: 2,
    rotation: 'auto'
},
title: {
    text: 'km/h'
},
plotBands: [{
    from: 0,
    to: 135,
    color: '#55BF3B' // green
}, {
    from: 135,
    to: 172,
    color: '#DDDF0D' // yellow
}, {
    from: 172,
    to: 200,
    color: '#DF5353' // red
}]
},

Working Example In JSFiddle

【问题讨论】：

像这样：jsfiddle.net/ewolden/08grxtqs/10?
@ewolden 我可以查看刻度值并添加修复值吗？ 0,20,40,60,80,100,120,140,160,180,200（按图表计算）加上我的（135,172）
像这样：jsfiddle.net/ewolden/08grxtqs/21?这有每 20 个刻度，并确保标签不重叠。

标签： highcharts gauge

【解决方案1】：

您可以使用tickPositioner 函数来定义图表上将显示哪些分时：

    tickPositioner: function() {
        var plotBands = this.options.plotBands,
            ticks = [],
            i = 0;

        for (i; i <= 200; i += 20) {
            ticks.push(i);
        }

        for (i = 0; i < plotBands.length - 1; i++) {
            ticks.push(plotBands[i].to)
        }
        return ticks;
    }

现场演示：https://jsfiddle.net/BlackLabel/1kpt7dws/

API：https://api.highcharts.com/highcharts/yAxis.tickPositioner

【讨论】：