javascript - Highcharts Solid Gauge 只想显示 1 个数据标签

Question

我想在我的一个项目中使用 Highcharts，但在使用 Javascript 时遇到了一些问题，因为我对该语言还很陌生。我已经自定义了当前的图表，但数据标签彼此重叠，因为数据数组中有超过 1 个元素。

// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
    yAxis: {

        min: 0,
        max: 200,
        title: {
            text: 'Speed'
        }
    },

    credits: {
        enabled: false
    },

    series: [{
        name: 'Speed',


        data: [160, 50],
        dataLabels: {
            format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                   '<span style="font-size:12px;color:silver">km/h</span></div>'
        },
        tooltip: {
            valueSuffix: ' km/h'
        }
    }]

}));

您可以从上面看到我的 data: [160, 50] 数组。我必须将数组元素从最大到最低放置，因为图表上的数据图是在之前的数据图上绘制的；没关系，我正在处理这个问题。

我的问题是如何让 dataLabels 仅显示数据[0]？我尝试了很多方法但没有运气。通常我会在 jsfiddle 中看到一个空白屏幕，我认为这是无效的 JS。

这是一个默认图表，显示我在 jsfiddle 中的问题: http://jsfiddle.net/wzx8r9qq/

Answer 1

我从您的代码中了解到，您有一个包含两个数据点(160 和 50)的系列。因此，对于显示，您可以同时启用或不启用此功能。

对于您想要实现的目标，我认为替代方法是使用两个系列而不是一个系列，并显示一个系列而不是其他系列的值(value)。注意:这里有两个系列，一个在另一个之上。

这是更新后的代码和 jsFiddle

// The speed gauge
    $('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
        yAxis: {

            min: 0,
            max: 200,
            title: {
                text: 'Speed'
            }
        },

        credits: {
            enabled: false
        },

        series: [{
            name: 'Speed',
            data: [160],            
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
                       '<span style="font-size:12px;color:silver">km/h</span></div>'
            },
            tooltip: {
                valueSuffix: ' km/h'
            }
        },
                 {
            name: 'Speed',
            data: [50],            
            dataLabels: {
                format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                    ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '"></span><br/>' +
                       '<span style="font-size:12px;color:silver">km/h</span></div>'
            },
            tooltip: {
                valueSuffix: ' km/h'
            }
        }
                ]
    }