iT邦幫忙

0

ChartJS的x軸標籤的hover跟onclick事件,無法執行

  • 分享至 

  • xImage

大家好,
我想請問chart.js v3版本的x軸標籤的hover跟onclick事件,要怎麼實現呢?
我的環境是Vite、Vue3、Chart.js v3。
目前我找到的資料,是說chart.js提供的onClick跟onHover函式,只能使用在紅色框框裡

options:{
    //長條圖的滑鼠hover
    onHover: (evt, activeEls) => {
        activeEls.length > 0 ? evt.chart.canvas.style.cursor = 'pointer' : evt.chart.canvas.style.cursor = 'default';
    },
    //長條圖的click事件
    onClick: (evt, el, chart) => {
        if(el[0]){
            console.log('這是el',el[0].index);
        }               
    } 
}

我試著使用套件chartjs-plugin-datalabels,chartjs-plugin-datalabels官網
官網上寫說,有支援lable的hover跟onclick,不過我照著做,還是沒辦法........不知道哪裡出錯...
/images/emoticon/emoticon20.gif
以下是我的程式碼,懇請幫忙

<script setup>
    import { onMounted,ref } from '@vue/runtime-core';
    import Chart from 'chart.js/auto';
    //(1)import
    import ChartDataLabels from 'chartjs-plugin-datalabels';

    onMounted(()=>{
        const ctx = document.getElementById('myChart');
        ctx.width = 200;
        ctx.height = 200;
        // (2)registers them for all your charts
        Chart.register(ChartDataLabels); 

        const myChart = new Chart(ctx, {
            type: 'bar',
            //(3)register plugin for only this chart
            plugins: [ChartDataLabels], 
            data: {
                labels: ['Red', 'Blue'],
                datasets: [{
                    label: '',
                    data: [12, 19],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)'    
                    ],
                    borderWidth: 1,
                    barThickness: 25,
                    datalabels: {
                        //(5)監聽onclick事件
                        listeners: {
                            click: function(context) {
                                console.log('label ' + context.dataIndex + ' 被按到了!');
                            }
                        }
                    }
                }]
            },
            options: {
                //(4)啟動事件選單,之後才能被觸發
                events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove'],
                layout:{
                    padding:{
                        top:20
                    }
                },
                bezierCurve : false,
                animations:false,
                scales: {
                    y: {
                        beginAtZero: true,
                        grid:{
                            color: (ctx) => (ctx.tick.value === 0 ? 'rgba(0, 0, 0, 0.1)' : 'transparent'),
                            drawBorder: false,//隱藏y軸(但還有x=0的網格)
                        },
                        suggestedMax: 10  
                    },
                    x:{
                        grid:{
                            drawBorder: false,//隱藏y軸(但還有x=0的網格)
                        }
                    }
                },
                plugins: {
                    datalabels: {
                        anchor: 'end', 
                        align: 'end',
                        formatter: (val) => (`${val}%`),
                        labels: {
                            value: {
                                color: 'blue'
                            }
                        },
                        //(5)監聽hover事件
                        listeners: {
                            enter: function(context) {
                                context.hovered = true;
                                return true;
                            },
                            leave: function(context) {
                                context.hovered = false;
                                return true;
                            }
                        }
                    },
                    legend:false
                },
                //長條圖的滑鼠hover
                onHover: (evt, activeEls) => {
                    activeEls.length > 0 ? evt.chart.canvas.style.cursor = 'pointer' : evt.chart.canvas.style.cursor = 'default';
                },
                //長條圖的click事件
                onClick: (evt, el, chart) => {
                    if(el[0]){
                        console.log('這是el',el[0].index);
                    }               
                } 
            }
        })
    })
</script>

<template>
    <div class="canvasSize">
        <canvas id="myChart"></canvas>
    </div>  
</template>

<style scoped>
    .canvasSize{
        width: 200px;
        height: 200px;
    }
</style>

-----更新說明-----
上面的code會有個bug,如果從長條圖一路滑下去到x軸的lable,
就會發生暫時地"偽hover"的現象,
如果滑鼠再去碰一次長條圖,
再次啟動長條圖的hover,"偽hover"的現象又會消失..

看更多先前的討論...收起先前的討論...
Homura iT邦高手 1 級 ‧ 2021-12-02 16:17:12 檢舉
我試了可以耶
只是我沒用vue @@
greenriver iT邦研究生 4 級 ‧ 2021-12-03 08:58:58 檢舉
我用純html重試了一次,還是不行耶
它會有個bug,如果從長條圖一路滑下去到x軸的lable,
就會發生暫時地"偽hover"的現象,
如果滑鼠再去碰一次長條圖,
再次啟動長條圖的hover,"偽hover"的現象又會消失..
示意圖,我更新在文章最下面~
Homura iT邦高手 1 級 ‧ 2021-12-03 13:56:25 檢舉
你意思是要在X軸上也要有作用嗎?
greenriver iT邦研究生 4 級 ‧ 2021-12-03 14:20:58 檢舉
對阿
希望X軸的標籤上 : Red、Blue,也會有hover跟onclick事件
Homura iT邦高手 1 級 ‧ 2021-12-03 17:28:59 檢舉
有找到一篇有你要的效果, 只是他是用v2
https://stackoverflow.com/questions/49059722/chart-js-hover-labels-to-display-data-for-all-data-points-on-x-axis
但是在v3沒這效果...
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答