계층적 데이터는 데이터의 계층 구조를 나타냅니다. 예를 들어, 부서별 판매량을 분석하는데에 사용할 수 있습니다. Chart.js는 막대 그래프, 원 그래프, 라인 그래프 등 다양한 시각화를 제공하며, 이러한 그래프를 사용하여 계층적 데이터를 시각화할 수 있습니다.

아래는 Chart.js를 사용하여 계층적 데이터를 시각화하는 예시입니다.

준비 단계

먼저, Chart.js 라이브러리를 프로젝트에 추가해야 합니다. 다음의 스크립트를 HTML 파일에 추가합니다.

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

데이터 구조

계층적 데이터를 시각화하기 위해서는 데이터의 구조가 적절해야 합니다. 다음은 계층적 데이터의 예시 구조입니다.

const data = {
  labels: ['부서A', '부서B', '부서C'],
  datasets: [
    {
      label: '2020년',
      data: [100, 150, 200],
      backgroundColor: 'rgba(255, 99, 132, 0.2)'
    },
    {
      label: '2021년',
      data: [120, 180, 210],
      backgroundColor: 'rgba(54, 162, 235, 0.2)'
    }
  ]
};

위의 예시에서 첫 번째 labels 배열은 계층의 이름을 나타내며, datasets 배열은 각 계층의 데이터를 담고 있습니다. 각 데이터는 그래프의 레이블, 데이터 값, 그리고 색상을 포함하고 있습니다.

그래프 그리기

Chart.js를 사용하여 계층적 데이터를 그래프로 그리기 위해서는 Chart 객체를 생성해야 합니다. 아래는 막대 그래프를 그리기 위한 예시입니다.

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

위의 예시에서 type 속성은 그래프의 타입을 나타내며, data 속성에는 위에서 생성한 데이터 객체를 할당합니다. options 속성에서는 그래프의 설정을 지정할 수 있습니다.

결과 확인

위의 코드를 실행하고 결과를 확인하기 위해서는 HTML 파일에 그래프를 그릴 공간을 마련해야 합니다.

<canvas id="myChart"></canvas>

위의 코드를 추가하면 해당 위치에 계층적 데이터 그래프가 나타날 것입니다.

결론

Chart.js는 계층적 데이터를 시각화하는 데에 유용한 라이브러리입니다. 데이터를 적절히 구성하고 그래프를 그리는 방법을 이해한다면, 막대 그래프, 원 그래프 등 다양한 종류의 그래프를 사용하여 계층적 데이터를 시각화할 수 있습니다.

…

참고 자료

• Chart.js 공식 문서