Javascript 如何在highcharts.js中放置标签工具提示
就像在图表上的各个点上有工具提示一样,例如在折线图中,我希望在悬停在标签上时也有一些工具提示。最简单的方法是什么?到目前为止,我找到了两种选择。第一种是外部的,叫做工具提示。另一个是使用自定义事件highcharts插件。第三个是highcharts自带的,我认为这是正确的方法。请参考下面的示例-通过向元素添加mouseover和mouseout事件,您可以调用内置highcharts工具提示:Javascript 如何在highcharts.js中放置标签工具提示,javascript,highcharts,label,tooltip,axis-labels,Javascript,Highcharts,Label,Tooltip,Axis Labels,就像在图表上的各个点上有工具提示一样,例如在折线图中,我希望在悬停在标签上时也有一些工具提示。最简单的方法是什么?到目前为止,我找到了两种选择。第一种是外部的,叫做工具提示。另一个是使用自定义事件highcharts插件。第三个是highcharts自带的,我认为这是正确的方法。请参考下面的示例-通过向元素添加mouseover和mouseout事件,您可以调用内置highcharts工具提示: chart: { ..., events: { load: function() {
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'
}
}
现场演示:
API参考资料:我实际上不理解你小提琴中的逻辑……你可以写更多细节吗?在你的小提琴上,工具提示总是显示自定义工具提示。嗨@Vladimir Despotovic,我使用刷新方法显示工具提示,并使用移动方法将其放置在标签附近。内部字符串在tooltip.formatter中定义-这只是一个示例,您可以根据需要对其进行格式化。您可以在getLabelConfig函数中添加所需的值,例如:您需要编辑formatter函数的第一部分,例如:我使用了默认的格式化程序。