javascript - Chart JS 使用 onclick 重新动画图表

Question

我正在熟悉 Chart.js 并想做一件简单的事情但不能。我只是希望图表在单击按钮时重新设置动画，但无法正常工作。我认为通过将 chart.update 附加到 onclick 会起作用，但它没有。感谢您的帮助。

http://jsfiddle.net/f7nj80ye/5/

$('#button1').click(function(){
  chart.update();
});

Answer 1

你需要销毁它，然后重新创建它:

var ctx = document.getElementById("myChart");

var config = {
  type: 'bar',
  data: {
    labels: ["2014", "2015", "2016"],
    datasets: [{
      label: 'Group 1',
      data: [50, -59, 64],
      datalabels:{
        anchor: "end",
        align: "end",
        color:"black",
        font:{ size: 14, },
      },
      backgroundColor: [ '#5bbbbb', '#5bbbbb4', '#5bbbbb' ],
      borderWidth: 1
    },{
      label: 'Group 2',
      data: [69, -85, 92],
      datalabels:{
        anchor: "end",
        align: "end",
        color:"black",
        font:{ size: 14, },
      },
      backgroundColor: ['#ddd','#ddd','#ddd'],
      borderWidth: 1
    }]
  },

  options: {
    scales: {
      yAxes: [{
        ticks: {
        beginAtZero:true,
        max:100
        }
      }]
    }
  }
};

var chart = new Chart(ctx, config);


(function() { // self calling function replaces document.ready()

//adding event listenr to button
    document.querySelector('#button1').addEventListener('click',function(){

    chart.destroy();
    chart = new Chart(ctx, config);
});

})();

这是一个 fiddle :http://jsfiddle.net/f7nj80ye/30/