Ng2 图表 - 动画在 onInit 折线图上不起作用

【问题标题】：Ng2 charts - Animation doesn't work on line chart onInitNg2 图表 - 动画在 onInit 折线图上不起作用
【发布时间】：2020-12-15 07:17:26
【问题描述】：

我正在使用 ng2 图表来创建仪表板。当我使用折线图时，动画在 Init 上不起作用，但在图表完成并更新数据时起作用。

我的部分选择：

animation: {
      animation: true,
      duration: 2500,
}

我的html：

<canvas baseChart height="450" width="1120" [datasets]="lineChartData" [labels]="lineChartLabels"
    [options]="lineChartOptions" [colors]="lineChartColors" [chartType]="lineChartType"
    (chartClick)="chartClicked($event)">
</canvas>

【问题讨论】：

标签： angular charts chart.js ng2-charts

【解决方案1】：

您需要指定动画类型以覆盖默认行为，如下所示：

animation: {
      animateScale: true,
      animateRotate: true,
      duration: 2000,
      easing: 'easeInOutElastic',
    }

地点：

 easing: Easing = 'linear' | 'easeInQuad' | 'easeOutQuad' | 'easeInOutQuad' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic' |
    'easeInQuart' | 'easeOutQuart' | 'easeInOutQuart' | 'easeInQuint' | 'easeOutQuint' | 'easeInOutQuint' | 'easeInSine' | 'easeOutSine' |
    'easeInOutSine' | 'easeInExpo' | 'easeOutExpo' | 'easeInOutExpo' | 'easeInCirc' | 'easeOutCirc' | 'easeInOutCirc' | 'easeInElastic' |
    'easeOutElastic' | 'easeInOutElastic' | 'easeInBack' | 'easeOutBack' | 'easeInOutBack' | 'easeInBounce' | 'easeOutBounce' | 'easeInOutBounce';

如果你想触发 onComplete() 或 onProgress()，也可以定义它们。

【讨论】：