기타

charjs 클릭 이벤트 관련

mysop 2022. 3. 23. 15:48
반응형

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

이번 시간에는 vue-chartjs를 통해서 그린 chart에 대해서 마우스를 올렸을 때, tooltips로 자동제공하는 정보가 아닌... 마우스 click이나 기타 event(이벤트)를 발생시켜서 원하는 동작을 하게하는 방법

ayoteralab.tistory.com

 

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

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

 

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

Events This plugin currently supports the following label events: Name Chart events1 Description enter mousemove the mouse is moved over a label leave mousemove the mouse is moved out of a label click click the mouse's primary button is pressed and release

chartjs-plugin-datalabels.netlify.app

 

반응형
1 2 3 4 5 6 7 8 9 10 ··· 19