Question

我想在我的项目中使用Highcharts但是我在使用Javascript时遇到了一些麻烦，因为我对这门语言很新。我已经定制了当前的图表，但数据标签彼此重叠，因为数据数组中有多个元素。

// 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）的系列。因此，对于显示器，您可以为这两者启用此功能。

对于你想要达到的目标，我认为替代方案是使用两个系列而不是一个并显示一个系列的值而不是其他系列。注意：这里有两个系列，一个在另一个之上。

以下是更新的代码和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'
            }
        }
                ]
    }

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

1 个答案: