如何移除Chart.js中数据点的悬停动画时长？

要实现未悬停时隐藏数据点、悬停时立即显示无延迟的效果，你之前的动画配置位置有误，以下是正确的配置方案：

核心配置调整 #

Chart.js中控制悬停动画时长的配置并非直接放在point.animation下，而是需要通过hover.animationDuration或者elements.point.hover内的配置来实现。

方案一：全局+点级精准配置 #

const chartConfig = {
  type: 'line', // 根据你的图表类型调整，如bar等
  data: { /* 你的数据内容 */ },
  options: {
    elements: {
      point: {
        // 初始状态隐藏数据点
        radius: 0,
        borderWidth: 0,
        backgroundColor: 'rgba(0,0,0,0)',
        // 悬停时的点样式+无动画
        hover: {
          radius: 6, // 悬停时显示的点大小
          borderWidth: 2,
          backgroundColor: '#2ecc71',
          animationDuration: 0 // 关键：关闭悬停动画延迟
        }
      }
    },
    // 全局关闭动画，避免其他元素的延迟干扰
    animation: {
      duration: 0
    },
    hover: {
      animationDuration: 0 // 全局悬停动画时长设为0
    },
    plugins: {
      tooltip: {
        animation: false // 关闭tooltip动画，确保整体无延迟
      }
    }
  }
};

方案二：仅调整悬停相关配置（保留其他动画） #

如果你不需要全局关闭动画，只针对数据点悬停取消延迟，可以只配置elements.point.hover.animationDuration：

elements: {
  point: {
    radius: 0,
    borderWidth: 0,
    backgroundColor: 'rgba(0,0,0,0)',
    hover: {
      radius: 6,
      borderWidth: 2,
      backgroundColor: '#2ecc71',
      animationDuration: 0 // 仅关闭点的悬停动画
    }
  }
}

为什么之前的配置无效？ #

你之前尝试的point.animation并非Chart.js中控制悬停动画的正确配置项，该配置主要针对点的初始渲染动画，而非悬停交互时的动画。悬停状态的动画时长需要在hover全局配置或elements.point.hover中设置。

内容的提问来源于stack exchange，提问作者Perrin22