[javascript/jquery] chart.js click event example / 차트 js 클릭 이벤트 예제

[javascript/jquery] chart.js click event example / 차트 js 클릭 이벤트 예제

 

chart.js 를 이용하여

 

차트를 구현하다 보면

 

특정 차트 영역을 클릭했을때,

 

해당 값이나, 라벨을 가져와야 하는 경우가 있습니다.

 

그럴때는

 

아래와 같이 onclick 이벤트를 사용하시면 됩니다.

 

    document.getElementById("myChart").onclick = function(evt) {
        var activePoints = myChart.getElementsAtEvent(evt);

        if(activePoints.length > 0)
        {
            var clickedElementindex = activePoints[0]["_index"];

            var label = myChart.data.labels[clickedElementindex];

            var value = myChart.data.datasets[0].data[clickedElementindex];
        }
    }

 

위 내용처럼

 

label 을 출력하면 label 값이

value를 출력하면 value 값이 각각 나오게 됩니다.

 

 

만약 차트 데이터가 위 이미지와 같다고 가정하고,

 

21이라는 값의 빨간 바를 클릭하면,

 

해당되는 라벨값은 1, 해당 value 값은 21 이 각각 나오게 됩니다.

 

저 데이터를 가지고 원하는 액션을 추가로 취할 수 있습니다.

 

 

아래를 이해를 돕기 위해

 

제가 참고해서 만든 샘플 소스입니다!

 

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>

<div style="width: 900px; height: 900px;">
    <canvas id="myChart"></canvas>
</div>

<script type="text/javascript">
    var context = document
        .getElementById('myChart')
        .getContext('2d');
    var myChart = new Chart(context, {
        type: 'bar', // 차트의 형태
        data: { // 차트에 들어갈 데이터
            labels: [
                //x 축
                '1','2','3','4','5','6','7'
            ],
            datasets: [
                { //데이터
                    label: 'test1', //차트 제목
                    fill: false, // line 형태일 때, 선 안쪽을 채우는지 안채우는지
                    data: [
                        21,19,25,20,23,26,25 //x축 label에 대응되는 데이터 값
                    ],
                    backgroundColor: [
                        //색상
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        //경계선 색상
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1 //경계선 굵기
                }/* ,
                        {
                            label: 'test2',
                            fill: false,
                            data: [
                                8, 34, 12, 24
                            ],
                            backgroundColor: 'rgb(157, 109, 12)',
                            borderColor: 'rgb(157, 109, 12)'
                        } */
            ]
        },
        options: {
            scales: {
                yAxes: [
                    {
                        ticks: {
                            beginAtZero: true
                        }
                    }
                ]
            }
        }
    });

    document.getElementById("myChart").onclick = function(evt) {
        var activePoints = myChart.getElementsAtEvent(evt);

        if(activePoints.length > 0)
        {
            var clickedElementindex = activePoints[0]["_index"];

            var label = myChart.data.labels[clickedElementindex];
            console.log("label : " + label);

            var value = myChart.data.datasets[0].data[clickedElementindex];
            console.log("value : " + value);
        }
    }
</script>

 

참고들 하세요!