就像图表上的各个点有工具提示一样,例如在折线图中,我希望在将鼠标悬停在标签上时也有一些工具提示。最简单的方法是什么?
请参考以下示例 - 通过向元素添加
mouseover
和 mouseout
事件,您可以调用内置的 Highcharts 工具提示:
chart: {
...,
events: {
load: function() {
var chart = this,
xAxis = chart.xAxis[0],
halfTooltipWidth,
posX,
posY;
for (var key in xAxis.ticks) {
(function(label) {
label
.on('mouseover', function(e) {
chart.tooltip.refresh({
series: chart.series[0],
getLabelConfig: function() {}
});
halfTooltipWidth = chart.tooltip.label.width / 2;
posX = label.xy.x - halfTooltipWidth;
posY = label.xy.y;
chart.tooltip.move(posX, posY, posX + halfTooltipWidth, posY - 10);
})
.on('mouseout', function(e) {
chart.tooltip.hide();
});
})(xAxis.ticks[key].label)
}
}
}
},
tooltip: {
headerFormat: '',
formatter: function() {
if (this.y) {
return 'Point'
}
return 'Custom tooltip'
}
}
现场演示:http://jsfiddle.net/BlackLabel/2jr0xdcw/
API 参考: https://api.highcharts.com/class-reference/Highcharts.Tooltip
到目前为止我找到了两个选择。首先是外部的,它被称为工具提示。另一种是使用自定义事件 highcharts 插件。第二个是 highcharts 原生的,我认为这是正确的方法。