我试图做一些组合图表,正如标题所说。我的意思是当我在x轴上有3Q15时,我希望一个接一个地获得2个柱,第一个与其他堆叠,第二个堆叠。在这里,我有一张关于所有CHARTJS想要得到的图片:
<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
}]
}
}
});
};
而且我得到了这个,但是我不知道如何在前两个条形图中粘在一起,然后将它分开第三个条形图以获得我想要的图表。
任何帮助都会很棒!我对这个新的Chart JS感到有点绝望。我使用http://www.chartjs.org/中的Chart JS 2.2.2。
我希望有人可以给我一些提示。谢谢!