Chartist.js는 웹에서 차트를 생성하고 조작할 수 있는 JavaScript 라이브러리입니다. 이 라이브러리는 다양한 차트 유형을 지원하며 사용하기 간편한 API를 제공합니다.

차트를 생성하고 데이터를 표시하는 것 이외에도 Chartist.js는 이벤트 핸들링 기능을 제공하여 사용자의 상호작용에 응답할 수 있습니다. 예를 들어 차트 항목을 클릭하거나 마우스를 호버할 때 원하는 동작을 수행하도록 설정할 수 있습니다.

이벤트 핸들러 등록하기

Chartist.js에서 이벤트 핸들러를 등록하려면 on 메서드를 사용해야 합니다. 다음은 click 이벤트에 대한 핸들러를 등록하는 예제입니다.

new Chartist.Line('.chart', {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    { name: 'Series 1', data: [1, 2, 3, 4, 5] },
    { name: 'Series 2', data: [5, 4, 3, 2, 1] }
  ]
}, {
  chartPadding: {
    right: 40
  }
}).on('click', function(event) {
  console.log('Clicked on chart');
});

위 코드에서 .chart는 차트를 렌더링할 요소의 클래스나 ID입니다. 이 코드는 .chart 요소에 클릭 이벤트 핸들러를 등록하는데, 클릭 시 콘솔에 ‘Clicked on chart’라는 메시지를 출력합니다.

이벤트 핸들러에서 데이터 접근하기

이벤트 핸들러에서는 event 매개변수를 통해 발생한 이벤트에 대한 정보를 얻을 수 있습니다. 해당 이벤트를 통해 사용자가 클릭한 항목의 데이터에 접근할 수 있습니다. 예를 들어, 다음은 클릭한 항목의 레이블과 데이터를 출력하는 예제입니다.

new Chartist.Line('.chart', {
  labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
  series: [
    { name: 'Series 1', data: [1, 2, 3, 4, 5] },
    { name: 'Series 2', data: [5, 4, 3, 2, 1] }
  ]
}, {
  chartPadding: {
    right: 40
  }
}).on('click', function(event) {
  var label = event.axisX.ticks[event.index];
  var seriesName = event.series.name;
  var value = event.series.data[event.index];

  console.log('Clicked on', label, 'of', seriesName, 'with value', value);
});

위 코드에서 event.axisX.ticks[event.index]를 통해 클릭한 항목의 레이블을 가져올 수 있고, event.series.name을 통해 해당 항목이 속한 시리즈의 이름을 가져올 수 있습니다. 마지막으로 event.series.data[event.index]를 통해 해당 항목의 데이터를 가져올 수 있습니다.

결론

Chartist.js의 이벤트 핸들링 기능은 사용자와 웹 차트 간의 상호작용을 원활하게 만들어줍니다. 위의 예제를 활용하여 차트를 클릭하거나 마우스 호버 시 원하는 동작을 추가하고 개인적인 요구사항에 맞게 활용해보세요.

참고 문서: Chartist.js 공식 문서