Highcharts Speedometer，里程计数器的dataLabel

Question

Highcharts 中有几个关于速度计的示例。

有没有办法只显示一个额外的 dataLabel，而无需在仪表中拨盘？它可以显示行程记录器、里程计数器或天数计数器。

我尝试了额外的系列和数据标签，但无法获取运行。

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

Answer 1

如果您想通过添加另一个系列并隐藏刻度盘来获得额外的数据标签，您可以通过将刻度盘的颜色设置为 "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 并将其放置在正确的位置或者复制第一个系列的数据标签并稍微移动它来解决。

Highcharts Speedometer，里程计数器的dataLabel

Highcharts Speedometer, dataLabel for mileage counter

javascript

meter

highcharts

gauge