[javascript] Chartist에서 차트의 데이터 라벨 추가하기

01 Dec 2023

javascript

Chartist는 간단하고 유연한 차트 라이브러리로 많은 차트 유형을 지원합니다. 이 라이브러리를 사용하여 데이터 라벨을 차트에 추가할 수 있습니다. 이번 예제에서는 Chartist를 사용하여 차트의 막대 그래프에 데이터 라벨을 추가하는 방법을 알아보겠습니다.

1. Chartist 설치하기

먼저, Chartist를 설치해야 합니다. 다음의 명령을 터미널 또는 명령 프롬프트에서 실행하여 Chartist를 설치합니다.

npm install chartist --save

2. HTML 파일 준비하기

다음으로, HTML 파일을 생성하고 Chartist를 사용할 준비를 해야 합니다. 다음은 간단한 예제를 위한 HTML 코드입니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="chartist.css">
</head>
<body>
  <div id="chart"></div>

  <script src="chartist.js"></script>
  <script src="app.js"></script>
</body>
</html>

3. JavaScript 코드 작성하기

이제 JavaScript 파일을 생성하고 데이터 라벨을 추가하는 코드를 작성해야 합니다. 다음은 데이터 라벨을 추가하는 예제 코드입니다.

var data = {
  labels: ['A', 'B', 'C', 'D'],
  series: [[10, 20, 15, 5]]
};

var options = {
  axisX: {
    showGrid: false
  },
  seriesBarDistance: 15,
};

var responsiveOptions = [
  ['screen and (max-width: 640px)', {
    seriesBarDistance: 5,
    axisX: {
      labelInterpolationFnc: function (value) {
        return value[0];
      }
    }
  }]
];

new Chartist.Bar('#chart', data, options, responsiveOptions).on('draw', function (data) {
  if (data.type === 'bar') {
    data.element.attr({
      style: 'stroke-width: 30px'
    });

    var value = data.value.y.toString();
    data.group.append(new Chartist.Svg('text', {
      x: data.x1 + 16,
      y: data.y1 + 8
    }, '', '', {
      style: 'font-size: 14px; font-weight: bold; text-anchor: middle; fill: white;'
    })).text(value);
  }
});

4. 결과 확인하기

마지막으로, HTML 파일을 웹 브라우저에서 열어서 결과를 확인할 수 있습니다. 이 예제에서는 막대 그래프에 데이터 라벨이 추가되도록 설정되어 있습니다. 데이터 라벨은 막대 그래프의 막대 위에 표시되고, 각 막대에 해당하는 값을 나타냅니다.

위의 예제 코드를 사용하면 Chartist를 사용하여 데이터 라벨을 차트에 추가할 수 있습니다. Chartist에는 다양한 차트 유형과 설정 옵션이 있으므로, 필요에 따라 다른 유형의 차트에 데이터 라벨을 추가할 수도 있습니다.

참고: Chartist 공식 문서를 참조하여 더 자세한 정보를 얻을 수 있습니다.