如何使用 Chart.js（或 Chartist）创建更新时动画堆积条形图？答案

【问题标题】：How to create an animate-on-update Stacked Bar chart using Chart.js(or Chartist)?如何使用 Chart.js（或 Chartist）创建更新时动画堆积条形图？
【发布时间】：2016-12-25 23:37:49
【问题描述】：

我一直在尝试在 Chart.js 中创建一个堆叠条形图，因为它在每次更新时都会播放幻灯片动画，这很好，而 Chartist 则可以轻松创建堆叠条形图，但必须在每个更新上重新创建图表更新（我尝试过为它制作动画，但由于某种原因我太愚蠢了，无法这样做）。

我使用的代码几乎是从 jtblin 的 github 上抄下来的，但出于某种原因，它对我来说并没有叠加：这些条只是彼此相邻。这是他图表的链接：http://jtblin.github.io/angular-chart.js/examples/stacked-bars.html。控制器链接：http://jtblin.github.io/angular-chart.js/examples/app.js.

请在下面找到我的代码，并告诉我我做错了什么？

function chartJsWaveCtrl($scope) {
    $scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
    $scope.type = 'StackedBar';
    $scope.series = ['2015', '2016'];
    $scope.options = {
      scales: {
        xAxes: [{
          stacked: true
        }],
        yAxes: [{
          stacked: true
        }]
      }
    };

    $scope.data = [
      [65, 59, 90, 81, 56, 55, 40],
      [28, 48, 40, 19, 96, 27, 100]
    ];
}

如果有任何价值，原始框架来自 blur-admin。

描述其显示方式的图像：

我的：杰特布林：

请注意（我认为这可能是问题的症结所在）：我使用的是 Chart.JS 1.0.2。

或者，如果有人可以告诉我如何使用 Chartist 进行更新动画，那也很好。它更新良好，堆叠良好，拥有我想要的一切，但我无法让它动画化。我想我必须做一个 .on('draw', )，但我不知道怎么做。

【问题讨论】：

标签： javascript angularjs chart.js chartist.js

【解决方案1】：

不，这是不可能的。在 Chart.js 2.0.0 中添加了堆叠条，因此它们在 Chart.js 1.0.2 中不存在。

来源：https://github.com/chartjs/Chart.js/releases/tag/v2.0.0

这很烦人 ¬_¬

【讨论】：