[javascript] Chartist에서 중첩된 차트 그리기

01 Dec 2023

javascript

Chartist.js는 사용하기 쉬운 자바스크립트 라이브러리로, 다양한 유형의 차트를 그릴 수 있습니다. 이번 튜토리얼에서는 Chartist.js를 사용하여 중첩된 차트를 그리는 방법을 알아보겠습니다.

Chartist.js와 필수 파일 가져오기

Chartist.js를 사용하기 위해 먼저 필요한 파일들을 다운로드하고 HTML 파일에 추가해야 합니다. 아래의 CDN 링크를 이용하여 필요한 파일들을 가져옵니다.

<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
    <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
  </head>
  <body>
    <div id="chart"></div>
  </body>
</html>

중첩된 차트 생성하기

중첩된 차트를 생성하기 위해서는 Chartist.js의 Pie 차트와 Bar 차트를 함께 사용하면 됩니다. 아래의 예제 코드에서는 Pie 차트와 Bar 차트를 함께 사용하여 중첩된 차트를 그립니다.

var data = {
  labels: ['A', 'B', 'C', 'D', 'E'],
  series: [
    [20, 10, 30, 15, 25],
    [10, 20, 15, 25, 30]
  ]
};

var options = {
  seriesBarDistance: 10
};

new Chartist.Pie('#chart', data, {
  width: 300,
  height: 300,
  donut: true,
  showLabel: true
});

new Chartist.Bar('#chart', data, options);

위의 코드에서 data 객체에는 두 개의 데이터 시리즈가 포함되어 있습니다. 첫 번째 시리즈는 Pie 차트의 파이 그래프를, 두 번째 시리즈는 Bar 차트의 바 그래프를 생성합니다. options 객체는 Bar 차트의 모양을 조정하는 옵션입니다.

결과 확인하기

위의 코드를 HTML 파일에 추가하고 웹 브라우저에서 실행하면, 중첩된 차트가 그려지는 것을 확인할 수 있습니다.

Chartist.js를 사용하면 다양한 옵션을 조정하여 원하는 모양과 스타일의 차트를 그릴 수 있습니다. 공식 문서와 예제를 참조하여 더 많은 기능을 살펴보세요.

Chartist.js와 필수 파일 가져오기

중첩된 차트 생성하기

결과 확인하기

참고 자료