带有文本标签的 Highcharts 仪表图

Question

我有一个带有定义的刻度位置的仪表图，想在那里显示一些文本标签。 e. g.:

-300 => 文本 1
-200 => 文本 2
-100 => 文本 3
...

有办法吗？这是图表的fiddle。

$('#container').highcharts({
            chart: {
                type: 'gauge',
                alignTicks: false,
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false
            },

            title: {
                text: null
            },

            tooltip: {
                enabled: false
            },

            pane: {
                startAngle: -70,
                endAngle: 70,
                background: null
            },

            plotOptions: {
                gauge: {
                    dial: {
                        baseWidth: 2,
                        baseLength: '100%',
                        radius: '100%',
                        rearLength: 0
                    },
                    pivot: {
                        radius: 5
                    },
                    dataLabels: {
                        enabled: false
                    }
                }
            },

            yAxis: [ {
                min: -300,
                max: 500,
                tickPositions: [-300, -200, -100, 0, 100, 200, 300, 400, 500],
                lineColor: '#933',
                lineWidth: 0,
                minorTickPosition: 'outside',
                tickLength: 0,
                minorTickLength: 0,
                labels: {
                    distance: 12,
                    //rotation: 'auto'
                },
                //categories: ['Grunder'],
                offset: 0,
                plotBands: [{
                    from: -300,
                    to: 2,
                    thickness: 15,
                    color: '#55BF3B'
                }, {
                    from: 0,
                    to: 202,
                    thickness: 15,
                    color: {
                        linearGradient: {x1: 0, x2: 1, y1: 0, y2: 0},
                        stops: [
                            [0, '#55BF3B'], //green
                            [1, '#DDDF0D'] //yellow
                        ]
                    }
                }, {
                    from: 200,
                    to: 500,
                    thickness: 15,
                    color: {
                        linearGradient: {x1: 0, x2: 1, y1: 0, y2: 0},
                        stops: [
                            [0, '#DDDF0D'], //yellow
                            [1, '#ff0000'] //red
                        ]
                    }
                }]
            }, {
                min: -200,
                max: 200,
                lineColor: '#339',
                tickColor: '#339',
                minorTickColor: '#339',
                offset: -100,
                lineWidth: 2,
                labels: {
                    enabled: false
                },
                tickLength: 5,
                minorTickLength: 5,
                endOnTick: false
            }],

            series: [{
                data: [250]
            }]
        });

Answer 1

您可以使用 yAxis.labels.formatter 函数来检查标签值，并 return 根据该值选择您的文本。

以您的示例为例，它可能如下所示：

yAxis: {
    labels: {
        formatter: function() {
            if(this.value == -300) return '-300 => Text 1';
            if(this.value == -200) return '-200 => Text 2';
            if(this.value == -100) return '-100 => Text 3';
            return this.value;
    }
}

参见 this updated JSFiddle of how it works. As you can see you'll have to face the potential issue of labels overlapping the gauge, but you can fix that with distance, rotation and some other attributes (see API)，具体取决于标签的最终外观。

带有文本标签的 Highcharts 仪表图

Highcharts Gauge Chart with text labels

highcharts