워터폴 차트는 수입과 지출을 비교하는 데 사용되는 데이터 시각화 도구입니다. Highcharts는 강력하고 유연한 차트 라이브러리이며, 워터폴 차트를 만드는 데 매우 유용합니다. 이 글에서는 Highcharts를 사용하여 워터폴 차트를 만드는 방법을 다룰 것입니다.
Highcharts 설치
Highcharts를 사용하려면 먼저 해당 라이브러리를 설치해야 합니다. 아래의 명령어를 사용하여 Highcharts를 설치할 수 있습니다.
npm install highcharts
또는 CDN을 사용하여 Highcharts 스크립트를 로드할 수 있습니다.
<script src="https://code.highcharts.com/highcharts.js"></script>
데이터 준비
워터폴 차트는 일련의 스택된 막대로 표시되는데, 각 막대는 이전 막대의 값에 따라 상승하거나 하강합니다. 따라서 우리는 각 막대의 수입 및 지출 값을 포함하는 데이터를 준비해야 합니다. 아래는 예시 데이터입니다.
const data = [
{ category: '수입', value: 5000 },
{ category: '지출', value: -2000 },
{ category: '수입', value: 3000 },
{ category: '지출', value: -1000 },
{ category: '지출', value: -500 },
];
차트 생성하기
Highcharts를 사용하여 워터폴 차트를 생성하는 방법은 매우 간단합니다. 먼저, 차트 컨테이너 요소를 HTML 문서에 추가합니다.
<div id="chartContainer"></div>
그런 다음, JavaScript 코드를 사용하여 Highcharts를 초기화하고 워터폴 차트를 생성합니다.
Highcharts.chart('chartContainer', {
chart: {
type: 'waterfall'
},
title: {
text: '워터폴 차트'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: '금액'
}
},
series: [{
name: '수입/지출',
data: data
}]
});
위의 코드에서 주요 속성은 다음과 같습니다.
chart: 차트의 유형을 설정합니다. 여기서는waterfall을 사용합니다.title: 차트 제목을 설정합니다.xAxis: x축 설정을 지정합니다. 여기서는category유형을 사용합니다.yAxis: y축 설정을 지정합니다.series: 차트에 표시할 데이터를 설정합니다.
추가 설정
차트에는 다양한 추가 설정을 적용할 수 있습니다. 수입과 지출의 색상을 다르게 표시하거나 막대의 레이블을 추가하는 등의 작업을 수행할 수 있습니다. Highcharts 문서에서 관련 속성 및 설정에 대한 자세한 내용을 찾을 수 있습니다.
결론
Highcharts를 사용하여 워터폴 차트를 만들 수 있습니다. Highcharts의 다양한 기능과 설정을 활용하여 사용자 지정 차트를 만들 수 있습니다. 추가로 공식 문서와 예제를 참고하면 더욱 풍부한 차트 경험을 만들 수 있습니다.