Synchronisieren der x-Achse mehrerer Karten

Question

In Angular Highcharts wollte ich synchronisierte X-Achse in mehreren Diagrammen im Dashboard machen. Ich habe eine Lösung für die X-Achsen-Synchronisation für zwei Diagramme (unten eingefügt) gefunden. Aber ich steckte mit Multi-Chart synchronisieren. Ich habe 8 Diagramme in meinem Dashboard. Ich möchte alle synchronisieren.

bestehenden Code für zwei Diagramme in highcharts-ng

$scope.chart1 = { 
    options: { 
     chart: { 
      events: { 
       selection: function(event) { 
        self.onZoomHandler(event, 'chart2'); 
       } 
      } 
     } 
    } 
} 

self.onZoomHandler = function(event, chartToUpdate) { 
    var chart = $scope[chartToUpdate].getHighcharts(); 
    if (event.xAxis) { 
     chart.xAxis[0].setExtremes(event.xAxis[0].min, event.xAxis[0].max); 
     if (!chart.resetZoomButton) { 
      chart.showResetZoom(); 
     } 
    } else { 
     chart.xAxis[0].setExtremes(null, null); 
     if (chart.resetZoomButton) { 
      chart.resetZoomButton = chart.resetZoomButton.destroy(); 
     } 
    } 
}; 

Wie könnten wir tun dies in mehreren Charts?

Answer 1

können Sie Tooltips synchronisieren und für eine beliebige Anzahl von Karten in einem Aufnahmeelement vergrößern, die id="container" hat:

<div id="container"> 
    <div class="row"> 
    <highchart id="chart1" config="chartConfig" class="span10"></highchart> 
    </div> 
    <div class="row"> 
    <highchart id="chart2" config="chartConfig2" class="span10"></highchart> 
    </div> 
    <div class="row"> 
    <highchart id="chart3" config="chartConfig3" class="span10"></highchart> 
    </div> 
</div> 

mit den folgenden JS-Funktionen:

/** 
* In order to synchronize tooltips and crosshairs, override the 
* built-in events with handlers defined on the parent element. 
*/ 
$('#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.highlight(e); 
    } 
    } 
}); 

/** 
* Override the reset function, we don't need to hide the tooltips and crosshairs. 
*/ 
Highcharts.Pointer.prototype.reset = function() { 
    return undefined; 
}; 

/** 
* Highlight a point by showing tooltip, setting hover state and draw crosshair 
*/ 
Highcharts.Point.prototype.highlight = function(event) { 
    this.onMouseOver(); // Show the hover marker 
    this.series.chart.tooltip.refresh(this); // Show the tooltip 
    this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair 
}; 
/** 
* Synchronize zooming through the setExtremes event handler. 
*/ 
function syncExtremes(e) { 
    var thisChart = this.chart; 

    if (e.trigger !== 'syncExtremes') { // Prevent feedback loop 
    Highcharts.each(Highcharts.charts, function(chart) { 
     if (chart !== thisChart) { 
     if (chart.xAxis[0].setExtremes) { // It is null while updating 
      chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { 
      trigger: 'syncExtremes' 
      }); 
     } 
     } 
    }); 
    } 
} 

(sourced von http://www.highcharts.com/demo/synchronized-charts)

Dann stellen Sie einfach die syncExtremes Funktion im Callback setExtremes.

$scope.chartConfig = { 
    ... 
    xAxis: { 
    events: { 
     setExtremes: syncExtremes 
    }, 
    ... 
} 

Hier ist ein jsfiddle Beispiel mit 3-Charts: http://jsfiddle.net/nLguvp7m/4/

Answer 2

Ändern Sie Ihre Funktion ein wenig, so dass sie mit einem Array von Diagrammkonfigurationen umgehen und durchlaufen kann, indem sie setExtremes() aufruft. onZoomHandler sollte in allen Diagrammen festgelegt werden - so können alle Diagramme in den anderen Diagrammen zoomen.

$scope.chartConfig = { 
    chart: { 
    zoomType: 'x', 
    events: { 
    selection: function (e) { 
     e.preventDefault(); 
     self.onZoomHandler(e, ['chartConfig', 'chartConfig2', 'chartConfig3']) 
    } 
    } 
}, 

self.onZoomHandler = function (event, chartsToUpdate) { 
    chartsToUpdate.forEach(config => { 
    zoomHandler($scope[config].getChartObj()); 
    }); 

    function zoomHandler(chart) {  
    if (event.xAxis) { 
     chart.xAxis[0].setExtremes(event.xAxis[0].min, event.xAxis[0].max); 
     if (!chart.resetZoomButton) { 
     chart.showResetZoom(); 
     } 
    } else { 
     chart.xAxis[0].setExtremes(null, null); 
     if (chart.resetZoomButton) { 
     chart.resetZoomButton = chart.resetZoomButton.destroy(); 
     } 
    } 
    } 
}