Question

我有一个带有定义刻度位置的仪表图表，并希望在那里显示一些文字标签。即G：

-300 =＆gt;文字1
-200 =＆gt;文字2
-100 =＆gt;文字3
...

有办法吗？这是图表的小提琴。

$('#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函数检查标签值是什么，并根据该值返回您选择的文字。

举个例子，它看起来像这样：

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它的工作原理。正如您所看到的那样，您必须面对与标尺重叠的标签的潜在问题，但您可以使用distance，rotation和其他一些属性（see API）来解决这个问题，取决于标签最终的外观。

Highcharts Gauge Chart with text labels

1 个答案: