[Chart.js]x라벨 클릭하면 링크로 이동하기(v4.2.1)

https://www.youtube.com/watch?v=HCLkAlm9lPI

 

 

const data = {

            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

            labelsLink: [

                'https://www.chartjs4.com',

                'https://www.naver.com',

                'https://www.google.com',

                'https://www.chartjs4.com',

                'https://www.google.com',

                'https://www.naver.com',

                'https://www.google.com',

            ],

            datasets: [{

                label: 'Weekly Sales',

                data: [18, 12, 6, 9, 12, 3, 9],

                backgroundColor: [

                'rgba(255, 26, 104, 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)',

                'rgba(0, 0, 0, 0.2)'

                ],

                borderColor: [

                'rgba(255, 26, 104, 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)',

                'rgba(0, 0, 0, 1)'

                ],

                borderWidth: 1

            }]

        };

        // config

        const config = {

        type: 'bar',

        data,

        options: {

            scales: {

            y: {

                beginAtZero: true

            }

            }

        }

        };

        // render init block

        const ctx = document.getElementById('myChart');

        const myChart = new Chart(

            ctx,

            config

        );

        function clickableScales(canvas, click){

            //x라벨 위치 찾기

            const height = myChart.scales.x.height;

            const top = myChart.scales.x.top;

            const bottom = myChart.scales.x.bottom;

            const left = myChart.scales.x.left;

            const right = myChart.scales.x.maxWidth / myChart.scales.x.ticks.length;

            let resetCoordinates = canvas.getBoundingClientRect();

            const x = click.clientX - resetCoordinates.left;

            const y = click.clientY - resetCoordinates.top;

            //x라벨 위치값 반복문으로 설정

            for(let i = 0; i < myChart.scales.x.ticks.length; i++) {

                if(x >= left + (right * i) && x <= right + (right * i) && y >= top && y <= bottom) {

                    console.log(myChart.config.data.labelsLink[i])

                    window.open(myChart.config.data.labelsLink[i])

                }                

            }

        }

        ctx.addEventListener('click', (e) => {

            clickableScales(ctx, e)

            //차트 크기가 변경되면 오류가 나니까 추가

            myChart.resize();

            // myChart.update();

        })