Chart.js에서 원형 차트에 onclick 추가

개요

클릭한 요소마다 다른 움직임을 하고 싶을 때 고생했기 때문에 메모 대신
(초학자이므로 실수 등 있을지도 모릅니다)

샘플 코드

sample.html

<!DOCTYPE html>

<head>
    <title>Pie Chart</title>
</head>

<body>
    <canvas id='myChart'></canvas>

    <script src='http://code.jquery.com/jquery-3.3.1.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js'></script>
    <script src='sample.js'></script>
</body>

</html>

sample.js

let myChart = new Chart(ctx, {
    type: 'pie',
    data: data = {
        labels: ['Red', 'Yellow', 'Blue'],
        datasets: [{
            data: [10, 20, 30],
            backgroundColor: ['#FF0000', '#00FF00', '#0000FF']
        }],
    },
});


$('#myChart').on('click', (evt) => {
    // クリックされたアイテムの取得
    const activePoints = myChart.getElementsAtEvent(evt);

    if (activePoints.length > 0) {
        // クリックされた配列の番号
        const clickedElementindex = activePoints[0]['_index'];

        // クリックされた要素の内容
        const label = myChart.data.labels[clickedElementindex];

        if (label === 'Red') {
            console.log('Red');
        }
        else if (label === 'Yellow') {
            console.log('Yellow');
        }
        else if (label === 'Blue') {
            console.log('Blue');
        }
    }
});

결과

요약

label을 if문으로 판정하고 있으므로 방법으로서 그다지 아름답지 않을까라고 생각하거나. . .
밀렸을 때에 myChart.update()로 그래프를 갱신하거나 하면 표현의 폭이 넓어질 것 같네요!

Reference

이 문제에 관하여(Chart.js에서 원형 차트에 onclick 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yuta-kawanaga/items/8d03ea1f87452bf1e0e6

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다