有沒有方法擴展當前的chart.js,以便動畫繪製不會動畫整個圖表,而是通過動畫繪製圖表緩解)?動畫圖表js(line),動畫圖表逐行繪製
0
A
回答
0
Nevermind.I've通過延長chart.js之實現,而且覆蓋的draw()函數,這樣我可以從一個點/點動畫線到另一個,直到最後一個點/點。
4
可以使用onAnimationComplete
回調更改數據,並調用update()
...
data: [0, 0, 0, 0, 0, 0, 0]
}
]
};
var data2 = [28, 48, 40, 19, 86, 27, 90];
var done = false;
var myLineChart = new Chart(ctx).Line(data, {
animationEasing: 'linear',
onAnimationComplete: function() {
if (!done) {
myLineChart.datasets[1].points.forEach(function (point, i) {
point.value = data2[i];
});
myLineChart.update();
done = true;
}
}
});
它與linear
寬鬆(否則它看起來像2個不同的動畫)的作品更好,但是如果你願意,你可以寫你的自己的寬鬆功能在2塊中做easeOutQuart
。
相關問題
- 1. 表視圖動畫
- 2. 動畫Flash圖表
- 3. 動畫圖像js
- 4. 使用「表面」視圖爲逐幀動畫設置動畫結束偵聽器
- 5. 動畫逐步繪製虛線HTML5畫布和Jquery
- 6. 繪製位圖動畫不起作用
- 7. 動畫畫布上的圖像列表
- 8. 動畫刷幾何繪圖
- 9. 列表視圖和動畫
- 10. 列表視圖動畫
- 11. d3js圖表動畫無效
- 12. 列表視圖OnitemClick動畫
- 13. 逐幀動畫
- 14. 逐幀動畫
- 15. 逐幀動畫
- 16. 通過畫布繪製量表圖
- 17. Chart.js - 如何在繪製圖表之前顯示加載動畫
- 18. 列表視圖行淡入動畫
- 19. HTML5逐幀動畫(多個圖像)
- 20. 圖像逐幀動畫來自URL
- 21. ImageView動畫 - 逐漸顯示圖像
- 22. 如何使用Google圖表製作柱狀圖啓動動畫?
- 23. Android動畫動畫列表動畫
- 24. 繪圖和動畫的圖像網格
- 25. 開始滾動的圖表動畫
- 26. 停止列表視圖滾動動畫
- 27. 谷歌圖表 - 動畫的階梯圖
- 28. 逐幀動畫或視頻動畫?
- 29. 如何重新啓動繪圖/動畫chartist-js?
- 30. Kivy上的動畫畫布Line
您可能想要在此答案中發佈代碼以使其更有用。乾杯! – potatopeelings
您可以在這裏發佈代碼嗎?我陷入了同樣的問題。 –