本文详解如何在 Chart.js 中通过返回数组而非字符串，使自定义 tooltip 的 label 支持换行显示，完美解决 "\n" 在 label 回调中失效的问题。适用于展示嵌套对象（如各月份订阅明细）的垂直列表需求。
本文详解如何在 chart.js 中通过返回数组而非字符串，使自定义 tooltip 的 label 支持换行显示，完美解决 `"\n"` 在 label 回调中失效的问题。适用于展示嵌套对象（如各月份订阅明细）的垂直列表需求。
在 Chart.js 中，tooltips.callbacks.label 函数默认将返回值作为单行文本渲染——即使你拼接了 \n 换行符，Chart.js 也不会解析为换行，而是直接显示为字符或忽略。这是因为 Chart.js 的 tooltip label 渲染逻辑对字符串中的换行符不敏感；真正的换行支持，是通过返回一个字符串数组来触发的。
✅ 正确做法是：在 label 回调中，不拼接成单一字符串，而是将每条订阅明细（如 "3x java mujor 12 (seanca): 7"）作为独立元素 push 到数组中，最后 return 该数组。Chart.js 会自动为数组中每个元素创建一行 tooltip 内容，并添加默认缩进与分隔样式。
以下是修正后的关键代码段（适配 Chart.js v2.x，兼容主流版本）：
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
const labelArr = [];
const subscriptions = data.tooltipText[tooltipItem.index]; // 对应当前悬停点的订阅对象
for (const key in subscriptions) {
if (subscriptions.hasOwnProperty(key)) {
labelArr.push(`${key}: ${subscriptions[key]}`);
}
}
return labelArr; // ✅ 返回数组 → 触发多行渲染
},
title: function(tooltipItems, data) {
const index = tooltipItems[0].index;
return `${data.labels[index]} Total: ${data.datasets[0].data[index]}`;
}
},
displayColors: false,
intersect: false,
mode: 'index' // 推荐启用，确保同一 X 轴位置所有数据点 tooltip 合并显示
}
⚠️ 注意事项：
-
不要使用 \n 或
：Chart.js tooltip 不支持 HTML 或原始换行符渲染（除非启用 custom tooltip，但代价高、不必要）； - 必须返回数组：label 回调返回 string[] 是官方支持的多行方案，无需额外配置；
- 避免空值异常：建议在遍历 subscriptions 前增加 if (subscriptions && typeof subscriptions === 'object') 安全判断；
- mode: 'index' 很重要：配合 intersect: false，可确保鼠标悬停在折线区域时准确匹配对应月份索引，避免 tooltip 错位；
- tooltipText 字段名非标准：你将其挂载在 data.tooltipText 是可行的，但更规范的做法是通过 data.datasets[0]._meta 或自定义 chart.data 属性传递，避免与 Chart.js 内部属性冲突。
? 小技巧：若需进一步美化（如加粗标题、对齐数值），可结合 beforeLabel / afterLabel 钩子，或升级至 Chart.js v3+ 使用 external tooltip 实现完全自定义 DOM 渲染——但对于纯多行文本需求，数组返回法简洁、高效、零依赖，是最佳实践。
