Ng2 动画在 Init 上的折线图上不起作用

Question

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

我的一部分选择：

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>

Answer 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((，也可以定义它们。