javascript - 如何制作Morris条形图的动画?

我正在尝试为morris条形图制作动画,显示了morris条形图,但我希望每个条形都具有动画和不同的颜色。我的代码是:

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的动画功能,可以向morris图表添加动画,但是需要对代码进行许多更改。

主要思想是我们需要创建一条直线路径,该直线路径将与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,对它感兴趣的人可以在这里查看:https://pierresh.github.io/morris.js/

译文:来源   文章分类: javascript jquery morris.js

相关文章:

javascript - 如何调整SVG的大小?

javascript - 如果src是http://而没有链接,则隐藏iframe

javascript - JS分配方法

javascript - 选择框:捕获由外部JavaScript触发的onchange事件?

javascript - Java的while循环中的continue语句导致无限循环

javascript - IntroJS将指令添加到步骤标记

javascript - 正弦波动画不在预期的原点发生

javascript - 如何使用jQuery更改Twitter Bootstrap中的按钮

javascript - DevTools Performance工具中的解析,编译和评估是什么?

php - 如何取消字符串的转义?