如何为Rickshaw图例实现提示框（Tooltip）功能？

Rickshaw确实没有内置的图例悬停提示功能，你推测的通过遍历图例元素添加title属性的思路是可行的，具体实现步骤如下：

1. 创建图表和图例实例
   先确保你已经初始化了Rickshaw图表和图例，示例代码如下：

   // 初始化图表（示例）
   var graph = new Rickshaw.Graph({
     element: document.getElementById('chart'),
     series: [
       { name: '用户访问量', data: [...], color: '#c05020' },
       { name: '订单量', data: [...], color: '#30c020' },
       // 更多系列...
     ]
   });
   graph.render();
   
   // 初始化图例
   var legend = new Rickshaw.Graph.Legend({
     graph: graph,
     element: document.getElementById('legend-container')
   });
   

2. 遍历图例条目并添加悬停提示
   Rickshaw的图例条目会被渲染到legend.list对应的<ul>元素中，每个<li>就是一个系列的图例项。你可以直接遍历这些<li>元素，给它们添加title属性：

   // 获取所有图例条目
   const legendItems = legend.list.querySelectorAll('li');
   
   // 遍历每个条目，绑定提示文本
   legendItems.forEach((item, index) => {
     // 从series中取名称作为提示文本，也可以自定义内容
     const tooltipText = graph.series[index].name;
     item.setAttribute('title', tooltipText);
   });
   

3. 自定义提示文本（可选）
   如果需要更复杂的提示内容（比如系列的描述、统计数据等），可以直接替换tooltipText的值，比如：

   const avgValue = calculateAverage(graph.series[index].data);
   const tooltipText = `${graph.series[index].name} - 近7天平均: ${avgValue}`;
   item.setAttribute('title', tooltipText);
   

这样用户鼠标悬停在图例条目上时，就会显示对应的提示文本了。

内容的提问来源于stack exchange，提问作者plong