Синхронизировать ось x с кратной диаграммой

Question

В Angular Highcharts я хотел сделать синхронизированную ось X в нескольких диаграммах на приборной панели. Я нашел решение для синхронизации по оси x для двух диаграмм (вставлено ниже). Но я застрял в синхронизации нескольких диаграмм. У меня на диаграмме 8 диаграмм. Я хочу синхронизировать их все.

Существующий код для двух карт в 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(); 
     } 
    } 
}; 

Как мы могли бы сделать это в несколько графиков?

Answer 1

Вы можете синхронизировать всплывающие подсказки и масштаба для любого количества карт внутри содержащего элемент, который имеет id="container":

<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> 

со следующими функциями JS:

/** 
* 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' 
      }); 
     } 
     } 
    }); 
    } 
} 

(получены из http://www.highcharts.com/demo/synchronized-charts)

Затем просто установите syncExtremes функция в обратном вызове setExtremes.

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

Вот jsfiddle пример 3 диаграммы: http://jsfiddle.net/nLguvp7m/4/

Answer 2

Измените свою функцию немного, чтобы она могла обрабатывать массив конфигураций диаграммы и прокручивать ее, вызывая setExtremes(). onZoomHandler должен быть установлен во всех диаграммах - поэтому все диаграммы могут вызвать масштабирование в других диаграммах.

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