一個圖形中的條形圖和堆積條形圖 morris.js

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>