프론트엔드/JavaScript
[JavaScript] Chart.js
an_apricot__
2023. 2. 1. 15:50

<!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>

