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

【问题标题】：how to animate morris bar chart?如何为莫里斯条形图制作动画？
【发布时间】：2018-01-16 16:13:09
【问题描述】：

我正在尝试为 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 数组。请帮助我或给我其他解决方案。

【问题讨论】：

你应该更好地解释你的问题。
我得到稳定的 morris 条形图，但我希望条形图在页面加载时从下到上弹出
能否提供一个jsFiddle来测试代码？
link

标签： javascript jquery morris.js

【解决方案1】：

通过 Raphael js 的函数 animate 可以为 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 a，有兴趣的可以看这里：https://pierresh.github.io/morris.js/

【讨论】：

【解决方案2】：

对于动画，我正在寻找完全相同的东西 ;) 但是，对于颜色，您的数据数组必须是这样的：

var data = {
    labels: ["l1", "l2", "l3"],
    datasets: [
        {
            label: "In",
            fillColor: "rgba(220,220,220,0)",
            strokeColor: "rgba(37,131,154,1)",
            pointColor: "#fff",
            pointStrokeColor: "#rgba(37,131,154,1)",
            pointHighlightFill: "rgba(37,131,154,1)",
            pointHighlightStroke: "rgba(37,131,154,1)",
            data: [1000, 2000, 3000]
        },
        {
            label: "Out",
            fillColor: "rgba(220,220,220,0)",
            strokeColor: "#ffa874",
            pointColor: "#fff",
            pointStrokeColor: "#ffa874",
            pointHighlightFill: "#ffa874",
            pointHighlightStroke: "#ffa874",
            data: [3000, 2000, 1000]
        }
    ]};

如果你想在同一个数据集上使用不同的颜色，我认为这不是一个原生选项......也许我错了，如果你资助了一些东西，请分享 ;)

【讨论】：

【解决方案3】：

可以简单地用barColors属性来完成：

查看以下示例：

take data in json
var plotdata =[{"x":"A","y1":59,"y2":64,"y3":834,"y4":787},{"x":"B","y1":597,"y2":615,"y3":837,"y4":787}];

morris = Morris.Bar({
    element: 'normal-bar',
    data: plotdata,
    xkey: 'x',
    ykeys: ['y1', 'y2', 'y3','y4'],
    labels:   ['Label1', 'Label2', 'Label3','label4'],
    barColors: ["#3498db", "#26A65B", "#1F3A93", "#6C7A89"],
})

【讨论】：