Chartjs 折线图点悬停动画 buggy / jumpy答案

【问题标题】：Chartjs line graph point hover animation buggy / jumpyChartjs 折线图点悬停动画 buggy / jumpy
【发布时间】：2023-12-19 05:32:01
【问题描述】：

我正在尝试在 chart.js 中制作一个折线图，以显示您将鼠标悬停在索引上时的点。如果您快速移动鼠标，则悬停动画似乎会出错并在您显然没有悬停的点上播放动画。您可以在这里看到我所指的 https://jsfiddle.net/yoh9L1km/3/ 和 https://www.chartjs.org/samples/latest/scales/linear/step-size.html 但在他们的示例中很难看到，因为悬停动画很轻微。

我尝试将模式更改为 x 或 x-index，但没有成功。如果没有点悬停动画我可以接受，但是当我将悬停动画持续时间设置为 0 时，工具提示动画也是我不想要的即时动画。

如果不添加一些代码，它不会让我发帖

hover: {
  mode: 'index',
  intersect: false,
  animationDuration: 0
},
tooltips: {
  mode: 'index',
  intersect: false
}

编辑：想通下一节。

另外，不相关，但如果有人对如何添加一条垂直虚线连接我悬停的点和 x 轴索引有任何想法，我很想听听他们的意见！

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

这将在最新版本的 Chart.js 中得到修复。我从 Github 中提取了最新版本，构建并测试了它，您看到的问题不再存在。小提琴在https://jsfiddle.net/8rc6y9zg/ 提供。

我认为是 this commit 修复了它（但还没有通过 repo 检查！）。

最新的公开版本是 2.9.3，如果您等不及下一个版本，您可以构建和自托管 3.0 alpha 版本。

【讨论】：