React Chart.js 禁用单个数据集的交互性

Question

我目前正在开发一个 Web 应用程序，其中使用 Chart.js 来显示包含多个数据集的折线图。该图表包含两个数据集，第一个数据集包含主要数据点，第二个数据集包含 2 个数据点，一个在开头，一个在结尾，以虚线填充整个图表。目标是仅显示第一个数据集中的点的工具提示，并防止为第二个数据集中的点激活工具提示。

问题： 我希望仅针对第一个数据集中的点激活工具提示，无论光标距离第二个数据集中的点有多近。将鼠标悬停在图表上时，我希望仅针对第一个数据集中的点显示工具提示，而不会由第二个数据集中的点触发。

有人可以提供如何实现这一目标的指导吗？有没有办法修改 Chart.js 工具提示行为以防止第二个数据集中出现工具提示/任何交互？任何有助于解决此问题的见解或代码示例将不胜感激。

提前感谢您的帮助！

第二个数据集如何激活：

当光标位于图表的第二半时应该如何：

我尝试了各种方法来控制工具提示激活，但第二个数据集的工具提示不断被激活。

Answer 1

我建议使用 chartjs-plugin-annotation 来绘制第二条线，而不是第二个数据集。那么您根本不必担心交互性。

如果您想坚持使用当前的方法，那么工具提示插件提供了很多选项 - 最简单的可能是添加一个 filter 来排除第二个数据集。