Chartist는 강력하고 사용하기 쉬운 JavaScript 차트 라이브러리입니다. 이번 포스트에서는 Chartist를 사용하여 콤보 차트를 그리는 방법을 배워보겠습니다.

1. Chartist 설치하기

Chartist를 사용하기 위해서는 먼저 Chartist 라이브러리를 설치해야 합니다. 아래의 명령을 사용하여 npm을 통해 Chartist를 설치합니다.

npm install chartist

2. HTML에 Chartist 스크립트 추가하기

Chartist를 사용하려면 HTML 문서에 Chartist의 스크립트를 추가해야 합니다. <script> 태그를 사용하여 아래의 CDN 링크를 추가합니다.

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

3. 콤보 차트 그리기

이제 Chartist를 사용하여 콤보 차트를 그려보겠습니다. 다음은 예시 코드입니다.

// 데이터 정의하기
var data = {
  labels: ['1월', '2월', '3월', '4월', '5월', '6월'],
  series: [
    [100, 200, 300, 400, 500, 600], // 데이터 시리즈 1
    [200, 300, 400, 500, 600, 700], // 데이터 시리즈 2
    [300, 400, 500, 600, 700, 800]  // 데이터 시리즈 3
  ]
};

// 그래프 옵션 설정하기
var options = {
  fullWidth: true,
  chartPadding: {
    right: 40
  },
  series: {
    'series-1': {
      showArea: true
    },
    'series-2': {
      showLine: false
    },
    'series-3': {
      showPoint: false
    }
  }
};

// 콤보 차트 그리기
new Chartist.Line('#chart', data, options);

위의 코드에서는 data 객체를 통해 데이터를 정의하고, options 객체를 통해 그래프의 옵션을 설정한 뒤, Chartist.Line 생성자를 사용하여 #chart라는 ID를 가진 요소에 콤보 차트를 그립니다.

4. 결과 확인하기

위의 코드를 실행하고 브라우저에서 결과를 확인해보세요. #chart라는 ID를 가진 요소에 콤보 차트가 그려져 있을 것입니다. 데이터와 옵션을 조정하여 원하는 형태의 콤보 차트를 만들어보세요.

참고 자료

• Chartist 공식 문서
• Chartist GitHub 저장소