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>元素，然后将新的<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);
};

Chartjs - 我的旧数据有时显示错误？

1 个答案: