chart.js의 데이터 오버 문제

Question

하나의 막대/원형 차트에서 여러 섹션에 동일한 유형의 데이터를로드 할 필요가 없습니다. 로드시 관련 데이터가 표시되지만 이후 섹션의 데이터가로드되면 관련 데이터가 표시되거나 이전 섹션 데이터가 표시됩니다.

데모 링크 : http://coderstutor.com/ChartProb/

codepenLink : https://codepen.io/tumulalmamun/pen/eeVmVX

var chartList = [5,6]; 

    function chart(){ 
    var ctx = document.getElementById("myChart").getContext('2d'); 
     var myChart = new Chart(ctx, { 
      type: 'bar', 
      data: { 
       labels: ["Red", "Blue"], 
       datasets: [{ 
        label: '# of Votes', 
        data: chartList, 
        backgroundColor: [ 
         'rgba(255, 99, 132, 0.2)', 
         'rgba(54, 162, 235, 0.2)', 
        ], 
        borderColor: [ 
         'rgba(255,99,132,1)', 
         'rgba(54, 162, 235, 1)', 
        ], 
        borderWidth: 1 
       }] 
      }, 
      options: { 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero:true 
         } 
        }] 
       } 
      } 
     }); 

    } 

    chart(); 

    function addData(){ 
      var i = 4; 
      var o = 8; 

      chartList = []; 
       chartList.push(i); 
       chartList.push(o); 
       chart(); 


     } 

     </script> 
</body> 

Answer 1

당신이 그것을 업데이트 할 때마다, 당신은 그 위에 새 차트를 만드는 종류의 같은거야. 당신이해야 할 일은 그것을 업데이트하기 전에 차트를 파괴하는 것입니다.

var chartList = [5,6]; 
var myChart; 

    function chart(){ 
    var ctx = document.getElementById("myChart").getContext('2d'); 
    if (myChart != undefined && typeof myChart == 'object' && typeof myChart.destroy == 'function') myChart.destroy()  
    myChart = new Chart(ctx, { 
      type: 'bar', 
      data: { 
       labels: ["Red", "Blue"], 
       datasets: [{ 
        label: '# of Votes', 
        data: chartList, 
        backgroundColor: [ 
         'rgba(255, 99, 132, 0.2)', 
         'rgba(54, 162, 235, 0.2)', 
        ], 
        borderColor: [ 
         'rgba(255,99,132,1)', 
         'rgba(54, 162, 235, 1)', 
        ], 
        borderWidth: 1 
       }] 
      }, 
      options: { 
       scales: { 
        yAxes: [{ 
         ticks: { 
          beginAtZero:true 
         } 
        }] 
       } 
      } 
     }); 

    } 

    chart(); 

    function addData(){ 
      var i = 4; 
      var o = 8; 

      chartList = []; 
       chartList.push(i); 
       chartList.push(o); 
       chart(); 


     }