Development Tip

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

yourdevel 2020. 10. 19. 12:53
반응형

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


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


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에서 제공하는 방법입니다.

Method setData contains two parameters, in first parameter we need to pass new value as array and second param is Boolean value. If true then chart updates itself and if false then we have to use redraw() method to update chart (i.e chart.redraw();)

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


@RobinL as mentioned in previous comments, you can use chart.series[n].setData(). First you need to make sure you’ve assigned a chart instance to the chart variable, that way it adopts all the properties and methods you need to access and manipulate the chart.

I’ve also used the second parameter of setData() and had it false, to prevent automatic rendering of the chart. This was because I have multiple data series, so I’ll rather update each of them, with render=false, and then running chart.redraw(). This multiplied performance (I’m having 10,000-100,000 data points and refreshing the data set every 50 milliseconds).

참고URL : https://stackoverflow.com/questions/14100011/highcharts-redraw-vs-new-highcharts-chart

반응형