[javascript] chart.js는 완전히 새로운 데이터를로드합니다.

Program / 글쓴이

에 대한 API를chart.js 사용하면로드 된 데이터 세트의 포인트를 수정할 수 있습니다. 예를 들면 다음과 같습니다.

.update( )

Chart 인스턴스에서 update ()를 호출하면 업데이트 된 값으로 차트를 다시 렌더링하여 여러 기존 포인트의 값을 편집 한 다음 애니메이션 렌더링 루프 하나로 렌더링 할 수 있습니다.

.addData( valuesArray, label )

Chart 인스턴스에서 addData (valuesArray, label)를 호출하여 각 데이터 세트에 대한 값 배열과 해당 포인트에 대한 레이블을 전달합니다.

.removeData( )

Chart 인스턴스에서 removeData ()를 호출하면 차트의 모든 데이터 세트에 대한 첫 번째 값이 제거됩니다.

이 모든 것이 훌륭하지만 완전히 새로운 데이터 세트를로드하여 이전 데이터를 지우는 방법을 알 수 없습니다. 문서는 이것을 다루지 않는 것 같습니다.

답변

나는 이것에 큰 문제가 있었다

먼저 시도한 .clear()다음 .destroy()차트 참조를 null로 설정하려고 시도했습니다.

마지막으로 문제를 해결 <canvas>한 이유 : 요소를 삭제 한 다음 <canvas>부모 컨테이너에 새 항목 다시 추가

이를 수행하는 방법은 백만 가지가 있습니다.

var resetCanvas = function () {
  $('#results-graph').remove(); // this is my <canvas> element
  $('#graph-container').append('<canvas id="results-graph"><canvas>');
  canvas = document.querySelector('#results-graph'); // why use jQuery?
  ctx = canvas.getContext('2d');
  ctx.canvas.width = $('#graph').width(); // resize to parent width
  ctx.canvas.height = $('#graph').height(); // resize to parent height

  var x = canvas.width/2;
  var y = canvas.height/2;
  ctx.font = '10pt Verdana';
  ctx.textAlign = 'center';
  ctx.fillText('This text is centered on the canvas', x, y);
};

답변

다음을 파괴해야합니다.

myLineChart.destroy();

그런 다음 차트를 다시 초기화합니다.

var ctx = document.getElementById("myChartLine").getContext("2d");
myLineChart = new Chart(ctx).Line(data, options);

답변

Chart.js V2.0을 사용하면 다음을 수행 할 수 있습니다.

websiteChart.config.data = some_new_data;
websiteChart.update();

답변

오래된 스레드이지만 현재 버전 (2017 년 2 월 1 일 기준)에서는 chart.js에 표시된 데이터 세트를 쉽게 교체 할 수 있습니다.

새 x 축 값이 배열 x에 있고 y 축 값이 배열 y에 있다고 가정하면 아래 코드를 사용하여 차트를 업데이트 할 수 있습니다.

var x = [1,2,3];
var y = [1,1,1];

chart.data.datasets[0].data = y;
chart.data.labels = x;

chart.update();

답변

ChartJS 2.6은 데이터 참조 대체를 지원합니다 ( update (config) 문서의 Note 참조 ). 따라서 Chart가 있으면 기본적으로 다음과 같이 할 수 있습니다.

myChart.data.labels = ['1am', '2am', '3am', '4am'];
myChart.data.datasets[0].data = [0, 12, 35, 36];
myChart.update();

포인트를 추가 할 때 얻을 수있는 애니메이션을 수행하지 않지만 그래프의 기존 포인트는 애니메이션으로 표시됩니다.

답변

이것에 대한 나의 해결책은 매우 간단합니다. (버전 1.X)

getDataSet:function(valuesArr1,valuesArr2){
        var dataset = [];
        var arr1 = {
            label: " (myvalues1)",
            fillColor: "rgba(0, 138, 212,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(0, 138, 212,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: valuesArr1
        };
        var arr2 = {
            label: " (myvalues2)",
            fillColor: "rgba(255, 174, 087,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(255, 174, 087,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: valuesArr2
        };
        /*Example conditions*/
        if(condition 1)
          dataset.push(arr1);
        }
        if(condition 2){
          dataset.push(arr1);
          dataset.push(arr2);
        }

        return dataset;
    }

var data = {
    labels: mylabelone,
    datasets: getDataSet()
};
if(myBarChart != null) // i initialize myBarChart var with null
    myBarChart.destroy(); // if not null call destroy
    myBarChart = new Chart(ctxmini).Bar(data, options);//render it again ...

깜박임이나 문제가 없습니다. getDataSet제시해야 할 데이터 세트를 제어하는 ​​기능입니다.

답변

여기에 대답 했습니다. 호버 이벤트가 트리거되지 않도록 캔버스에서 차트를 지우는 방법을 참조하십시오 .

그러나 여기에 해결책이 있습니다.

var myPieChart=null;

function drawChart(objChart,data){
    if(myPieChart!=null){
        myPieChart.destroy();
    }
    // Get the context of the canvas element we want to select
    var ctx = objChart.getContext("2d");
    myPieChart = new Chart(ctx).Pie(data, {animateScale: true});
}