同步多个图表的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 
    }, 
    ... 
} 

这里有3个图表一的jsfiddle例如：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(); 
     } 
    } 
    } 
}