Highcharts-redraw () 대 새로운 Highcharts.chart


78

하이 차트 차트를 업데이트하는 올바른 방법을 이해하는 데 어려움을 겪고 있습니다. 차트를 렌더링 한 다음 어떤 방식 으로든 업데이트하고 싶다고 가정합니다. 예를 들어, 데이터 시리즈의 값을 변경하거나 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();

});​

http://jsfiddle.net/sUXsu/18/

[편집하다]:

이 질문의 향후 시청자에게는 dataLabels를 숨기고 표시하는 방법이 없다는 점에 주목할 가치가 있습니다. 다음은이를 수행하는 방법을 보여줍니다. http://jsfiddle.net/supertrue/tCF8Y/


4
표시 / 숨기기 dataLabels 예제에 대한 링크는 HighCharts 소스 URL을 업데이트해야하고 (404ing) jQuery를 업데이트해야했습니다. jsfiddle.net/supertrue/tCF8Y
supertrue

답변:


81

chart.series[0].setData(data,true);

setData방법 자체는 다시 그리기 메소드를 호출


1
그는 마우스 오버 툴팁 쇼에, 이전 데이터를 툴팁을 업데이트하지
Saurabh 신하

그것은 여러 시리즈 업데이트 시간의 13 ~ 15 약 초 정도 걸립니다
Aatif Bandey

1
추가 정보를 원하시면 : api.highcharts.com/class-reference/...
응웬 트란

HighMaps에서도 작동합니다-Angular this.map.series [0] .setData (changes.options.currentValue.series [0] .data, true)를 사용하는 예제 코드
danday74

12

다시 그리기를 호출하기 전에 set 을 호출 하고 차트 개체 함수를 추가해야 합니다.

chart.xAxis[0].setCategories([2,4,5,6,7], false);

chart.addSeries({
    name: "acx",
    data: [4,5,6,7,8]
}, false);

chart.redraw();

그것은 나를 위해 작동합니다 .. !! 단일 페이지에 많은 데이터가있는 많은 차트로 작업 할 때 차트를 업데이트하는 더 좋은 방법입니다. 모든 시리즈에 대해 다시 그리기를 호출하면 브라우저가 중단 될 수 있습니다.
Ritesh

실시간 응용 프로그램에서 작업 중이며 하이 맵을 업데이트하고 싶지만 업데이트 빈도가 증가하면 브라우저가 충돌합니다.
Dipak Telangre

10
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();)

http://jsfiddle.net/NxEnH/8/


0

@RobinL 이전 주석에서 언급했듯이 chart.series [n] .setData ()를 사용할 수 있습니다. 먼저 차트 변수에 차트 인스턴스를 할당했는지 확인해야합니다. 이렇게하면 차트에 액세스하고 조작하는 데 필요한 모든 속성과 메서드가 채택됩니다.

또한 차트의 자동 렌더링을 방지하기 위해 setData ()의 두 번째 매개 변수를 사용하고 false로 설정했습니다. 여러 데이터 시리즈가 있기 때문에 render = false를 사용하여 각각을 업데이트 한 다음 chart.redraw ()를 실행합니다. 이로 인해 성능이 배가되었습니다 (데이터 포인트가 10,000-100,000 개이고 50 밀리 초마다 데이터 세트를 새로 고칩니다).

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.