Highcharts车速表，里程计数器的数据标签

Highcharts Speedometer, dataLabel for mileage counter

本文关键字：计数器 数据 标签 Highcharts      更新时间：2023-09-26

Highcharts中有几个速度计的例子。

有没有办法只显示一个数据标签，而不在仪表中显示刻度？它可以显示行程记录器、里程计数器或日计数器。

我尝试了其他系列和dataLabels，但无法运行。

http://jsfiddle.net/uqa0t3xw

series: [{
    name: 'mileage counter',
    data: [],
    dataLabels: {
        x: 0, y: 20,
        format: '{y:.0f} km',
    }
}]

如果您想通过添加另一个系列并隐藏表盘来获得额外的数据标签，可以将表盘的颜色设置为"transparent"（JSFiddle）:

series: [
// Our "hidden" series
{
    name: 'mileage counter',
    data: [0],
    dataLabels: {
        x: 0, y: 50,
        format: '{y:.0f} km',
    },
    dial: {
        backgroundColor: 'transparent'
    }
},
// ... Other series
]

还要注意y值必须足够大才能不与其他数据标签重叠。如果它重叠，它将被隐藏，因为仪表默认为allowOverlap: false。或者，您可以将其设置为true，但重叠可能不太好看。

需要注意的是，这也可以通过创建自己的div并将其放置在正确的位置来解决，或者复制第一个系列中的数据标签并稍微移动它。

相关文章：