Chart.js는 JavaScript를 기반으로 한 강력한 차트 라이브러리입니다. 이러한 라이브러리를 사용하면 다양한 종류의 차트를 생성하여 데이터를 시각화할 수 있습니다. 이제 Chart.js를 사용하여 스택 차트를 생성하는 방법에 대해 알아보겠습니다.

차트 설정

먼저, Chart.js를 다운로드하고 HTML 문서에 연결해야 합니다. 다음 스크립트 태그를 사용하여 Chart.js를 가져올 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

HTML 구조

다음으로, Chart.js를 사용하여 스택 차트를 생성하기 위해 HTML 구조를 설정해야 합니다. 예를 들어, 다음과 같은 테이블 형태의 데이터를 시각화하려고 합니다.

<table>
  <thead>
    <tr>
      <th></th>
      <th>공감</th>
      <th>비공감</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>박스1</th>
      <td>20</td>
      <td>10</td>
    </tr>
    <tr>
      <th>박스2</th>
      <td>30</td>
      <td>5</td>
    </tr>
    <tr>
      <th>박스3</th>
      <td>15</td>
      <td>20</td>
    </tr>
  </tbody>
</table>

이 예제에서는 thead 요소를 사용하여 표의 머리글을 작성하고, tbody 요소를 사용하여 데이터를 작성했습니다.

스크립트 작성

이제 JavaScript를 사용하여 Chart.js에서 스택 차트를 생성할 수 있습니다. 다음 스크립트를 HTML 문서에 추가합니다.

<script>
  var ctx = document.getElementById('myChart').getContext('2d');

  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['박스1', '박스2', '박스3'],
      datasets: [{
        label: '공감',
        data: [20, 30, 15],
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 1
      }, {
        label: '비공감',
        data: [10, 5, 20],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        x: { 
          stacked: true 
        },
        y: { 
          stacked: true 
        }
      }
    }
  });
</script>

이 코드에서는 ctx 변수를 사용하여 스택 차트를 렌더링할 캔버스 요소를 선택합니다. 그런 다음 new Chart를 사용하여 스택 차트를 생성합니다. 데이터와 스타일을 설정한 다음, 차트를 렌더링할 캔버스 요소와 차트 유형을 지정합니다 (여기서는 ‘bar’를 사용했습니다). 스택 차트를 생성하기 위해 scales 객체의 x와 y 속성에 stacked: true를 설정합니다.

결과 확인

이제 스크립트를 작성하고 HTML 문서에서 차트를 렌더링하려면, 아래와 같이 canvas 요소를 추가합니다.

<canvas id="myChart" width="400" height="400"></canvas>

브라우저에서 HTML 파일을 열고 결과를 확인할 수 있습니다.

차트 개인화

Chart.js를 사용하여 생성한 스택 차트를 범례, 축 레이블, 색상 등을 통해 개인화할 수 있습니다. Chart.js의 전체적인 사용법에 대해 더 알고 싶다면 공식 문서를 참고하세요.

이렇게 Chart.js를 사용하여 스택 차트를 생성하는 방법을 알아보았습니다. 다양한 설정과 데이터로 차트를 더욱 풍부하게 만들 수 있습니다.