<!doctype html>
<html>
<head>
<title>Stacked Bar Chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width: 75%">
<canvas id="canvas"></canvas>
</div>
<script>
var lineData = {
labels: ['2018年1月','2018年2月','2018年3月','2018年4月','2018年5月','2018年6月','2018年7月','2018年8月','2018年9月','2018年10月','2018年11月','2018年12月'],
datasets: [
{
type: 'line',
label: '現金收入',
borderColor: 'rgba(255,0,0,0.5)',
borderWidth: 2,
fill: false,
data: [
355040.0000,396720.0000,519860.0000,184200.0000,116680.0000,590880.0000,1008288.0000,323680.0000,582736.0000,299480.0000,188156.0000,0.0000
]
},
{
type: 'bar',
label: 'A收入',
backgroundColor: 'rgba(247,150,70,0.6)',
data: [
106512,
119016,
155958,
55260,
35004,
177264,
302486.4,
97104,
174820.8,
89844,
56446.8,
0
]
},
{
type: 'bar',
label: 'B收入',
backgroundColor: 'rgba(165,165,165, 0.6)',
data: [
177520,
198360,
259930,
92100,
58340,
295440,
504144,
161840,
291368,
149740,
94078,
0
]
},
{
type: 'bar',
label: 'C收入',
backgroundColor: 'rgba(95,167,220, 0.6)',
data: [
71008,
79344,
103972,
36840,
23336,
118176,
201657.6,
64736,
116547.2,
59896,
37631.2,
0
]
}
]
};
window.onload = function() {
var ctx = document.getElementById('canvas').getContext('2d');
window.myBar = new Chart(ctx, {
type: 'bar',
data: lineData,
options: {
title: {
display: true,
text: 'Chart.js Bar Chart - Stacked'
},
tooltips: {
mode: 'index',
intersect: false
},
responsive: true,
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
}
});
};
</script>
</body>
</html>