Question

我正在尝试动画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数组。请帮助我或给我另一种解决方案。

Answer 1

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

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 2

可以使用属性 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"],
})

Answer 3

通过Raphael js的函数动画可以将动画添加到morris图表中，但是需要对代码进行许多更改。

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

我在下面展示了我对Coffee脚本的处理方式：

map

以下是生成的javascript：

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

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

如何制作morris条形图的动画？

3 个答案: