Highcharts车速表,dataLabel里程计数器

时间:2015-03-22 09:33:12

标签: javascript highcharts gauge meter

Highcharts中的Speedometer有几个例子。

有没有办法,只显示额外的 dataLabel ,而无需拨打量表? 它可以显示行程记录仪,里程计数器或日间计数器。

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

http://jsfiddle.net/uqa0t3xw

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

1 个答案:

答案 0 :(得分: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并将其放置在正确的位置或者从第一个系列中复制数据标签并稍微移动来解决。