하이 차트 선 그래프 업데이트 문제

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

내가이 있지만 작동 방법을 모른다, 모두 초기화 기능을 분리해야합니다.

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