不同图表中的同步工具提示
创始人
2025-01-09 19:34:31
0

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

相关内容

热门资讯

AWSECS:访问外部网络时出... 如果您在AWS ECS中部署了应用程序,并且该应用程序需要访问外部网络,但是无法正常访问,可能是因为...
AWSElasticBeans... 在Dockerfile中手动配置nginx反向代理。例如,在Dockerfile中添加以下代码:FR...
AWR报告解读 WORKLOAD REPOSITORY PDB report (PDB snapshots) AW...
AWS管理控制台菜单和权限 要在AWS管理控制台中创建菜单和权限,您可以使用AWS Identity and Access Ma...
北信源内网安全管理卸载 北信源内网安全管理是一款网络安全管理软件,主要用于保护内网安全。在日常使用过程中,卸载该软件是一种常...
​ToDesk 远程工具安装及... 目录 前言 ToDesk 优势 ToDesk 下载安装 ToDesk 功能展示 文件传输 设备链接 ...
Azure构建流程(Power... 这可能是由于配置错误导致的问题。请检查构建流程任务中的“发布构建制品”步骤,确保正确配置了“Arti...
群晖外网访问终极解决方法:IP... 写在前面的话 受够了群晖的quickconnet的小水管了,急需一个新的解决方法&#x...
AWSECS:哪种网络模式具有... 使用AWS ECS中的awsvpc网络模式来获得最佳性能。awsvpc网络模式允许ECS任务直接在V...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...