【问题标题】：Bar and stacked bar charts in one graph morris.js一张图表中的条形图和堆积条形图 morris.js
【发布时间】：2016-06-14 13:17:05
【问题描述】：

是否可以在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 

});

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

这个想法是显示已完成的任务及其衡量标准，未完成的任务和机会叠加在一起。

在这里谢谢

【问题讨论】：

标签： javascript bar-chart morris.js stacked-chart

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以做到您应该为单独的 div 和单独的元素创建 Morris 图表。因此，将两个 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>

【讨论】：