大家好,
我想請問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,不過我照著做,還是沒辦法........不知道哪裡出錯...
以下是我的程式碼,懇請幫忙
<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"的現象又會消失..