how to animate morris bar chart?

问题

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'


                        });

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

回答1:

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

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

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, '<>'

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

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/

回答2:

for the animation thing, I'm looking for the exact same thing ;) But, for the colors, your data array must be like this one:

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

If you want different colors on a same dataset, I think it's not a native option... Maybe I'm wrong and if you've fund something, please share ;)

回答3:

It can be simply done with the attribute barColors:

Check the below example:

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"],
})

来源：https://stackoverflow.com/questions/27441502/how-to-animate-morris-bar-chart

标签

javascript

jquery

morris.js