如何制作Morris条形图的动画? [英] how to animate morris bar chart?

问题描述

我正在尝试对morris条形图进行动画处理，显示了morris条形图，但我希望每个条形都具有动画和不同的颜色.我的代码是:

I am trying to animate morris bar chart, morris bar chart got displayed but I want animation and different colour for each bar. And my code is:

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数组. 请帮助我或给我另一个解决方案.

In above code productcountlist is JSON array. Please help me or give me another solution.

推荐答案

可以通过Raphael js的动画功能向morris图表添加动画，但是需要对代码进行许多更改.

Adding animation to morris charts is possible through the function animate of Raphael js but many changes in the code are needed.

主要思想是我们需要创建一条直线路径，该路径将与Morris计算出的路径绑定.

The main idea is that we need to create a straight path that will be bound with path computed by Morris.

我在下面显示我如何使用Coffee脚本:

I show below how I did with Coffee script:

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:

Below is the resulting 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，对它感兴趣的人可以在这里查看:

As I also needed this function, I made a fork a of Morris, those interested with it can check it here: https://pierresh.github.io/morris.js/

这篇关于如何制作Morris条形图的动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！