如何在Vue Chart.js中处理数据标签的事件？

我懂你想要的效果啦——当鼠标悬停在X轴的月份标签上时，自动显示对应柱状条的tooltip信息对吧？这在Vue结合Chart.js的场景下完全可以实现，咱们直接基于你的现有代码来修改：

先看一下你的图表效果：

接下来我会给出修改后的完整代码，关键是通过配置Chart.js的tooltip行为，以及给图表添加鼠标事件监听来实现需求：

<template>
  <!-- 给Bar组件绑定鼠标移动事件，用于监听标签悬停 -->
  <Bar :data="data" :options="options" ref="chartRef" @mousemove="handleMouseMove" />
</template>

<script setup>
import { ref } from 'vue'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale
} from 'chart.js'
import { Bar } from 'vue-chartjs'

ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend)

// 定义图表引用，用于获取Chart实例
const chartRef = ref(null)

export const data = {
  labels: [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
  ],
  datasets: [
    {
      label: 'Data One',
      backgroundColor: '#f87979',
      data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
    }
  ]
}
export const options = {
  responsive: true,
  maintainAspectRatio: false,
  // 配置Tooltip行为，设置为索引模式，这样悬停时会显示对应索引的所有数据
  tooltip: {
    mode: 'index',
    intersect: false,
    // 可选：自定义tooltip的样式或内容
    callbacks: {
      label: function(context) {
        return `${context.dataset.label}: ${context.parsed.y}`
      }
    }
  },
  // 配置鼠标事件，允许在标签区域触发hover
  hover: {
    mode: 'index',
    intersect: false
  }
}

// 处理鼠标移动事件，手动触发tooltip
const handleMouseMove = (event) => {
  const chart = chartRef.value?.chartInstance
  if (!chart) return

  // 获取鼠标在图表中的位置匹配的元素
  const position = chart.getElementsAtEventForMode(event, 'nearest', { intersect: false }, true)
  if (position.length) {
    const index = position[0].index
    // 手动显示对应索引的tooltip
    chart.tooltip.setActiveElements([{ datasetIndex: 0, index }])
    chart.update()
  } else {
    // 鼠标离开有效区域时隐藏tooltip
    chart.tooltip.setActiveElements([])
    chart.update()
  }
}
</script>

关键修改点说明： #

• 给Bar组件添加了ref用来获取Chart实例，同时绑定了@mousemove事件监听鼠标位置
• 在options里配置了tooltip和hover的mode为index，并关闭intersect，这样不需要精确悬停在柱状条上就能触发tooltip
• 新增了handleMouseMove方法，通过Chart实例的API手动控制tooltip的显示和隐藏，确保悬停在标签上时能精准触发对应数据的tooltip

这样修改后，当你的鼠标悬停在任何一个月份标签上时，就会自动弹出对应月份的柱状数据tooltip啦～

备注：内容来源于stack exchange，提问作者Chiara Ani