[javascript] Chartist에서 차트의 누적 값 계산하기

01 Dec 2023

javascript

Chartist는 제공하는 다양한 차트 옵션을 통해 데이터 시각화를 할 수 있는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하여 차트를 생성하고, 데이터의 누적 값을 계산하는 방법에 대해서 알아보겠습니다.

누적 값 계산하기

차트에서 데이터의 누적 값을 계산하기 위해서는 일련의 데이터 포인트를 반복하면서 누적 값을 계산하면 됩니다. 일반적으로 for 루프를 사용하여 데이터를 순회하면서 누적 값을 갱신하는 방법을 사용합니다.

아래는 Chartist를 사용하여 Bar 차트를 생성하고, 데이터의 누적 값을 계산하는 예제 코드입니다.

const data = {
  labels: ['A', 'B', 'C', 'D', 'E'],
  series: [
    [10, 5, 15, 8, 12]
  ]
};

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

// 데이터의 누적 값을 계산
const cumulativeData = [];
let cumulativeValue = 0;

for (let i = 0; i < data.series[0].length; i++) {
  cumulativeValue += data.series[0][i];
  cumulativeData.push(cumulativeValue);
}

console.log(cumulativeData);

위 예제 코드에서는 data 객체에 차트의 라벨과 시리즈 데이터를 정의하고, Chartist.Bar를 사용하여 Bar 차트를 생성합니다. 그 후에는 cumulativeData 배열과 cumulativeValue 변수를 초기화하고, for 루프를 사용하여 데이터를 순회하면서 누적 값을 계산한 뒤 cumulativeData 배열에 추가합니다.

코드를 실행하면 누적 값을 계산한 결과가 콘솔에 출력됩니다.

누적 값 계산하기

참고 자료