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：同步圖表在數據更新後不再同步

回答

相關問題