使用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);
});

})();

这是一个小提琴：http://jsfiddle.net/f7nj80ye/30/