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

I've been trying to create a stacked bar chart in Chart.js as it does the slide animation on every update which is nice, as opposed to Chartist which has easily creatable stacked bar charts but has to recreate the chart on every update (I've tried to animate it, but I'm too stupid to do it for some reason).

我一直在尝试在Chart.js中创建一个堆积条形图,因为它在每次更新时执行幻灯片动画都很不错,而Chartist则具有易于创建的堆叠条形图,但必须在每次更新时重新创建图表(I我试图给它制作动画,但由于某种原因,我太愚蠢了。

The code I'm using is almost literally a rip from jtblin's github, but for some reason it doesn't stack for me: the bars just sit next to each other. Here's the link to his chart: http://jtblin.github.io/angular-chart.js/examples/stacked-bars.html. The controller link: http://jtblin.github.io/angular-chart.js/examples/app.js.

我正在使用的代码几乎完全是来自jtblin的github,但由于某种原因它不会为我堆叠:条形图只是彼此相邻。这是他的图表的链接:http://jtblin.github.io/angular-chart.js/examples/stacked-bars.html。控制器链接:http://jtblin.github.io/angular-chart.js/examples/app.js。

Please find my code below, and please tell what am I doing wrong?

请在下面找到我的代码,请告诉我我做错了什么?

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]
    ];
}

The original framework comes from blur-admin, if that is of any value.

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

Images depicting how it displays:

描述它如何显示的图像:

Mine: Jtblin's:

Please note(and I think this may be the crux of the problem): I'm using Chart.JS 1.0.2.

请注意(我认为这可能是问题的关键):我正在使用Chart.JS 1.0.2。

Alternatively, if someone could please tell me how to animate-on-update using Chartist, that would be great as well. It updates fine, it is stacked fine, has everything I want, but I can't get it to animate. I would presume I would have to do a .on('draw', ), but I don't know how.

或者,如果有人可以告诉我如何使用Chartist进行动画更新,那也会很棒。它更新很好,它堆得很好,有我想要的一切,但我不能让它动画。我认为我必须做一个.on('画'),但我不知道怎么做。

1 个解决方案

#1

No, it isn't possible. Stacked bars were added in Chart.js 2.0.0, and as such they're not present in Chart.js 1.0.2.

不,这是不可能的。 Chart.js 2.0.0中添加了堆积条形图,因此它们不存在于Chart.js 1.0.2中。

Source: https://github.com/chartjs/Chart.js/releases/tag/v2.0.0

That's annoying ¬_¬

这很烦人¬_¬

#1