<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(document).ready(function () {
const ctx = document.getElementById('barChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['2020', '2021', '2022'],
datasets: [
{
label: 'data',
data: [70, 75, 90],
borderRadius: 3,
backgroundColor: "#394DC0",
maxBarThickness: 40
},
{
label: 'data2',
data: [30, 25, 10],
borderRadius: 3,
backgroundColor: "#FEAA12",
maxBarThickness: 40
},
]
},
options: {
scales: {
x: {
},
y: {
beginAtZero: true,
min: 0,
max: 100,
grid: {
// display: false
}
}
}
}
});
});
</script>
</head>
<body>
<canvas id="barChart"></canvas>
</body>
</html>
'프론트엔드 > JavaScript' 카테고리의 다른 글
| [JavaScript] 구글맵 마커 표시하기 (0) | 2021.07.16 |
|---|---|
| [JavaScript] url 파라미터 가져오기 (0) | 2021.06.16 |
| [JavaScript] Validation Check (0) | 2021.05.21 |
| [JavaScript] JSON parse (0) | 2021.05.21 |
| [JavaScript] JSON (0) | 2021.05.21 |