在悬停时在堆积条形图上绘制水平线（图表 js）

Posted 2023-03-25

【中文标题】在悬停时在堆积条形图上绘制水平线（图表 js）

【英文标题】：Drawing a horizontal line on a stacked bar chart on hover (chart js)

【发布时间】：2018-12-26 14:18:47

【问题描述】：

我有一个堆积条形图如下：

我想在悬停时绘制一条穿过特定颜色的所有条的水平线。基本上，如果我将鼠标悬停在以下紫色/淡紫色上，我想要以下内容：

我在网上和文档上看了很多，但找不到任何东西。

非常感谢任何帮助；谢谢！

【参考方案1】：

理论上，除了堆叠条形图之外，您还应该能够预渲染 5 个折线图。给每个折线图一个唯一的 id 或 class html 属性，特定颜色的每个段都需要一个对应的 html 类名，例如“chartSegmentPurple”（实际上最好根据颜色代表的内容来命名该类，例如“chartSegmentEconomicInequality” ）。隐藏每个折线图。为您的图表提供一个悬停事件侦听器，然后在事件处理程序中获取类名。使用类名使相应的折线图可见。

【讨论】：

确保为鼠标移出分配另一个事件处理程序以隐藏折线图

感谢您的回答！我会试试这个。