Chart.js는 웹 페이지에서 대화형 및 사용자 정의 가능한 차트와 그래프를 생성하는 인기있는 JavaScript 라이브러리입니다. 선 그래프, 막대 그래프, 파이 그래프, 레이더 그래프 등 다양한 차트 유형을 생성하기 위한 간단하면서도 강력한 API를 제공합니다.
Chart.js는 사용하기 쉬운 것과 함께 아름다운 기본 스타일과 유연성으로 널리 사용됩니다. 웹 애플리케이션, 대시 보드 또는 데이터 표시가 필요한 기타 웹 기반 프로젝트에서 데이터를 시각화하는 데 훌륭합니다.
Chart.js를 사용하려면 일반적으로 HTML 파일에
<script>태그를 사용하여 라이브러리를 포함한 다음, 차트가 나타날 <canvas>요소를 생성하고 마지막으로 차트를 인스턴스화하고 구성하기 위해 JavaScript를 작성합니다.
Chart.js를 사용하여 선 그래프를 만드는 기본적인 예제를 제공합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chart.js 예제</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['1월', '2월', '3월', '4월', '5월', '6월', '7월'],
datasets: [{
label: '판매량',
data: [65, 59, 80, 81, 56, 55, 40],
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
</html>
이 코드는 월별 판매 데이터를 보여주는 선 그래프를 생성합니다. Chart.js가 제공하는 구성 옵션을 조정하여 차트의 모양과 동작을 사용자 정의할 수 있습니다.
