Xes
73154ae174
Fuente: https://github.com/chamilo/chamilo-lms/releases/download/v1.11.40/chamilo-1.11.40.zip sha256: 1cf4bf2cc7bae1ef1a1eff643235db1d552f78ddf4b6dd1e2d2dac9868679439 Snapshot independiente (rama huerfana); diffable vs 1.11.38. vendor incluido.
2.6 KiB
2.6 KiB
Animations
Chart.js animates charts out of the box. A number of options are provided to configure how the animation looks and how long it takes.
Animation Configuration
The following animation options are available. The global options for are defined in Chart.defaults.global.animation.
| Name | Type | Default | Description |
|---|---|---|---|
duration |
number |
1000 |
The number of milliseconds an animation takes. |
easing |
string |
'easeOutQuart' |
Easing function to use. more... |
onProgress |
function |
null |
Callback called on each step of an animation. more... |
onComplete |
function |
null |
Callback called at the end of an animation. more... |
Easing
Available options are:
'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'
See Robert Penner's easing equations.
Animation Callbacks
The onProgress and onComplete callbacks are useful for synchronizing an external draw to the chart animation. The callback is passed a Chart.Animation instance:
{
// Chart object
chart: Chart,
// Current Animation frame number
currentStep: number,
// Number of animation frames
numSteps: number,
// Animation easing to use
easing: string,
// Function that renders the chart
render: function,
// User callback
onAnimationProgress: function,
// User callback
onAnimationComplete: function
}
The following example fills a progress bar during the chart animation.
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
animation: {
onProgress: function(animation) {
progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
}
}
}
});
Another example usage of these callbacks can be found on Github: this sample displays a progress bar showing how far along the animation is.