레슨 1 / 8·15분

막대/선 차트

Chart.js 시작하기

Chart.js는 HTML Canvas 위에 아름다운 차트를 그려주는 오픈소스 라이브러리입니다. 간단한 설정 객체(config) 하나로 반응형 인터랙티브 차트를 만들 수 있습니다. CDN이나 npm을 통해 프로젝트에 추가할 수 있습니다.

html

<!-- CDN으로 Chart.js 추가 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- 차트를 그릴 캔버스 -->
<canvas id="myChart" width="400" height="200"></canvas>

막대 차트(Bar Chart) 만들기

new Chart()에 캔버스의 2D 컨텍스트와 설정 객체를 전달합니다. type으로 차트 종류를 지정하고, data 객체에 labels(X축 라벨)와 datasets(데이터 묶음)를 정의합니다.

javascript

const ctx = document.getElementById('myChart').getContext('2d');

const barChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
    datasets: [{
      label: '월별 매출 (만원)',
      data: [120, 190, 150, 250, 220, 300],
      backgroundColor: [
        'rgba(54, 162, 235, 0.6)',
        'rgba(75, 192, 192, 0.6)',
        'rgba(255, 206, 86, 0.6)',
        'rgba(153, 102, 255, 0.6)',
        'rgba(255, 159, 64, 0.6)',
        'rgba(255, 99, 132, 0.6)',
      ],
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1,
    }],
  },
});

선 차트(Line Chart) 만들기

javascript

const lineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['월', '화', '수', '목', '금'],
    datasets: [{
      label: '일일 방문자 수',
      data: [850, 1200, 1050, 1400, 980],
      borderColor: 'rgb(75, 192, 192)',
      backgroundColor: 'rgba(75, 192, 192, 0.1)',
      fill: true,          // 영역 채우기
      tension: 0.3,        // 곡선 정도 (0 = 직선)
      pointRadius: 5,      // 데이터 포인트 크기
      pointHoverRadius: 8, // 호버 시 크기
    }],
  },
});

💡

fill: true와 tension 값을 조합하면 부드러운 영역 차트(Area Chart)를 만들 수 있습니다. tension 값은 0(직선)에서 1 사이로 조절합니다.

←과정 목록 다음: 원형 차트→