[javascript] Chartist로 막대 차트 그리기
이번 포스트에서는 Chartist 라이브러리를 사용하여 JavaScript로 막대 차트를 그리는 방법에 대해 알아보겠습니다.
Chartist란?
Chartist는 JavaScript 기반의 간단하고 가벼운 차트 라이브러리입니다. SVG를 사용하여 다양한 종류의 차트를 그릴 수 있으며, 반응형 웹 디자인을 지원합니다.
설치
Chartist는 npm을 통해 설치할 수 있습니다. 다음 명령을 사용하여 설치해보세요:
npm install chartist --save
사용 방법
먼저, Chartist를 HTML 파일에 추가해야 합니다. 다음과 같이 <head> 태그 안에 스크립트를 추가해주세요:
<script src="https://cdn.jsdelivr.net/npm/chartist/dist/chartist.min.js"></script>
다음은 막대 차트를 그리는 예제 코드입니다:
// 데이터 준비
var data = {
labels: ['월', '화', '수', '목', '금'],
series: [
[5, 8, 3, 7, 4] // 막대의 높이 값
]
};
// 차트 옵션 설정
var options = {
high: 10, // y축 최대 값
low: 0, // y축 최소 값
axisX: {
showGrid: false, // x축 그리드 표시 여부
}
};
// 차트 생성
new Chartist.Bar('.chart', data, options);
위 코드에서 '.chart'는 차트를 그릴 요소의 CSS 선택자입니다. 적절한 HTML 요소에 해당 선택자를 적용해야 합니다.
결과 확인
위 코드를 HTML 파일에 추가하고 웹 브라우저에서 실행하면 막대 차트가 표시됩니다. 막대의 높이는 데이터에 따라 다르게 표시되며, x축과 y축의 레이블을 확인할 수 있습니다.
결론
이번 포스트에서는 Chartist를 사용하여 JavaScript로 막대 차트를 그리는 방법에 대해 알아보았습니다. Chartist는 간단하고 가볍지만 다양한 차트를 그릴 수 있는 강력한 도구입니다. 다양한 옵션을 설정하여 자신의 프로젝트에 맞는 차트를 만들어보세요!