在将鼠标悬停在条/线上显示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: {}
}

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

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