Highchart linegraph更新問題

Question

問題如下所示。

c2chart1和c2chart1p是相同的曲線圖並共享相同的數據。問題是c2chart1正在更新，但不是c2chart1p第二次。

$('#update').bind('click', function() { 
 
    c2updateLineGraph(2, [ 
 
    [0, 105993], 
 
    [25, 659727], 
 
    [50, 648727], 
 
    [75, 636627], 
 
    [100, 636627] 
 
    ]); 
 
    c2updateLineGraph(3, [ 
 
    [0, 115993], 
 
    [25, 659727], 
 
    [50, 648727], 
 
    [75, 336627], 
 
    [100, 236627] 
 
    ]); 
 
    setTimeout(function(){ 
 
    c2updateLineGraph(2, [ 
 
    [0, 5993], 
 
    [25, 659727], 
 
    [50, 648727], 
 
    [75, 636627], 
 
    [100, 63667] 
 
    ]); 
 
    c2updateLineGraph(3, [ 
 
    [0, 125993], 
 
    [25, 259727], 
 
    [50, 648727], 
 
    [75, 536627], 
 
    [100, 236627] 
 
    ]); 
 
    }, 8000); 
 
    
 
}); 
 

 
var c2graphdata = [{ 
 
    name: 'Current year', 
 
    data: [] 
 
}, { 
 
    name: 'Reapair v1', 
 
    data: [] 
 
}, { 
 
    name: 'Repair v2', 
 
    data: [] 
 
}, { 
 
    name: 'Replacement v1', 
 
    data: [] 
 
}, { 
 
    name: 'Replacement v2', 
 
    data: [] 
 
}, { 
 
    name: 'Facelift v1', 
 
    data: [] 
 
}, { 
 
    name: 'Facelift v2', 
 
    data: [] 
 
}, { 
 
    name: 'Reconstruction v1', 
 
    data: [] 
 
}, { 
 
    name: 'Reconstruction v2', 
 
    data: [] 
 
}]; 
 

 
function c2updateLineGraph(index, data) { 
 
    c2chart1.series[index].setData(data, true); 
 
    c2chart1p.series[index].setData(data, true); 
 
} 
 

 
var c2chart1 = Highcharts.chart('container1', { 
 
    series: c2graphdata 
 
}); 
 

 
var c2chart1p = Highcharts.chart('container2', { 
 
    series: c2graphdata 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 

 
<div id="container1"></div> 
 
<div id="container2"></div> 
 
<button id="update">Update charts</button>

Answer 1

的問題是在setData()方法，使用可變data兩次。 Highcharts使用這個變量作爲參考（庫不復制這個數組）。解決方法很簡單，用data.slice()：

function c2updateLineGraph(index, data) { 
    c2chart1.series[index].setData(data.slice(), true); 
    c2chart1p.series[index].setData(data.slice(), true); 
} 

工作演示：http://jsfiddle.net/BlackLabel/hhh2zx3w/1/

Answer 2

嗯，我會根據您的代碼小提琴。

看到這一點。 :)

HighChart updated

我不知道它是如何工作的，但是，這兩個初始化函數必須分開。

function chart1Update(index, data) { 
    c2chart1.series[index].setData(data, true); 
} 
function chart1pUpdate(index, data){ 
    c2chart1p.series[index].setData(data, true); 
}