[javascript] ApexCharts에서 차트에 브레드크럼 생성하기
ApexCharts는 JavaScript 기반의 오픈소스 차트 라이브러리입니다. 브레드크럼은 차트 위에 제목의 계층 구조를 표시하여 사용자가 손쉽게 차트를 탐색할 수 있도록 도와줍니다. 이 글에서는 ApexCharts를 사용하여 차트에 브레드크럼을 생성하는 방법을 알아보겠습니다.
ApexCharts 설치하기
먼저 ApexCharts를 설치해야 합니다. npm을 사용한다면 다음 명령어를 실행하여 ApexCharts를 설치하세요.
npm install apexcharts
브레드크럼 데이터 구성하기
브레드크럼 데이터는 차트의 계층 구조를 나타내기 위해 사용됩니다. 각 계층은 제목과 값을 가지고 있습니다. 아래와 같이 계층 구조를 나타내는 배열을 생성하세요.
const breadcrumbData = [
{ title: '전국', value: '전국' },
{ title: '서울', value: '시도:서울' },
{ title: '강남구', value: '시군구:강남구' },
];
브레드크럼 설정하기
ApexCharts의 브레드크럼은 chart.toolbar 객체의 breadcrumb 속성을 통해 설정할 수 있습니다. 아래와 같이 브레드크럼 관련 설정을 추가하세요.
const options = {
chart: {
toolbar: {
breadcrumb: {
show: true,
offsetY: 20,
formatter: function (value) {
return value.title;
},
},
},
},
};
show: true: 브레드크럼을 표시합니다.offsetY: 20: 브레드크럼의 수직 위치를 조정합니다.formatter: function (value) { return value.title; }: 브레드크럼의 표시 형식을 설정합니다. 위의 예제는 제목을 표시하는 설정입니다.
차트에 브레드크럼 적용하기
설정을 마쳤다면 이제 차트에 브레드크럼을 적용해야 합니다. chart 객체의 breadcrumbs 속성에 방금 생성한 브레드크럼 데이터를 할당하세요.
const chart = new ApexCharts(document.getElementById('chart'), options);
chart.breadcrumbs = breadcrumbData;
chart.render();
결론
ApexCharts를 사용하면 쉽게 차트에 브레드크럼을 생성할 수 있습니다. 브레드크럼을 통해 사용자는 차트의 계층 구조를 시각적으로 파악할 수 있어 더 편리하게 데이터를 분석할 수 있습니다.