Highcharts 同步图表显示工具提示

Question

我想在同步图表中显示工具提示。请参见此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
      }
    }
  });

工具提示只能显示第一个系列，不能显示第二个系列，即使鼠标悬停在第二个系列上。

请给予建议。

- Tester

Answer 1

首先，您需要将工具提示选项shared设置为true。然后，您需要更新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
              }
          }
      }
});

请参见更新后的代码片段： http://jsfiddle.net/doc_snyder/51zdn0jz/6/。我已经在这篇文章中提供的链接http://forum.highcharts.com/highcharts-usage/synchronize-chart-with-shared-tooltip-t33919/中，慷慨地提取了相关的代码。

- Martin Schneider

Answer 2

我已经根据Martin Schneider的答案编写了更灵活的解决方案。

在我的容器中有3个图表，第一个有2个系列，第二个有6个系列，第三个有3个系列，一部分系列默认不可见，一部分禁用了鼠标事件处理。

$('#charts-container').on('mousemove touchmove touchstart', shared_tooltip_handler);

shared_tooltip_handler = function (e) {
    var chart, point, i, event;

    var charts = $(this).children('div');

    for (i = 0; i < charts.length; i = i + 1) {
        chart = $(charts[i]).highcharts();
        if (!chart) continue;
        // Find coordinates within the chart
        event = chart.pointer.normalize(e.originalEvent); 

        var points = [];
        for (j = 0; j < chart.series.length; j = j + 1) {
            serie = chart.series[j];
            if (!serie.visible || serie.enableMouseTracking === false) continue;

            point = serie.searchPoint(event, true);
            // Get the hovered point
            if (point) points.push(point); 
        }

        if (points.length) {
            if (chart.tooltip.shared) {
                chart.tooltip.refresh(points);
            } else {
                chart.tooltip.refresh(points[0]);
            }
            chart.xAxis[0].drawCrosshair(e, points[0]);
        }
    }
};

- Aleksandr K.

---

我认为有些东西丢失了，因为这会引起“未捕获的引用错误：App未定义”。 - Sven R.

@SvenReuter，我定义了一个名为App的对象，该对象具有属性helpers。这是不将所有内容放置在全局命名空间中的方法。要使其工作，请使用shared_tooltip_handler替换App.helpers.shared_tooltip_handler。 - Aleksandr K.

也许你想调整你的代码，使其在没有上下文的情况下可用。我认为这对于访问者来说会更有帮助。 - Sven R.

当您有多个系列需要突出显示时，这非常有效。谢谢！ - Dave K

太棒了！如果可以的话，我想给它投10+票。非常感谢 :-) - user3482773