使用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事件绑定到两个图表上，以实现实时显示更新的共享工具提示。