我想创建一个如下所示的条形图:
我试着用网站上给出的文档创建一个堆叠条形图。https://www.chartjs.org/docs/latest/samples/bar/stacked.html
但是无法找到按照我要求创建图表的方法。
我试过下面的例子
<canvas id="myChart" style="vertical-align:left;z-index:1; height: 350px"> </canvas>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['T1', 'T2', 'T3', 'T4'],
datasets: [{
label: 'Done',
backgroundColor: "#caf270",
data: [12, 59, 5, 56],
}, {
label: 'Running',
backgroundColor: "#45c490",
data: [12, 59, 5, 56],
}, {
label: 'Todo',
backgroundColor: "#008d93",
data: [12, 59, 5, 56],
}, {
label: 'KO',
backgroundColor: "#2e5468",
data: [12, 59, 5, 56],
}],
},
options: {
tooltips: {
displayColors: true,
callbacks:{
mode: 'x',
},
},
scales: {
xAxes: [{
stacked: true,
gridLines: {
display: false,
}
}],
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true,
},
type: 'linear',
}]
},
responsive: true,
maintainAspectRatio: false,
legend: { position: 'top' },
}
});
</script>
1条答案
按热度按时间iih3973s1#
我认为你可以使用(stacked100插件)https://github.com/y-takey/chartjs-plugin-stacked100,以便堆栈按比例计算100%的缩放尺寸