애니메이션

Char.js는 즉시 차트에 애니메이션을 적용합니다. 애니메이션을 어떻게 보이게할지와 얼마나 지속할지 설정하기 위한 몇 개의 옵션들을 제공합니다.

애니메이션 설정

다음의 애니메이션 옵션들을 이용할 수 있습니다. 전역 옵션은 Chart.defaults.global.animation에 정의되어 있습니다.

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'

Robert Penner의 easing 방정식을 확인해보세요.

애니메이션 콜백

onProgress와 onComplete 콜백은 외부에서 그린 것을 차트 애니메이션에 동기화할 때 유용합니다. 콜백에는 Chart.Animation 인스턴스를 넘깁니다:

{
    // 차트 객체
    chart: Chart,

    // 현재 애니메이션 프레임 수
    currentStep: number,

    // 애니메이션 프레임들의 수
    numSteps: number,

    // easing 애니메이션 사용
    easing: string,

    // 차트 렌더링 기능
    render: function,

    // 사용자 콜백
    onAnimationProgress: function,

    // 사용자 콜백
    onAnimationComplete: function
}

다음의 예제 파일은 차트 애니메이션 동안 진행 막대를 채웁니다.

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        animation: {
            onProgress: function(animation) {
                progress.value = animation.animationObject.currentStep / animation.animationObject.numSteps;
            }
        }
    }
});

이 콜백들의 다른 예제 사용법은 Github에서 찾을 수 있습니다: 이 예시는 애니메이션이 얼마나 남았는지를 진행 막대로 보여줍니다.