[javascript] Chartist로 원형 차트 그리기

01 Dec 2023

javascript

Chartist는 JavaScript로 작성된 간단하면서도 강력한 차트 라이브러리입니다. 이번에는 Chartist를 사용하여 원형 차트를 그리는 방법에 대해 알아보겠습니다.

Chartist 설치하기

먼저 Chartist를 사용하기 위해 npm을 사용하여 설치해야 합니다. 아래의 명령을 사용하여 Chartist를 설치할 수 있습니다.

npm install chartist --save

원형 차트 그리기

다음은 Chartist를 사용하여 원형 차트를 그리는 예제 코드입니다.

// Chartist 라이브러리 가져오기
const Chartist = require('chartist');

// 데이터 정의하기
const data = {
  series: [20, 10, 30, 40]
};

// 차트 옵션 설정하기
const options = {
  donut: true,
  donutWidth: 60,
  donutSolid: true,
  startAngle: 270,
  showLabel: true
};

// 차트 생성하기
const chart = new Chartist.Pie('.chart-container', data, options);

// 애니메이션 효과 추가하기
chart.on('draw', function(data) {
  if(data.type === 'slice') {
    const pathLength = data.element._node.getTotalLength();
    data.element.attr({
      'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
    });
    const animationDefinition = {
      'stroke-dashoffset': {
        id: 'anim' + data.index,
        dur: 1000,
        from: -pathLength + 'px',
        to:  '0px',
        easing: Chartist.Svg.Easing.easeOutQuint,
        fill: 'freeze'
      }
    };
    if(data.index !== 0) {
      animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
    }
    data.element.attr({
      'stroke-dashoffset': -pathLength + 'px'
    });
    data.element.animate(animationDefinition, false);
  }
});

위의 코드를 실행하면 데이터에 따라 원형 차트가 그려집니다. donut 옵션을 true로 설정하여 도넛 차트를 그릴 수 있으며, donutWidth로 도넛의 두께를 조절할 수 있습니다. startAngle로 차트의 시작 각도를 설정하고, showLabel을 true로 설정하면 각 항목의 레이블이 표시됩니다.

결론

Chartist는 간단한 설정으로 원형 차트를 그릴 수 있는 강력한 JavaScript 라이브러리입니다. Chartist의 다양한 옵션을 활용하여 다양한 원형 차트를 만들어 보세요!

Chartist 설치하기

원형 차트 그리기

결론

참고 자료