ハイチャートの線グラフ更新の問題

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変数を使用しています。ハイチャートは、この変数を参照として使用します（ライブラリはこの配列をコピーしません）。ソリューション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

私は、init関数の両方を分離する必要があり、それがどのように動作するか知っているがありません。

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