在相同的x轴CHARTJS中堆叠2个条和1个未堆叠

时间:2016-09-12 20:59:50

标签: javascript canvas html5-canvas chart.js

我试图做一些组合图表,正如标题所说。我的意思是当我在x轴上有3Q15时,我希望一个接一个地获得2个柱,第一个与其他堆叠,第二个堆叠。在这里,我有一张关于所有CHARTJS想要得到的图片:

enter image description here

<script>
var randomScalingFactor = function() {
    return Math.round(Math.random() * 10000);
};
</script>

<h3 style="text-align:center;font-weight:900">ONLINE</h3>
<canvas id="myChart6" ></canvas>
<div id="js-legend" class="chart-legend"></div>
<script>

var barChartData = {
        labels: ["Ene-16", "Feb-16", "Mar-16", "Abr-16", "May-16", "Jun-16", "Jul-16", "Ago-16", "Set-16", "Oct-16", "Nov-16", "Dic-16"],
        datasets: [{
            type: 'bar',
            label: 'Logística',
            backgroundColor: "rgba(0,255,0,0.6)",
            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
            yAxisID: 'y-axis-1'
        }, {
            type: 'bar',
            label: 'Equipamiento',
            backgroundColor: "rgba(255,0,0,0.6)",
            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
            yAxisID: 'y-axis-1'
        }, {
            type: 'bar',
            label: 'Equipamiento1',
            backgroundColor: "rgba(130,130,130,1)",
            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
            yAxisID: 'y-axis-1'
        }, {
            type: 'line',
            label: 'Equipamiento2',
            backgroundColor: "rgba(0,0,100,0.6)",
            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
            yAxisID: 'y-axis-1',
            fill: false
        }]

    };

window.onload = function() {
        var ctx = document.getElementById("myChart6").getContext("2d");

        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {

                tooltips: {
                    mode: 'label'
                },
                responsive: true,
                scales: {

                    yAxes: [{
                        stacked: true,
                        id: "y-axis-1",
                        position: "left",
                        display:true
                    },
                    {
                        stacked: true,
                        id: "y-axis-2",
                        gridLines:{
                            display: false
                        },
                        position: "right",
                        display:true
                    }]
                }
            }
        });

    };

而且我得到了这个,但是我不知道如何在前两个条形图中粘在一起,然后将它分开第三个条形图以获得我想要的图表。

enter image description here

任何帮助都会很棒!我对这个新的Chart JS感到有点绝望。我使用http://www.chartjs.org/中的Chart JS 2.2.2。

我希望有人可以给我一些提示。谢谢!

0 个答案:

没有答案