ハイチャートシンクロナイズドチャートでツールチップを表示

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 
     } 
    } 
    }); 

ツールヒントだけでもマウスが2番目の系列を置く、最初のシリーズが、ありません2番目の系列を表示することができます参照してください。

してくださいアドバイス。

Answer 1

最初に、ツールチップ - オプションsharedをtrueに設定する必要があります。そして、あなたが複数の系列に対処するためにmousemove touchmove touchstart -Eventhandlerを更新する必要が/あなたの更新フィドルを参照http://jsfiddle.net/doc_snyder/51zdn0jz/6/

$('#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://forum.highcharts.com/highcharts-usage/synchronize-chart-with-shared-tooltip-t33919/。

Answer 2

私はMartin Schneiderの答えに基づいてより柔軟な解決策を書いています。

私のコンテナ3のチャートでは、最初に2つのシリーズ、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]); 
     } 
    } 
};