[javascript] Chartist에서 특정 지점 강조하기

01 Dec 2023

javascript

Chartist는 다양한 유형의 그래프를 지원하며, 이 중에서도 Line Chart를 예로 사용하겠습니다. 특정 지점을 강조하기 위해서는 해당 지점의 데이터에 클래스를 추가해야 합니다. 그런 다음 CSS를 사용하여 강조 효과를 적용할 수 있습니다.

먼저, Chartist를 설치하고 그래프를 생성합니다. 이 예제에서는 npm을 사용하여 Chartist를 설치하고, HTML 파일에서 Chartist 스크립트를 가져올 것입니다:

<!DOCTYPE html>
<html>
<head>
  <title>Chartist Example</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chartist/dist/chartist.min.css">
</head>
<body>
  <div id="chart"></div>

  <script src="https://cdn.jsdelivr.net/npm/chartist/dist/chartist.min.js"></script>
  <script>
    var data = {
      labels: ['A', 'B', 'C', 'D', 'E', 'F'],
      series: [
        [4, 2, 5, 8, 3, 7]
      ]
    };

    var options = {
      lineSmooth: false,
      fullWidth: true
    };

    var chart = new Chartist.Line('#chart', data, options);
  </script>
</body>
</html>

이제 특정 지점을 강조하는 방법을 알아보겠습니다. 예를 들어, ‘C’ 데이터 지점을 강조하고 싶다면, 다음과 같이 코드를 수정합니다:

var chart = new Chartist.Line('#chart', data, options);

chart.on('draw', function (data) {
  if (data.type === 'point' && data.index === 2) { // 'C' 데이터의 인덱스는 2
    data.element._node.classList.add('ct-point-emphasis'); // 강조할 데이터에 클래스 추가
  }
});

위 예제에서는 draw 이벤트 리스너를 사용하여, 데이터 포인트가 그려질 때마다 강조할 데이터를 확인하고 클래스를 추가합니다. 이 경우에는 ct-point-emphasis 클래스를 추가하였습니다.

마지막으로, CSS를 사용하여 강조 효과를 적용합니다. 원하는 스타일을 지정하여 강조 효과를 만들 수 있습니다. 예를 들어, 다음과 같이 CSS를 작성할 수 있습니다:

.ct-point-emphasis {
  r: 7; // 데이터 포인트 크기 변경
  fill: red; // 데이터 포인트 색상 변경
}

위 예제에서는 ‘C’ 데이터 포인트를 빨간색으로 강조하고, 크기를 조정했습니다.

위의 코드를 사용하여, Chartist에서 특정 지점을 강조하는 방법을 알 수 있습니다. Chartist를 사용하면 더욱 다양하고 유연한 데이터 시각화를 구현할 수 있습니다.