chart.jsのデータオーバーに関する問題

Question

1つのバー/円グラフで異なるセクションに同じ種類のデータを読み込む必要はありません。読み込み時に関連するデータが表示されますが、その後に次のセクションのデータがロードされると、読み込まれて無関係のデータが表示されるか、前のセクションのデータが表示されます。

デモへのリンク：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(); 


     }