[英]Ng2 charts - Animation doesn't work on line chart onInit
我正在使用 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>
您需要指定動畫類型以覆蓋默認行為,如下所示:
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(),也可以定義它們。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.