ChartJs：如何仅禁用初始动画

Question

我不喜欢图表JS折线图的初始动画，但是当我更新图表时，我确实想要一个动画。

我能找到的唯一相关解决方案，例如：

options: {animation: false}

和

options: {animation: {duration: 0}}

禁用所有形式的动画。这不是我想要的。

另一件事我可以解决，但没有找到一种方法，那就是稍后当我更新图表时重新打开动画的方法。初始化后我似乎也无法在图表对象上找到关联的值。因此，更改现有图表的动画似乎几乎是未绘制图表的领域。 我正在使用 Chart.js 4.3.3。

Answer 1

var ctx = document.getElementById('myCanva').getContext('2d');

var config = {
  type:'line',
  data:{
    labels:[0,1,2,3,4,5,6,7,8,9],
    datasets:[{
      data:[1,2,5,8,9,2,4,15,2,20],
      label:'A',
    }]
  },
  options:{
    animation:false,
    plugins:{
      zoom:{
        zoom:{
          drag:{
             enabled:true,
          },
          mode:'x',
        }
      }
    }
  }
} 

var myChart = new Chart(ctx, config);


function update3rdValue(){
  config.options.animation = true;
  config.data.datasets[0].data[2] = Math.floor(Math.random() * 20);
  myChart.update();
  config.options.animation = false;
}

function zoom(){
  config.options.animation = true;
  myChart.resetZoom();
  config.options.animation = false;
}

function zoomNoAnim(){
  myChart.resetZoom();
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/2.0.1/chartjs-plugin-zoom.min.js" integrity="sha512-wUYbRPLV5zs6IqvWd88HIqZU/b8TBx+I8LEioQ/UC0t5EMCLApqhIAnUg7EsAzdbhhdgW07TqYDdH3QEXRcPOQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<canvas id="myCanva"></canvas>
<button onClick = "update3rdValue()">Edit 3rd value</button>
<button onClick = "zoom()">Reset Zoom</button>
<button onClick = "zoomNoAnim()">Reset Zoom without animation</button>