如何制作莫里斯条形图动画？

我正在尝试对莫里斯条形图进行动画处理，莫里斯条形图已显示，但我想要每个条形的动画和不同的颜色。我的代码是：

success:function(response){
                    $('body').css('cursor', 'default');
                    if(response.status == 'success'){
                        var productValueCountList=response.productcountlist;
                        $('#productCount-bar').empty();
                        if(productValueCountList=='')
                        {vex.dialog.alert("No record found")
                            return false;
                        }
                        Morris.Bar({

                            element: 'productCount-bar',

                            data:productValueCountList,
                            xkey: 'productName',
                            ykeys: ['productCount'],
                            labels: ['Number of Product'],
                            barRatio: 0.3,
                            barSizeRatio:0.3,
                            xLabelAngle:25,
                            //seriesColors:['#85802b', '#00749F', '#73C774', '#C7754C'],
                            // barColors: ["#B21516", "#1531B2", "#1AB244", "#B29215"],
                            hideHover: 'auto'


                        });

在上面的代码中productcountlist是 JSON 数组。 请帮助我或给我另一个解决方案。

可以通过 Raphael js 的 animate 函数向莫里斯图添加动画，但需要对代码进行许多更改。

主要思想是我们需要创建一个straight将与 Morris 计算的路径绑定的路径。

下面我展示了我如何使用 Coffee 脚本：

drawLinePath: (path, lineColor, lineIndex) ->
  straightPath = ''
  for row, ii in @data
    if straightPath == ''
        straightPath = 'M'+row._x+','+@transY(@ymin)
    else
        straightPath += ','+row._x+','+@transY(@ymin)

  rPath = @raphael.path(straightPath)
                  .attr('stroke', lineColor)
                  .attr('stroke-width', this.lineWidthForSeries(lineIndex))
      do (rPath, path) =>
      rPath.animate {path}, 500, '<>'

下面是生成的 JavaScript：

Line.prototype.drawLinePath = function(path, lineColor, lineIndex) {
  var ii, rPath, row, straightPath, _i, _len, _ref,
  _this = this;
  straightPath = '';
  _ref = this.data;
  for (ii = _i = 0, _len = _ref.length; _i < _len; ii = ++_i) {
    row = _ref[ii];
    if (straightPath === '') {
      straightPath = 'M' + row._x + ',' + this.transY(this.ymin);
    } else {
      straightPath += ',' + row._x + ',' + this.transY(this.ymin);
    }
  }
  rPath = this.raphael.path(straightPath).attr('stroke', lineColor).attr('stroke-width', this.lineWidthForSeries(lineIndex));

  return (function(rPath, path) {
    return rPath.animate({
    path: path
    }, 500, '<>');
  })(rPath, path);
};

由于我也需要这个功能，所以我对Morris做了一个fork a，有兴趣的可以在这里查看：https://pierresh.github.io/morris.js/ https://pierresh.github.io/morris.js/