Highcharts 同步图表显示工具提示

2024-04-04

我想在同步图表中显示工具提示。请看这个Jsfiddle http://jsfiddle.net/51zdn0jz/5/

 $('#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
      }
    }
  });

工具提示只能显示第一个系列,而不能显示第二个系列,甚至鼠标悬停第二个系列也是如此。

请指教。


首先你必须设置tooltip-Optionshared为真。然后你必须更新mousemove touchmove touchstart- 处理多个系列/点的事件处理程序

$('#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
              }
          }
      }
});

See http://jsfiddle.net/doc_snyder/51zdn0jz/6/ http://jsfiddle.net/doc_snyder/51zdn0jz/6/为您更新的小提琴。我慷慨地接受了这篇文章中链接的代码http://forum.highcharts.com/highcharts-usage/synchronize-chart-with-shared-tooltip-t33919/ http://forum.highcharts.com/highcharts-usage/synchronize-chart-with-shared-tooltip-t33919/.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Highcharts 同步图表显示工具提示 的相关文章