Картинка ChartJs, показывающая предыдущий график при изменении типов графа

Question

Я столкнулся с уникальным инцидентом, когда пользователь выбирает из раскрывающегося списка, и график изменяется, если вы просматриваете холст, предыдущий будет отображаться как призрак в фоновом режиме. Я знаю, что вы можете использовать что-то вроде graph.destroy(), но я не уверен, что это подходит и куда его поместить.

код, где я обновлю графики

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

Этот fiddle демонстрирует проблему, наведите курсор мыши на график, чтобы увидеть "призрак".

Answer 1

Поскольку вы не уничтожаете экземпляры Chart, которые вы больше не используете, chartjs рисует несколько диаграмм в один и тот же контекст canvas.

Вы должны иметь ссылку из Chart экземпляров вы new, чтобы быть в состоянии назвать destroy на них, прежде чем вы new до другой.

Добавьте это в ваш код:

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, который демонстрирует затруднительное.