Chartjs - мои старые данные показывают иногда, ошибки?

Question

У меня проблема, это странно, но у меня есть фильтр, если я выбрал дату фильтра и ftycode в первый раз, это показывает мои данные на диаграмме. Но когда я меняю свой фильтр, это любопытная ошибка, хорошо перезагружает или обновляет мои данные на графике, но когда я нахожу диаграмму, иногда моя старая диаграмма данных все еще отображается. Это мое кодирование

var data = { 
    labels: countline, 
    datasets: [ 
     { 
      label: 'QTY Target', 
      fillColor: 'rgba(220,220,220,0.5)', 
      strokeColor: 'rgba(220,220,220,0.8)', 
      highlightFill: 'rgba(220,220,220,0.75)', 
      highlightStroke: 'rgba(220,220,220,1)', 
      data: countqtytarget 
     }, 
     { 
      label: 'Qty Sewing', 
      fillColor: 'rgba(151,187,205,0.5)', 
      strokeColor: 'rgba(151,187,205,0.8)', 
      highlightFill: 'rgba(151,187,205,0.75)', 
      highlightStroke: 'rgba(151,187,205,1)', 
      data: countsew 
     }, 
     { 
      label: 'Qty QC Output', 
      fillColor: 'rgba(255,0,0,0.2)', 
      strokeColor: 'rgba(255,0,0,1)', 
      highlightFill: 'rgba(255,0,0,1)', 
      highlightStroke: 'rgba(255,0,0,1)', 
      data: countqc 
     }, 
     { 
      label: 'Qty Right First Time (RFT)', 
      fillColor: 'rgba(57,10,150,0.2)', 
      strokeColor: 'rgba(76,34,160,1)', 
      highlightFill: 'rgba(76,34,160,1)', 
      highlightStroke: 'rgba(76,34,160,1)', 
      data: countrft 
     }, 
     { 
      label: 'Qty Repair (RPR)', 
      fillColor: 'rgba(227,255,0,0.2)', 
      strokeColor: 'rgba(241,255,127,1)', 
      highlightFill: 'rgba(241,255,127,1)', 
      highlightStroke: 'rgba(241,255,127,1)', 
      data: countrpr 
     }, 
     { 
      label: 'Qty Polly Bag', 
      fillColor: 'rgba(71,180,2,0.2)', 
      strokeColor: 'rgba(241,255,127,1)', 
      highlightFill: 'rgba(241,255,127,1)', 
      highlightStroke: 'rgba(241,255,127,1)', 
      data: countpolly 
     }] 
}; 

// Chart.js Options 
var options = { 
    maintainAspectRatio: false, 

    // Sets the chart to be responsive 
    responsive: true, 

    //Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value 
    scaleBeginAtZero: true, 

    //Boolean - Whether grid lines are shown across the chart 
    scaleShowGridLines: true, 

    //String - Colour of the grid lines 
    scaleGridLineColor: "rgba(0,0,0,.05)", 

    //Number - Width of the grid lines 
    scaleGridLineWidth: 1, 

    //Boolean - If there is a stroke on each bar 
    barShowStroke: true, 

    //Number - Pixel width of the bar stroke 
    barStrokeWidth: 2, 

    //Number - Spacing between each of the X value sets 
    barValueSpacing: 5, 

    //Number - Spacing between data sets within X values 
    barDatasetSpacing: 1, 

    //String - A legend template 
    legendTemplate: '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>' 
}; 
// Get context with jQuery - using jQuery's .get() method. 
$('#rchart2') 
    .empty(); // this is my <canvas> element 
$('#canvas') 
    .append('<canvas id="chart2" class="full-width"></canvas>'); 
var ctx = $("#chart2") 
    .get(0) 
    .getContext("2d"); 
// This will get the first returned node in the jQuery collection. 
var chart2 = new Chart(ctx) 
    .Bar(data, options); 
//generate the legend 
var legend = chart2.generateLegend(); 
//and append it to your page somewhere 
$('#chart1Legend') 
    .empty(); 
$('#chart2Legend') 
    .append(legend); 

Answer 1

Вы пытались исключить <canvas> элемент, а затем reappending новый <canvas> элемент родительского контейнера?

Это то, что я использую. Это единственный способ избавиться от событий зависания и т. Д.

var resetCanvas = function(){ 
    $('#results-graph').remove(); // this is my <canvas> element 
    $('#graph-container').append('<canvas id="results-graph"><canvas>'); 
    canvas = document.querySelector('#results-graph'); 
    ctx = canvas.getContext('2d'); 
    ctx.canvas.width = $('#graph').width(); // resize to parent width 
    ctx.canvas.height = $('#graph').height(); // resize to parent height 
    var x = canvas.width/2; 
    var y = canvas.height/2; 
    ctx.font = '10pt Verdana'; 
    ctx.textAlign = 'center'; 
    ctx.fillText('This text is centered on the canvas', x, y); 
};