莫里斯图表的抄写代码

Question

是否可以将堆积条形图和条形图放在morris.js的一个图表中？我可以通过以下方式创建堆积条形图：

Morris.Bar({
  element: 'bar-example',
  data: [ 
     {x: '2011 Q1', y: 3, z: 2, a: 3}, 
     {x: '2011 Q2', y: 2, z: null, a: 1}, 
     {x: '2011 Q3', y: 0, z: 2, a: 4}, 
     {x: '2011 Q4', y: 2, z: 4, a: 3} 
   ], 
   xkey: 'x', 
   ykeys: ['y', 'z', 'a'], 
   labels: ['Opportunity', 'Not Completed', 'Completed'], 
   stacked: true 

});

但是我想在堆叠列旁边添加一个额外的未堆叠条。有可能吗？

这个想法是通过未完成的任务和堆叠在一起的机会来展示已完成的任务及其措施。

在此感谢

Answer 1

不能将条形图和另一个堆积的条形图组合在同一个图中

Answer 2

您可以做到您应该为单独的div和单独的元素创建莫里斯图表。因此，将两个div放在另一个顶部，并使div的背景颜色变为透明。

<div class="row">
    <div class="col-sm-12">
        <div id="ContractorChart" style="z-index:0;position:fixed;width:80%;height:60vh">

        </div>
        <div id="ContractorChart2" style="z-index:100;position:fixed;background-color:transparent;width:80%;height:60vh"> </div> 
    </div>
</div>

莫里斯图表的抄写代码

    ChartShowLine();
    ChartShowBar();


    function ChartShowLine() {
        $("#FirstElement").empty();

        $(function () {
            new Morris.Line({
                element: 'FirstElement',
                parseTime: false,
                lineWidth: 4,
                trendLine: false,
                pointSize: 2,
                xLabelAngle: 90,
                dataLabels: false,
                resize: true,
                data: [
                     @foreach (var item in Model.ToList())
                {
                @*@:{ Week: "@(Convert.ToInt32(item.ContractorsWeek.Replace('W',' ')))", Plan_Cu: "@(item.Plan_Cu)", Plan_We: "@(item.Plan_We)", Prog_Cu: "@(item.Prog_Cu)", Prog_We: "@(item.Prog_We)" },*@
                     @:{ Week: "@(Convert.ToInt32(item.ContractorsWeek.Replace('W',' ')))", Plan_Cu: "@(Math.Round(item.Plan_Cu.Value,2))", Prog_Cu: "@(Math.Round(item.Prog_Cu.Value,2))" },
                }
                ],
                xkey: ['Week'],
                ykeys: ['Plan_Cu', 'Prog_Cu'],
                labels: [['Prog_Cu'], ['Plan_Cu']]
            });

        });
    }

    function ChartShowBar() {
        $("#SecondElement").empty();

        $(function () {
            new Morris.Bar({
                element: 'SecondElement',
                parseTime: false,
                lineWidth: 4,
                trendLine: false,
                pointSize: 2,
                xLabelAngle: 90,
                axes: false,
                grid:false,

                dataLabels: false,
                resize: true,
                data: [
                     @foreach (var item in Model.ToList())
                {
                @*@:{ Week: "@(Convert.ToInt32(item.ContractorsWeek.Replace('W',' ')))", Plan_Cu: "@(item.Plan_Cu)", Plan_We: "@(item.Plan_We)", Prog_Cu: "@(item.Prog_Cu)", Prog_We: "@(item.Prog_We)" },*@
            @:{ Week: "@(Convert.ToInt32(item.ContractorsWeek.Replace('W',' ')))", Plan_We: "@(Math.Round(item.Plan_We.Value,2))", Prog_We: "@(Math.Round(item.Prog_We.Value,2))" },
            }
        ],
        xkey: ['Week'],
        ykeys: ['Plan_We', 'Prog_We'],
        labels: [['Prog_We'], ['Plan_We']]
    });

    });
    }


</script>

酒吧和堆积的条形图在一个图形morris.js

2 个答案:

莫里斯图表的抄写代码