-
[Javascript] Chart.js 사용하기프론트엔드/Javascript 2025. 1. 31. 22:50
Table of Contents
- Introduction
- Chart.js란?
- Chart.js의 차트 표현 종류
- 라인 차트 예시
- Reference
Introduction
웹 개발에서 데이터 시각화는 매우 중요한 역할을 한다. 데이터를 효과적으로 시각적으로 표현하면, 사용자가 정보를 더 쉽게 이해하고 분석할 수 있다. 이를 위해 여러 라이브러리와 툴이 존재하는데, 그 중 Chart.js는 매우 직관적이고 사용하기 쉬운 JavaScript 라이브러리로 인기를 끌고 있다. Chart.js는 다양한 종류의 차트를 지원하며, 간단한 코드로 아름다운 시각적 효과를 제공할 수 있다.
Chart.js란?
Chart.js는 HTML5의 <canvas> 요소를 이용하여 다양한 차트를 그릴 수 있게 해주는 오픈 소스 JavaScript 라이브러리입니다. 이 라이브러리는 매우 직관적이고, 설정이 간단하여 초보자부터 전문가까지 폭넓게 사용됩니다. 또한, 다양한 차트 유형을 제공하며, 차트를 동적으로 업데이트하거나 애니메이션 효과를 추가하는 것도 가능하여 데이터를 직관적으로 시각화할 수 있습니다.
Chart.js의 특징은 다음과 같습니다:
- 간단한 설정: 설정이 직관적이고 코드가 간결하여 빠르게 차트를 만들 수 있습니다.
- 애니메이션: 차트에 다양한 애니메이션 효과를 추가할 수 있습니다.
- 반응형 디자인: 차트는 반응형 디자인을 지원하여 다양한 화면 크기에서 잘 동작합니다.
- 다양한 차트 유형: 라인 차트, 바 차트, 파이 차트, 도넛 차트, 레이더 차트 등 다양한 유형을 제공합니다.
Chart.js의 차트 표현 종류
Chart.js는 다양한 차트를 통해 데이터를 시각적으로 표현할 수 있다. 주요 차트 유형은 다음과 같다.
- 라인 차트(Line Chart)
시간의 흐름에 따라 데이터를 표현할 때 유용하다. 예를 들어, 주식 가격의 변동이나 웹사이트 방문자 수의 변화 등을 시각적으로 나타낼 수 있다. - 막대 차트(Bar Chart)
데이터를 카테고리별로 비교하고 싶은 경우에 적합하다. 예를 들어, 각 도시의 인구 수나 제품 판매량을 나타낼 때 유용하다. - 파이 차트(Pie Chart)
전체에서 각 부분의 비율을 나타낼 때 사용된다. 예를 들어, 시장 점유율이나 예산 분배 등을 시각화할 때 적합하다. - 도넛 차트(Doughnut Chart)
파이 차트와 비슷하지만, 중앙에 비어있는 부분이 있어 좀 더 현대적인 느낌을 줄 수 있다. - 레이더 차트(Radar Chart)
여러 가지 지표를 비교하는 데 유용하다. 예를 들어, 스포츠 선수의 성적을 비교하거나 여러 항목의 성과를 비교할 때 사용된다. - 산점도(Scatter Chart)
두 개의 변수 간 관계를 시각화할 때 사용된다. 변수 간의 상관관계를 한눈에 파악할 수 있다.
라인 차트 예시
이제 Chart.js를 사용하여 라인 차트를 그리는 예시는 다음과 같다. 아래 코드는 서울시의 매매 실거래가 추세를 나타내는 간단한 라인 차트를 그리는 예제이다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>매매 실거래가 추세</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head> <body> <h2>매매 실거래가 추세</h2> <canvas id="lineChart" width="400" height="200"></canvas> <script> // 매매 실거래가 추세 (라인 차트) const lineChartCtx = document.getElementById('lineChart').getContext('2d'); const lineChart = new Chart(lineChartCtx, { type: 'line', // 차트 유형: 라인 차트 data: { labels: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06', '2024-07', '2024-08', '2024-09', '2024-10', '2024-11', '2024-12'], datasets: [{ label: '서울', // 데이터 레이블 data: [600, 610, 620, 615, 625, 630, 635, 640, 650, 660, 670, 680], // 실거래가 데이터 borderColor: '#0d47a1', // 선 색상 fill: false, // 선 아래 부분을 채우지 않음 borderWidth: 2, tension: 0.1 // 선의 부드러움 조정 }] }, options: { responsive: true, // 반응형 디자인 plugins: { legend: { display: false // 범례 숨기기 } } } }); </script> </body> </html>Reference
Chart.js 홈페이지, https://www.chartjs.org/
'프론트엔드 > Javascript' 카테고리의 다른 글
[Javascript] jQuery 사용하기 (3) 2023.10.16