Как оживить гистограмму морриса?

Question

Я пытаюсь анимировать гистограмму Морриса, отображается гистограмма Морриса, но мне нужна анимация и разные цвета для каждого бара. И мой код:

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 Пожалуйста, помогите мне или дайте мне другое решение.

Answer 1

Добавление анимации к диаграммам Морриса возможно с помощью функции animate в Raphael js, но необходимо внести много изменений в код.

Основная идея заключается в том, что нам нужно создать прямой путь, который будет связан с путем, вычисленным Моррисом.

Ниже я покажу, как я делал со сценарием 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, и те, кто заинтересован в этом, могут проверить его здесь: https://pierresh.github.io/morris.js/

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

Если вам нужны разные цвета для одного и того же набора данных, я думаю, что это не нативный вариант... Возможно, я ошибаюсь, и если вы что-то финансируете, поделитесь;)

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