하이 차트 차트를 업데이트하는 올바른 방법을 이해하는 데 어려움을 겪고 있습니다. 차트를 렌더링 한 다음 어떤 방식 으로든 업데이트하고 싶다고 가정합니다. 예를 들어, 데이터 시리즈의 값을 변경하거나 dataLabels를 활성화 할 수 있습니다.
현재이 작업을 수행하는 방법을 알아낼 수있는 유일한 방법은 차트 옵션을 변경하고 new Highcharts.chart하이 차트 에 다시 그리도록 지시하는 것입니다.
그러나 이것이 과잉 일 수 있고 처음부터 시작하지 않고도 차트 ‘현장’을 변경할 수 있는지 궁금합니다 new Highcharts.chart. 나는이 알 redraw()방법은,하지만 난 그것을 얻이 수없는 것.
어떤 도움이라도 대단히 감사합니다.
감사,
남자 이름
샘플 코드는 다음과 같으며 하단에는 jsFiddle이 있습니다.
$(document).ready(function() {
chartOptions = {
chart: {
renderTo: 'container',
type: 'area',
},
series: [{
data: [1,2,3]
}]
};
chart1 = new Highcharts.Chart(chartOptions);
chartOptions.series[0].data= [10,5,2];
chart1 = new Highcharts.Chart(chartOptions);
//The following seems to have no effect
chart1.series[0].data = [2,4,4];
chart1.redraw();
});
[편집하다]:
이 질문의 향후 시청자에게는 dataLabels를 숨기고 표시하는 방법이 없다는 점에 주목할 가치가 있습니다. 다음은이를 수행하는 방법을 보여줍니다. http://jsfiddle.net/supertrue/tCF8Y/
답변
chart.series[0].setData(data,true);
setData방법 자체는 다시 그리기 메소드를 호출
답변
다시 그리기를 호출하기 전에 set 을 호출 하고 차트 개체 에 함수를 추가해야 합니다.
chart.xAxis[0].setCategories([2,4,5,6,7], false);
chart.addSeries({
name: "acx",
data: [4,5,6,7,8]
}, false);
chart.redraw();
답변
var newData = [1,2,3,4,5,6,7];
var chart = $('#chartjs').highcharts();
chart.series[0].setData(newData, true);
설명 :
변수 에 차트 newData에서 업데이트 하려는 값이 있습니다 . 변수 chart는 차트의 개체입니다. setData데이터를 업데이트하기 위해 highchart에서 제공하는 방법입니다.
메소드 setData에는 두 개의 매개 변수가 포함되어 있습니다. 첫 번째 매개 변수에는 새 값을 배열로 전달해야하고 두 번째 매개 변수는 부울 값입니다. 만약 true다음 차트 업데이트 자체와 경우에 false우리가 사용하는이 다음 redraw()업데이트 차트 방법 (즉 chart.redraw();)
답변
@RobinL 이전 주석에서 언급했듯이 chart.series [n] .setData ()를 사용할 수 있습니다. 먼저 차트 변수에 차트 인스턴스를 할당했는지 확인해야합니다. 이렇게하면 차트에 액세스하고 조작하는 데 필요한 모든 속성과 메서드가 채택됩니다.
또한 차트의 자동 렌더링을 방지하기 위해 setData ()의 두 번째 매개 변수를 사용하고 false로 설정했습니다. 여러 데이터 시리즈가 있기 때문에 render = false를 사용하여 각각을 업데이트 한 다음 chart.redraw ()를 실행합니다. 이로 인해 성능이 배가되었습니다 (데이터 포인트가 10,000-100,000 개이고 50 밀리 초마다 데이터 세트를 새로 고칩니다).
답변
