企业官网建设流程全解析

Chart.js Tooltip 与交互指南：hover、点击事件与自定义提示框详解

【免费下载链接】Chart.jsSimple HTML5 Charts using thetag项目地址: https://gitcode.com/gh_mirrors/ch/Chart.js

Chart.js是一款基于 HTML5<canvas>标签的轻量级 HTML5 图表库。这份指南面向新手，用最少的话讲透三个核心能力：Chart.js tooltip（提示框）、hover 悬停事件与点击事件（onClick / onHover）——如何配置交互模式、如何自定义提示框内容、如何用 HTML 渲染自定义提示框，帮你从零做出完全可控的交互式图表。📊

一、为什么 Tooltip 默认就能用？

Chart.js 初始化后会自动监听mousemove、mouseout、click、touchstart、touchmove等浏览器事件（见 docs/configuration/interactions.md）。鼠标移到数据点附近，提示框就会自动弹出并跟随指针，无需任何额外代码。

提示框插件的源码位于 src/plugins/plugin.tooltip.js，全部可配置项汇总在官方文档 docs/configuration/tooltip.md 中。

二、快速上手：配置 hover 交互模式

交互行为由options.interaction统一控制，最常用的三个选项：

内置交互模式一览（详细说明见 docs/samples/tooltip/interactions.md）：

想要"鼠标不压住点也显示提示框"的顺滑体验，只需两行配置：

options: { interaction: { mode: 'index', intersect: false } }

三、捕获点击与悬停事件：onClick 与 onHover

图表级事件回调定义在options顶层（完整表格见 docs/configuration/interactions.md）：

activeElements就是当前命中的元素数组，可直接拿到datasetIndex与index。如果想让图表只响应点击（例如做"点选查看明细"的报表），可以用events选项收窄监听范围：

options: { events: ['click'], // 图表只监听点击 onClick: (e, elements, chart) => { // elements 为空 = 点击了空白区域 } }

💡 小贴士：options.plugins.tooltip.events还能单独限制提示框只响应哪些事件，例如tooltip: { events: ['click'] }可实现"点击才出提示框"。

把鼠标坐标换算成数据值

"点在哪，就取哪个值"是最常见的需求，官方提供两个辅助函数即可完成像素→数据的换算（见 docs/configuration/interactions.md）：

onClick: (e) => { const pos = Chart.helpers.getRelativePosition(e, chart); const dataX = chart.scales.x.getValueForPixel(pos.x); const dataY = chart.scales.y.getValueForPixel(pos.y); }

四、hover 高亮：让被悬停的元素更醒目

Chart.js 为每类元素都提供hover前缀选项，悬停时自动切换样式，例如折线/柱状图中常用的：

• hoverBorderWidth: 5—— 加粗边框
• hoverBorderColor: 'green'—— 变绿
• hoverRadius: 8—— 数据点放大

这些样式配置在数据集上即可生效，完整示例见 docs/samples/advanced/programmatic-events.md。

五、自定义提示框内容：callbacks 回调

提示框的文本几乎全部由options.plugins.tooltip.callbacks控制，核心回调：

最常见的改造——给数值加上货币单位（返回undefined则回退默认文本，返回空字符串则整行删除）：

plugins: { tooltip: { callbacks: { label: (ctx) => '$' + ctx.parsed.y.toLocaleString() } } }

回调函数拿到的ctx（即 Tooltip Item Context）包含parsed、raw、dataset、datasetIndex、dataIndex等完整字段，完整字段表见 docs/configuration/tooltip.md。

控制提示框的停靠位置

• position：'average'（默认，取条目平均位置）或'nearest'（跟随最近元素），还可以向Chart.Tooltip.positioners注册自定义定位函数；
• xAlign/yAlign：强制箭头朝向（left/center/right、top/center/bottom）；
• 配色类选项：backgroundColor、titleColor、padding、cornerRadius、displayColors（显示彩色小方块）、usePointStyle（用点样式代替方块）等一应俱全。

带footer汇总的完整示例见 docs/samples/tooltip/content.md，位置模式示例见 docs/samples/tooltip/position.md。

六、进阶：HTML 自定义提示框（external）

Canvas 绘制的提示框样式能力有限。若需要卡片阴影、图标、富文本，可用external选项完全接管渲染——把提示框画在 Canvas 之外的 HTML 元素里：

1. 设置tooltip: { enabled: false, external: handler }；
2. 在handler(context)里创建/复用div，用context.tooltip中的title、body、labelColors组装内容；
3. 当tooltip.opacity === 0时隐藏，否则按caretX/caretY定位并跟随。

官方提供了一份可直接抄作业的完整实现，见 docs/samples/tooltip/html.md 与 docs/configuration/tooltip.md 的 "External (Custom) Tooltips" 章节。✨

七、程序化触发：不用鼠标也能弹出提示框

在"点击列表项 → 图表高亮并弹出提示框"这类联动场景，可以直接用 API 激活元素，无需模拟鼠标事件：

chart.setActiveElements([{ datasetIndex: 0, index: 0 }]); // hover 高亮 chart.tooltip.setActiveElements( [{ datasetIndex: 0, index: 2 }, { datasetIndex: 1, index: 2 }], { x: 200, y: 120 } // 提示框锚点坐标 ); chart.update();

可交互的完整示例见 docs/samples/advanced/programmatic-events.md。

八、总结与参考路径

掌握interaction+events+callbacks三板斧，Chart.js 的交互体验就已经足够应对绝大多数数据看板需求；需要更强表现力时，再用external与setActiveElements打开自定义渲染的大门。🚀

【免费下载链接】Chart.jsSimple HTML5 Charts using thetag项目地址: https://gitcode.com/gh_mirrors/ch/Chart.js