Płaszczyzna wykresu pokazująca poprzedni wykres przy zmianie typu wykresu

Question

Natknąłem się na wyjątkowe zdarzenie, w którym, gdy użytkownik wybierze z menu rozwijanego, a wykres zmieni się, jeśli skanujesz po płótnie, poprzedni pojawi się jako duch w tle. Wiem, że możesz użyć czegoś takiego jak graph.destroy(), ale nie jestem pewien, czy to jest właściwe i gdzie je umieścić. Kod

gdzie zaktualizować wykresy

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(); 

Ten fiddle demonstruje problem, najedź na wykresie, aby zobaczyć "ducha".

Answer 1

Ponieważ nie niszczysz wystąpień Chart, których już nie używasz, chartjs rysuje wiele wykresów w tym samym kanwowym kontekście.

Trzeba mieć odniesienie z Chart przypadkach Państwo new się, aby móc nazwać destroy na nich przed new się jeszcze jednego.

Dodaj do tego kodu:

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(); 

A oto fiddle że demonstruje poprawkę.