在条形/线的鼠标悬停时显示 ChartJS 工具提示答案

【问题标题】：Displaying ChartJS tooltip on mouseover of bar/line在条形/线的鼠标悬停时显示 ChartJS 工具提示
【发布时间】：2023-03-16 16:11:01
【问题描述】：

我有以下代码，它显示了一个包含一条线和一些条的图表。当我将鼠标悬停在线点上时，我会看到该线点的工具提示，这是完美的。当我将鼠标悬停在任何条上时，我会看到每个条和线的工具提示，这很糟糕。如何显示仅显示我悬停的特定栏（以及相交线（如果存在））的工具提示？

FWIW 我已经尝试了基于 chartjs 文档的工具提示/悬停选项的几种变体，但我无法让任何特定的组合起作用。

  tooltips: {
    mode: 'point',
  },
  hover: {
    mode: 'point',
  },

文档在这里：

谢谢！

【问题讨论】：

标签： chart.js

【解决方案1】：

在您的实现中，删除那段代码。

  tooltips: {
    mode: 'point',
  },
  hover: {
    mode: 'point',
  },

然后在tooltips下面几行添加mode：

tooltips: {
  mode: 'point',
  callbacks: {}
}

由于向下的点位于条形图的范围内，因此它们在技术上并不相交。

但是，如果您确实在范围内创建了一个点，它将能够在工具提示上拾取它。

【讨论】：