chart.js - 在条形/线的鼠标悬停时显示 ChartJS 工具提示

Question

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

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

https://codepen.io/uglyhobbitfeet/pen/PooLgev?editors=1010

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

文档在这里：

• https://www.chartjs.org/docs/latest/general/interactions/modes.html
• https://www.chartjs.org/docs/latest/configuration/tooltip.html

谢谢！

标签： chart.js

Answer 1

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

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

然后在tooltips下面几行中添加模式：

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

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

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