Javascript ChartJSチャートとキャンバスを永続的に更新する

Question

chartJSでチャートを作成しましたが、同じキャンバスを使用してドロップダウンリストからユーザが選択したものに基づいて新しいデータを使用して更新したいと思います。問題は、私が更新機能を行うとき、チャートが新しいデータで更新されますが、それはしばらくして元のチャートに戻ります。どうすればこの問題を解決できますか？ここでは、コードだ、任意の助けをありがとう：

/* Original Chart */ 
var ctx3 = document.getElementById("canvas3").getContext("2d"); 

var canvas3 = new Chart(ctx3, { 
    type: 'line', 
    data: { 
     labels: stationRentalsLabels, 
     datasets: [{ 
      label: 'Wypożyczenia', 
      fillColor: "rgba(220,280,220,0.5)", 
      strokeColor: "rgba(220,220,220,1)", 
      backgroundColor: "rgba(153,255,51,0.4)", 
      data: stationRentalsData 
     }] 
    } 
}); 

/* event listener on drop-down list, when triggered, update chart */ 
select.addEventListener('change', function() { 
    updateChart() 
}); 

/* Update Chart */ 
function updateChart() { 
    var stationRentalsHoursTemp = []; 
    var stationRentalName = []; 

    var determineHour = selectNumber.options[selectNumber.selectedIndex].innerHTML; 
    for (var i = 0; i < stationRentalsHours.length; i++) { 
     if (determineHour == stationRentalsHours[i]) { 
      stationRentalsHoursTemp.push(stationRentalsData[i]) 
      stationRentalName.push(stationRentalsLabels[i]); 
     } 
    } 

    /* Updated Chart */ 
    var ctx3 = document.getElementById("canvas3").getContext("2d"); 
    var canvas3 = new Chart(ctx3, { 
     type: 'line', 
     data: { 
      labels: stationRentalName, 
      datasets: [{ 
       label: 'Wypożyczenia', 
       fillColor: "rgba(220,280,220,0.5)", 
       strokeColor: "rgba(220,220,220,1)", 
       backgroundColor: "rgba(153,255,51,0.4)", 
       data: stationRentalsHoursTemp 
      }] 
     } 
    }); 
} 

Answer 1

あなたは、チャートの前のインスタンスを破壊する必要があることを行うには前と同じdiv要素内の更新機能に新しいグラフを作成したがためにされて呼び出すことにより、 updateChart関数を呼び出す前に関数を破棄してください。

canvas3.destroy();

あなたの問題を解決するための別のアプローチは、updateChart機能が

function updateChart() { 
    var stationRentalsHoursTemp = []; 
    var stationRentalName = []; 

    var determineHour = selectNumber.options[selectNumber.selectedIndex].innerHTML; 
    for (var i = 0; i < stationRentalsHours.length; i++) { 
     if (determineHour == stationRentalsHours[i]) { 
      stationRentalsHoursTemp.push(stationRentalsData[i]) 
      stationRentalName.push(stationRentalsLabels[i]); 
     } 
    } 
    // just update the label and dataset not the entire chart 
    canvas3.data.labels = stationRentalName; 
    canvas3.data.datasets[0].data = stationRentalsHoursTemp; 
    canvas3.update(); 

} 

（新しいグラフを初期化しない）更新機能を呼び出すことによって呼び出され、チャート自体がデータを交換しないことです