Highcharts同步图表显示工具提示
测试仪
我想在同步图表中显示工具提示。请看这个Jsfiddle
$('#container').bind('mousemove touchmove touchstart', function(e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
point = chart.series[0].searchPoint(event, true); // Get the hovered point
if (point) {
point.onMouseOver(); // Show the hover marker
chart.tooltip.refresh(point); // Show the tooltip
chart.xAxis[0].drawCrosshair(event, point); // Show the crosshair
}
}
});
工具提示只能显示第一个系列，而不能显示第二个系列，即使鼠标悬停在第二个系列上也是如此。
请指教。
马丁·施耐德（Martin Schneider）
首先，您必须将tooltip-Option设置shared为true。然后，您必须更新mousemove touchmove touchstart-Eventhandler以处理多个系列/点
$('#container').bind('mousemove touchmove touchstart', function(e) {
var chart,
points,
i,
secSeriesIndex = 1;
for (i = 0; i < Highcharts.charts.length; i++) {
chart = Highcharts.charts[i];
e = chart.pointer.normalize(e); // Find coordinates within the chart
points = [chart.series[0].searchPoint(e, true), chart.series[1].searchPoint(e, true)]; // Get the hovered point
if (points[0] && points[1]) {
if (!points[0].series.visible) {
points.shift();
secSeriesIndex = 0;
}
if (!points[secSeriesIndex].series.visible) {
points.splice(secSeriesIndex,1);
}
if (points.length) {
chart.tooltip.refresh(points); // Show the tooltip
chart.xAxis[0].drawCrosshair(e, points[0]); // Show the crosshair
}
}
}
});
有关更新的小提琴，请参见http://jsfiddle.net/doc_snyder/51zdn0jz/6/。我已亲切地接受了此帖子http://forum.highcharts.com/highcharts-usage/synchronize-chart-with-shared-tooltip-t33919/中链接的代码。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
HighCharts 同步工具提示效果其他图表
- 2
当工具提示合并多个系列的数据时，如何以编程方式显示我的图表工具提示？（同步图表）
- 3
如何隐藏图表中的Highcharts系列，但始终在工具提示中显示呢？
- 4
在Highcharts股票图表上以标签或工具提示显示最后一点的值
- 5
在Google图表加载时显示工具提示
- 6
工具提示未显示在图表中
- 7
数据图表显示
- 8
Highcharts工具提示以毫秒为单位显示工具提示日期
- 9
Highcharts 在工具提示上显示负值
- 10
如果图表为“图表外”，则工具提示不会显示值
- 11
Google图表：工具提示中的图表未显示
- 12
Highcharts（柱状图、烛台）在图表上的任何位置显示鼠标悬停工具提示，类似于线条或区域
- 13
Highcharts在具有多个系列的图表之间共享工具提示，并且共享工具提示
- 14
Highcharts水平同步图表
- 15
Javascript图表显示标签
- 16
Google图表-工具提示
- 17
当用户离开图表区域时，删除同步图表中的工具提示
- 18
图表绘图点-在OxyPlot中显示工具提示
- 19
我的JavaFX工具提示未显示在图表数据节点上
- 20
Google图表-HTML源代码显示在工具提示中
- 21
如何获得没有注释的图表中显示的工具提示
- 22
Google材料图表（散点图）未显示趋势线或工具提示
- 23
图表js工具提示如何控制显示的数据
- 24
Plotly.js，在图表容器外部显示工具提示
- 25
工具提示未显示在高图图表上
- 26
HighCharts工具提示问题
- 27
始终在Highcharts的所有列上显示工具提示
- 28
highcharts dataLabels支持RTL，并将其悬停以显示工具提示
- 29
Highcharts插件：单击时显示/隐藏工具提示
我来说两句