[javascript] Chartist에서 차트의 데이터 경향 분석하기

01 Dec 2023

javascript

Chartist는 JavaScript로 작성된 간단하고 가벼운 차트 라이브러리입니다. 이것을 사용하여 데이터를 시각화하고 분석할 수 있습니다. 이번 포스트에서는 Chartist를 사용하여 차트의 데이터 경향을 분석하는 방법을 알아보겠습니다.

데이터 준비하기

먼저 Chartist에서 사용할 데이터를 준비해야 합니다. 예를 들어, 매월 판매량 데이터를 사용하려고 한다면 다음과 같이 데이터를 배열로 만들 수 있습니다.

const data = [
  { month: '1월', sales: 100 },
  { month: '2월', sales: 150 },
  { month: '3월', sales: 200 },
  { month: '4월', sales: 120 },
  { month: '5월', sales: 180 },
  { month: '6월', sales: 250 }
];

각 항목은 월(month)과 해당 월의 판매량(sales)을 포함하는 객체입니다.

차트 생성하기

Chartist를 사용하여 데이터를 시각화하기 위해 Chart 객체를 생성해야 합니다. 다음은 막대 그래프를 생성하는 예시입니다.

const chart = new Chartist.Bar('.chart-container', {
  labels: data.map(item => item.month),
  series: [data.map(item => item.sales)]
});

이 코드에서는 chart-container라는 클래스를 가진 HTML 요소에 막대 그래프를 생성하고, labels 배열에는 데이터의 월을, series 배열에는 데이터의 판매량을 넣어줍니다.

데이터 경향 분석하기

이제 차트를 생성했으니 데이터의 경향을 분석해볼 차례입니다. Chartist에서는 Chartist.plugins.ctAxisTitle 플러그인을 사용하여 간단한 분석을 수행할 수 있습니다.

chart.on('draw', function(data) {
  if (data.type === 'grid' && data.axis.units.pos === 'y') {
    data.element.attr({
      'data-tooltip': '평균: ' + average(data.axis.ticks).toFixed(2),
      'data-tooltip-class': 'tooltip'
    });
  }
});

function average(array) {
  const sum = array.reduce((total, value) => total + value, 0);
  return sum / array.length;
}

위 코드에서 draw 이벤트를 사용하여 y축의 그리드 라벨에 도구 설명을 추가합니다. 이 설명에는 해당 그리드 라벨에 대한 판매량의 평균이 표시됩니다. average 함수는 배열의 평균을 계산합니다.

결과 확인하기

이제 HTML 페이지에서 생성한 차트와 데이터 경향 분석 결과를 확인할 수 있습니다.

<div class="chart-container"></div>

<style>
.chart-container {
  width: 400px;
  height: 300px;
}
</style>

<script src="https://cdn.jsdelivr.net/npm/chartist/dist/chartist.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartist-plugin-tooltip/dist/chartist-plugin-tooltip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartist-plugin-axistitle/dist/chartist-plugin-axistitle.min.js"></script>

위의 HTML 코드에서는 Chart와 관련된 스타일과 Chartist 및 관련 플러그인의 스크립트를 가져와야 합니다.

이제 데이터 경향을 분석한 차트를 확인할 수 있습니다.

결론

Chartist를 사용하여 차트의 데이터 경향을 분석하는 방법을 알아보았습니다. 이를 통해 데이터 시각화 및 분석을 통해 더 나은 결정을 내릴 수 있습니다. Chartist의 다른 기능과 플러그인도 사용해보세요.

참고 자료: