chart.js中的条形图偶尔闪烁

Question

我正在使用chart.js创建一个条形图，该条形图按预期显示mysql数据库中的数据，但是有时该图上的条形可能会闪烁并从图中消失。有人对这是为什么以及如何解决有任何建议吗？

以下是填充图形的代码：

 <script type="text/javascript">
$(document).ready(function(){
  $(document).on('click', '#modalBtn', function(e){
    e.preventDefault();
    var ctx = document.getElementById('myCanvas').getContext('2d');
  $.ajax({
    url: "statsgraph.php",
    type: "GET",
    success: function(data) {
      console.log(data);
      var dataJS=data;
      var goal = [];
      var point = [];
      var wide = [];
      var kickout = [];
      var turnover = [];
      var foul = [];
      var agoal = [];
      var apoint = [];
      var awide = [];
      var akickout = [];
      var aturnover = [];
      var afoul = [];
      //var fixture=[];

      for(var i in dataJS) {
        //fixture.push(data[i].fixture);
        goal.push(data[i].goalCountHome);
        point.push(data[i].pointCountHome);
        wide.push(data[i].wideCountHome);
        kickout.push(data[i].kickoutWonCountHome);
        turnover.push(data[i].turnoverCountHome);
        foul.push(data[i].foulCountHome);
        agoal.push(data[i].goalCountAway);
        apoint.push(data[i].pointCountAway);
        awide.push(data[i].wideCountAway);
        akickout.push(data[i].kickoutWonCountAway);
        aturnover.push(data[i].turnoverCountAway);
        afoul.push(data[i].foulCountAway);
      }
      var chartdata = {
        labels: ['Goals','points','Wides', 'Kickouts won', 'Turnovers won', 'Fouls conceded'],
        datasets : [
          {
            label: 'Home team',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
            hoverBorderColor: 'rgba(200, 200, 200, 1)',
            data: [goal,point,wide,kickout,turnover,foul]
          },
          {
            label: 'Away team',
            backgroundColor: "rgba(29, 202, 255, 0.75)",
            borderColor: "rgba(29, 202, 255, 1)",
            hoverBackgroundColor: "rgba(29, 202, 255, 1)",
            hoverBorderColor: "rgba(29, 202, 255, 1)",
            data: [agoal,apoint,awide,akickout,aturnover,afoul]
          },

        ]
      };

      var options = {
    scaleBeginAtZero: true,
    scales: {
    yAxes: [{
    ticks: {
    suggestedMin: 1,
    suggestedMax: 10,
    responsive: false,
    maintainAspectRatio: false
        }
      }]
    }
};
      var ctx = $("#myCanvas");
      window.myCanvas = new Chart(ctx, {
        type: 'bar',
        data: chartdata,
        options
      });
    },error: function(data) {
      console.log(data);


    }


  });
  });
});
</script>