Chartist는 JavaScript로 작성된 시각화 라이브러리입니다. 이 라이브러리를 사용하여 시간대별 데이터를 시각화하고자 할 때, 데이터를 시간대별로 그룹화하여 표시하는 방법을 알아보겠습니다.

데이터 형식

Chartist에서 시간대별 데이터를 표시하기 위해서는 먼저 데이터가 올바른 형식으로 구성되어 있어야 합니다. 예를 들어, 다음과 같은 형식의 시간과 값으로 구성된 배열을 가지고 있다고 가정해 봅시다:

const data = [
  {time: '2021-01-01 09:00:00', value: 10},
  {time: '2021-01-01 10:00:00', value: 14},
  {time: '2021-01-01 11:00:00', value: 8},
  {time: '2021-01-01 12:00:00', value: 12},
  // ...
];

데이터 시간대별 그룹화하기

Chartist에서 데이터를 시간대별로 그룹화하기 위해 나는 Lodash 라이브러리의 groupBy 함수를 사용하겠습니다. 이 함수를 사용하면 데이터를 시간대로 그룹화할 수 있습니다.

const groupedData = _.groupBy(data, function(item) {
  return item.time.substring(0, 13); // 시간대는 년-월-일 시:00:00 형식으로 잘라냄
});

그룹화된 데이터를 사용하여 차트 그리기

이제 그룹화된 데이터를 사용하여 Chartist로 차트를 그릴 수 있습니다. 예를 들어, 각 시간대별로 평균 값을 사용하여 라인 차트를 그리려면 다음과 같이 할 수 있습니다:

// 데이터 그룹화와 평균값 계산
const groupedData = _.groupBy(data, function(item) {
  return item.time.substring(0, 13);
});

const chartData = [];

for (const time in groupedData) {
  const average = _.meanBy(groupedData[time], 'value');
  chartData.push({x: time, y: average});
}

// Chartist로 차트 그리기
new Chartist.Line('.my-chart', {
  series: [chartData]
}, {
  // 차트 설정
});

위의 코드에서 chartData 배열을 생성하여 표시하고자 하는 시간대별 평균 값으로 채웁니다. 그런 다음 Chartist의 Line 객체를 사용하여 .my-chart 클래스를 가진 요소에 차트를 그립니다.

마치며

이번 글에서는 Chartist를 사용하여 시간대별로 데이터를 그룹화하여 차트를 그리는 방법에 대해 소개했습니다. Chartist의 다양한 기능을 활용하여 데이터 시각화를 더욱 풍부하게 만들 수 있습니다. 자세한 내용은 Chartist 공식 문서를 참조하시기 바랍니다.

참고 문서:

• Chartist 공식 문서