如何将ChartJS数据点提示框的动画时长设为0以取消淡入效果

嘿，我刚好知道怎么处理这个问题！你要关闭的是Tooltip组件自身的动画，而非全局的图表动画，所以得在Tooltip的专属配置里设置动画时长为0才行。

具体操作很简单，只需要在你的图表options的plugins中添加tooltip配置项，把它的animation.duration设为0就可以了。这样Tooltip就会立即显示，没有任何淡入效果。

下面是修改后的完整代码：

chart_code = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['A','B','C','D','E'],
    datasets: [{
      label: 'Teststatistic',
      data: [50,40,30,20,50],
      backgroundColor: ['rgba(0, 105, 146, 1)'],
      borderColor: ['rgba(0, 105, 146, 1)'],
      borderWidth: 3,
      fill: false,
      pointStyle: 'rect',
      pointRadius: 5
    }]
  },
  options: {
    responsive: false,
    plugins: {
      legend: {
        display: false,
        boxWidth: 80,
        boxHeight: 80
      },
      // 新增Tooltip配置，关闭动画
      tooltip: {
        animation: {
          duration: 0
        }
      }
    },
    scales: {
      x: {
        ticks: {
          maxRotation: 0,
          minRotation: 0
        }
      }
    }
  }
});

补充说明下：Chart.js的Tooltip组件有独立的动画控制选项，全局的animation配置影响的是图表本身的渲染动画，对Tooltip的显示动画不起作用。所以必须单独在Tooltip的配置里设置动画时长为0，才能让它瞬间显示出来。

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