使用Highcharts的事件函数和共享工具提示来实现
代码示例:
// 设置共享工具提示 Highcharts.setOptions({ tooltip: { shared: true } });
// 图表1 var chart1 = Highcharts.chart('container1', { ... series: [{...}, {...}], chart: { events: { // 定义事件函数 redraw: function() { // 如果存在图表2并且图表2的工具提示已经显示,就隐藏它 if (chart2 && chart2.tooltip && chart2.tooltip.label) { chart2.tooltip.label.hide(); } } } } });
// 图表2 var chart2 = Highcharts.chart('container2', { ... series: [{...}, {...}], chart: { // 定义事件函数 events: { redraw: function() { // 如果存在图表1并且图表1的工具提示已经显示就隐藏它 if (chart1 && chart1.tooltip && chart1.tooltip.label) { chart1.tooltip.label.hide(); } } } } });
// 在两个图表之间定义一个变量 var sameTooltip;
// 图表1和2的tooltip选项必须相同 sameTooltip = chart1.tooltip;
// 图表1和2在该事件中都启用共享工具提示 var triggerTooltip = function(event, point) { var point1 = chart1.series[0].searchPoint(point, true), point2 = chart2.series[0].searchPoint(point, true);
if (point1 && point2) {
point1.onMouseOver();
point2.onMouseOver();
chart1.tooltip.refresh([point1, point2]);
chart2.tooltip.refresh([point1, point2]);
}
}
// 图表1和2都绑定mousemove事件,以此来执行triggerTooltip() Highcharts.addEvent(chart1.container, 'mousemove', function(e) { var point = chart1.series[0].searchPoint(e, true); triggerTooltip(e, point); });
Highcharts.addEvent(chart2.container, 'mousemove', function(e) { var point = chart2.series[0].searchPoint(e, true); triggerTooltip(e, point); });
这段代码中,我们使用了Highcharts的事件函数和共享工具提示来实现同步工具提示。我们在两个图表之间定义了一个变量,然后在triggerTooltip()函数中实现了共享工具提示的功能,该功能使图表中的点在鼠标悬停时同时显示。最后,我们将mousemove事件绑定到两个图表上,以实现实时显示更新的共享工具提示。
上一篇:不同图遍历方法的区别