在条形/线形鼠标悬停时显示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

谢谢！

Answer 1

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

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

，然后将模式添加到tooltips下几行：

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

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

但是，如果您确实在该范围内创建了一个点，则可以在工具提示上拾取它。