[javascript] Chartist에서 범례 추가하기
개요
Chartist는 JavaScript로 구현된 간단하고 유연한 차트 라이브러리입니다. Chartist를 사용하여 생성한 차트에 범례(legend)를 추가하는 방법에 대해 알아보겠습니다.
코드 예제
// 필요한 CSS 파일 가져오기
<link rel="stylesheet" href="chartist.min.css">
// Chartist 패키지 가져오기
<script src="chartist.min.js"></script>
// 차트 생성하기
var chart = new Chartist.Line('.ct-chart', {
labels: ['월', '화', '수', '목', '금'],
series: [
[5, 2, 3, 7, 4],
[3, 4, 2, 9, 5]
]
});
// 범례 추가하기
var legend = new Chartist.legends.legend({
bindto: '.ct-legend',
series: chart.data.series,
names: ['시리즈 1', '시리즈 2']
});
위 예제 코드에서는 chart 객체를 생성하여 labels 배열과 series 배열로 차트를 설정합니다. 그리고 chart 객체를 사용하여 legend 객체를 생성하여 bindto 옵션을 사용하여 범례를 표시할 요소를 지정합니다. series 배열과 names 배열은 차트 시리즈와 각 시리즈의 이름을 나타냅니다.