charjs 클릭 이벤트 관련

chartjs.js 차트를 사용하다가

그래프 클릭시 이벤트발생을 시키고 싶은경우 사용한다

 

options: {
        onClick: function(point, event){
          console.log('event : ', event);
          console.log('point : ', point);
        },
      },

위 항목에서 바뀌는건

event 에 index항목이며 이를 사용 가능하다

 

event[0]['index'] 값으로 체크 가능

 

출처 : https://ayoteralab.tistory.com/entry/Vuejs-17-use-chartjs-event-and-label-plugin-listeners

[Vue.js] 17. use chart.js event and label plugin listeners

 

플러그인은 차트가 아니라 차트 위에 문자클릭시 사용

플러그인에서 한번 더 씌워줘야 작동한다

 

datasets: [{
      datalabels: {
        listeners: {
          click: function(context) {
            // Receives `click` events only for labels of the first dataset.
            // The clicked label index is available in `context.dataIndex`.
            console.log('label ' + context.dataIndex + ' has been clicked!');
          }
        }
      }
    }, {
        //...
    }]

데이터셋, 옵션 둘다 활용가능하다.

 

 

플러그인 : https://chartjs-plugin-datalabels.netlify.app/guide/events.html#listeners

Events | chartjs-plugin-datalabels