本文介绍如何通过原生 DOM 操作为 Rickshaw 图表的图例项动态添加 HTML title 属性，实现简洁有效的悬停提示功能，无需依赖第三方库或修改 Rickshaw 源码。
本文介绍如何通过原生 dom 操作为 rickshaw 图表的图例项动态添加 html `title` 属性，实现简洁有效的悬停提示功能，无需依赖第三方库或修改 rickshaw 源码。
Rickshaw 本身未提供图例（Legend）项的 Tooltip 原生支持，但其图例渲染为标准的 <ul><li></ul> 列表结构，每个图例条目包含一个 <span></span> 标签用于显示系列名称。因此，我们可借助 DOM 遍历，在图例初始化后为每个图例项的 <span></span> 元素注入 title 属性——浏览器将自动将其渲染为原生 tooltip。
以下为完整实现步骤与示例代码：
// 创建图例实例（确保 graph 已初始化）
var legend = new Rickshaw.Graph.Legend({
graph: graph, // 替换为你的 Rickshaw.Graph 实例
element: document.getElementById('legend')
});
// 获取图例中所有 li 元素（注意：legend.element.firstChild 是 ul）
var listItems = legend.element.firstChild.getElementsByTagName('li');
// 遍历每个 li，为其内部 span 设置 title
for (var i = 0; i < listItems.length; i++) {
var span = listItems[i].getElementsByTagName('span')[0];
if (span) {
// 可根据数据动态设置 tooltip 文本，例如关联 series.name 或 metadata
span.title = 'Series: ' + graph.series[i]?.name || 'Unnamed series';
}
}⚠️ 注意事项：
-
legend.element.firstChild通常为<ul></ul>，若图例容器结构被自定义修改，请先验证 DOM 层级； -
graph.series[i]的索引需与图例项顺序严格一致（Rickshaw 默认按 series 数组顺序渲染），建议使用graph.series.forEach((s, idx) => {...})更安全地绑定元数据； - 若启用图例交互（如点击切换可见性），
title属性仍保持有效，不影响原有功能； - 如需更丰富的 tooltip（如富文本、延迟显示、位置控制），建议结合
tippy.js或Tooltipster等库替换title，但需监听图例 DOM 更新（例如在legend.render()后重新绑定）。
该方案轻量、兼容性强，适用于所有 Rickshaw 版本（v1.6+），是快速增强图例可访问性与信息密度的有效实践。
