グラフタイプを変更するときに前のグラフを表示するChartJsキャンバス

Question

ユーザーがドロップダウンから選択し、キャンバスをスキャンするとグラフが変化するというユニークなインシデントが発生しました。私はあなたがgraph.destroy（）のようなものを使うことができると知っていますが、それが適切でどこに置くべきかわかりません。私はグラフ

このfiddle

var ctx = document.getElementById("myChart").getContext("2d"); 
    ctx.canvas.width = 600; 
    ctx.canvas.height = 200; 

    function updateChart() { 
     // ctx.canvas.destroy(); 
     var determineChart = $("#chartType").val(); 

     var params = dataMapMain[determineChart]; 
     if ([params.method] == "Pie") { 
      document.getElementById("subOption").hidden = false; 
      document.getElementById("arrowId").hidden = false; 

    var determineChart = $("#subOption").val(); 
      var params = dataMapSub[determineChart]; 
      $('#subOption').on('change', updateChart); 

      new Chart(ctx)[params.method](params.data, options, {}); 

     } 
     else { 
      document.getElementById("subOption").hidden = true; 
      document.getElementById("arrowId").hidden = true; 
      new Chart(ctx)[params.method](params.data, options, {}); 
     } 
    } 

    $('#chartType').on('change', updateChart) 
    updateChart(); 

を更新

コードは、問題を示し、 "ゴースト" を参照してチャート上にマウスを置きます。

Answer 1

Chartのインスタンスを破棄しているわけではないため、chartjsは複数のグラフを同じキャンバスコンテキストに描画しています。

Chartインスタンスの参照を持っている必要があります。newdestroyに電話をかけて、newがもう1つアップしてください。

はあなたのコードにこれを追加します。

var ctx = document.getElementById("myChart").getContext("2d"); 
    ctx.canvas.width = 600; 
    ctx.canvas.height = 200; 

var chart; // assign your chart reference to this variable 

function updateChart() { 
    var determineChart = $("#chartType").val(); 

    var params = dataMapMain[determineChart]; 
    if ([params.method] == "Pie") { 
     document.getElementById("subOption").hidden = false; 
     document.getElementById("arrowId").hidden = false; 

var determineChart = $("#subOption").val(); 
     var params = dataMapSub[determineChart]; 
     $('#subOption').on('change', updateChart); 

     chart && chart.destroy(); // destroy previous chart 
     chart = new Chart(ctx)[params.method](params.data, options, {}); 

    } 
    else { 
     document.getElementById("subOption").hidden = true; 
     document.getElementById("arrowId").hidden = true; 

     chart && chart.destroy(); // destroy previous chart 
     chart = new Chart(ctx)[params.method](params.data, options, {}); 
    } 
} 

$('#chartType').on('change', updateChart) 
updateChart(); 

そして、ここでは修正を実証fiddleです。