Highcharts Synchronisierte Diagramme zeigen Tooltip

Question

Ich möchte Tooltip in synchronisierten Diagrammen anzeigen. Bitte beachten Sie dieser 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 
     } 
    } 
    }); 

Der Tooltip nur die erste Reihe anzeigen kann, aber keine zweite Serie, auch Maus, um die zweite Serie schweben.

Bitte Beratung.

Answer 1

Zuerst muss die Tooltip-Option shared auf true gesetzt werden. Dann müssen Sie die mousemove touchmove touchstart -Eventhandler aktualisieren mit mehreren Serien beschäftigen/-punkte

$('#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/ für Ihre aktualisierte Geige See. Ich habe gnädig den Code in diesem Beitrag http://forum.highcharts.com/highcharts-usage/synchronize-chart-with-shared-tooltip-t33919/ genommen.

Answer 2

Ich habe mehr flexible Lösung basierend auf Martin Schneider Antwort geschrieben.

In meinen Container 3 Charts, hat zuerst 2 Serien, zweite 6 Serie und dritte 3 Serie, Teil der Serie nicht standardmäßig sichtbar, Teil mit deaktivierten Maus Ereignisbehandlung.

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