728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.4.1.min.js"></script>
<script src="chart.js"></script>
<title>차트</title>
</head>
<body>
<div style="width: 100%; height: 600px;">
<canvas id="chart"></canvas>
</div>
<script th:inline="javascript">
$(function() {
var ctx = document.getElementById('chart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'bar',
data: {
// 배열 값 넣기
labels: ['10일','11일','12일','13일','14일','15일','16일','17일','18일','19일'],
datasets: [{
label: '일별이용자수',
type : 'line',
fill : false,
lineTension : 0.2,
pointRadius : 3.5,
backgroundColor: '#00a2be',
borderColor: '#00a2be' // 그래프 선,
// 배열 값 넣기
data: [37000, 34280, 41520, 35837, 35080, 42000, 38000, 39000, 39500, 17000]
}]
},
// Configuration options
options: {
legend: {
labels: {
fontColor: 'white' // label color
}
},
scales: {
// y축
yAxes: [{
stacked: true,
ticks: {
fontColor:'white' // y축 폰트 color
}
}],
// x축
xAxes: [{
stacked: true,
ticks: {
fontColor:'white' // x축 폰트 color
}
}]
}
}
});
});
</script>
</body>
</html>
[ VIEW ]
728x90