如何对莫里斯条形图进行动画处理

how to animate morris bar chart?

本文关键字：动画 处理 条形图 莫里斯      更新时间：2023-09-26

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

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可以将动画添加到莫里斯图表中，但需要对代码进行许多更改。

主要思想是我们需要创建一条直线路径，该路径将与莫里斯计算的路径绑定。

我在下面展示了我如何使用咖啡脚本：

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

由于我也需要这个功能，所以我做了一个莫里斯的叉子，对它感兴趣的人可以在这里查看：https://pierresh.github.io/morris.js/

对于动画的事情，我正在寻找完全相同的东西;)但是，对于颜色，您的数据数组必须如下所示：

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

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

它可以简单地用属性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"],
})
相关文章：