[javascript] Chartist 설치 방법

01 Dec 2023

javascript

Chartist는 JavaScript로 작성된 간단하고 유연한 차트 라이브러리입니다. 이 라이브러리를 사용하려면 몇 가지 단계를 따라야합니다. 아래는 Chartist를 설치하기 위한 간단한 가이드입니다.

NPM을 통한 Chartist 설치

Chartist를 사용하려면 먼저 Node.js와 NPM을 설치해야합니다. 설치된 후에는 다음 명령을 사용하여 Chartist를 설치할 수 있습니다.
```
npm install chartist --save
```
이 명령을 실행하면 Chartist 및 해당 종속성이 프로젝트에 설치됩니다.
CDN을 통한 Chartist 설치

CDN을 사용하여 Chartist를 설치하는 것도 가능합니다. HTML 파일의 <head> 태그에 다음 코드를 추가하여 Chartist 스크립트를 로드할 수 있습니다.
```
<script src="https://cdn.jsdelivr.net/npm/chartist"></script>
```
이러한 방법을 사용하면 로컬 환경에서 Chartist를 사용하지 않고도 라이브러리에 접근할 수 있습니다.

Chartist 사용

Chartist를 설치한 후에는 해당 차트 유형 및 구성 요소를 사용할 수 있습니다. 아래는 간단한 Bar 차트를 만드는 예입니다.

// 필요한 모듈 가져오기
import Chartist from 'chartist';

// 데이터 선언
var data = {
  labels: ['월', '화', '수', '목', '금'],
  series: [
    [5, 2, 4, 9, 7]
  ]
};

// 옵션 설정
var options = {
  width: 400,
  height: 300
};

// Bar 차트 생성
new Chartist.Bar('.chart-container', data, options);

이 예제에서는 chart-container라는 클래스를 가진 요소에 Bar 차트를 생성하고 있습니다.

위의 단계를 차례대로 따라가면 Chartist를 프로젝트에 설치하고 사용할 수 있습니다. Chartist 문서를 참조하여 다양한 차트 유형과 구성 요소에 대한 자세한 정보를 알아볼 수도 있습니다.

참조:

Chartist 공식 사이트: https://gionkunz.github.io/chartist-js/
Chartist GitHub 저장소: https://github.com/gionkunz/chartist