Highcharts：同步图表在数据更新后不再同步

我目前正在使用两个同步图表工作，这些图表使用http://www.highcharts.com/demo/synchronized-charts（具体来说，syncExtremes()函数）提供的示例演示。Highcharts：同步图表在数据更新后不再同步

用户将能够使用日期选择器从不同的数据集中进行选择。当他们这样做时，我用已更新数据和属性的新版本替换现有图表。这是为了避免现有数据和新数据之间的冲突。

当我第一次加载图表时，他们完全同步。但是，每当我更新数据并更换图表时，它们就会失去同步。我很困惑，为什么会发生这种情况，因为我使用与首次加载页面时完全相同的方式创建它们（请参阅下面的代码段）。

// draw on page load 
var drawChart1 = new Highcharts.Chart(chart1); 
var drawChart2 = new Highcharts.Chart(chart2); 

var newData = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]; 

// draw on button click 
$('#button').click(function() { 
    chart1.series[0].data = newData.reverse(); 
    chart2.series[0].data = newData.reverse(); 
    drawChart1 = new Highcharts.Chart(chart1); 
    drawChart2 = new Highcharts.Chart(chart2); 
});

这是一个工作小提琴，其格式类似于我的项目。底部的按钮更改数据并重新创建图表：https://jsfiddle.net/brightmatrix/yqapp3f0/。

为什么syncExtremes()在重新创建图表时失败？

我意识到一个更有效的方法可能是使用setData()，但我想知道在我重写我的代码之前是否有我在当前方法中丢失的东西。

预先感谢您的指导和建议！

来源

2016-07-07 Mike Zavarello

同步的部分在循环中完成，你可以看到它的工作原理与Highcharts.charts阵列

for (i = 0; i < Highcharts.charts.length; i = i + 1) {

当您创建它推到阵列的图，当你破坏它的图表元素在数组中变得不确定。因此，当您创建新图表时，阵列变为：

[undefined, undefined, x.Chart, x.Chart]

而这就是为什么同步无法工作的原因。

您可以更改循环的逻辑，或者可以在销毁图表后删除数组的第一个元素。例子：https://jsfiddle.net/ezae8kvk/1/

在这种情况下做到这一点的最好办法将使用方法改变图表动态调用setData一样或series.update的某些部分 - 你不必从头开始建立一个新的图表。

来源

2016-07-07 09:42:06 morganfree

啊！这是一个极好的解决方案，**正好**解决了我的问题。非常感谢您的回复。是的，在将来，我同意'setData（）'或'series.update（）'是更好的方法。 –

Highcharts：同步图表在数据更新后不再同步

回答

相关问题