时间戳

首页 > 解决方案 > Chart JS 使用 onclick 重新动画图表

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

问题描述

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

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

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

标签： javascriptjquerychart.js

解决方案

您需要销毁它，然后再次创建它：

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/

推荐阅读