问题描述
我正在使用ng2图表创建仪表板。 当我使用折线图时,动画在onit上不起作用,但在图表完成并更新数据时才起作用。
我的部分选择:
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>
解决方法
您需要指定动画类型以覆盖默认行为,如下所示:
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(),它们也可以被定义。