chart.js

Animations

원문 :  http://www.chartjs.org/docs/latest/configuration/animations.html


 

Animations

Chart.js 는 차트에서 즉시 애니메이션을 생성합니다.

애니메이션의 모양과 소요시간을 구성하는 다양한 옵션이 제공됩니다.

 

Animation Configuration

다음 애니메이션 옵션을 사용할 수 있습니다.

전역 옵션은 Chart.defaults.global.animation 에 정의되어 있습니다.

Name Type Default 설명
duration Number 1000 애니메이션에 걸리는 시간 ( 밀리초 )
easing String 'easeOutQuart' easing 효과
onProgress Function null 애니메이션의 각 단계마다의 콜백
onComplete Function null 애니메이션이 끝날 때 콜백

 

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'

 

Animation Callbacks 

onProgress 및 onComplete 콜백은 

외부 그리기를 차트 애니메이션과 동기화하는데 유용합니다.

콜백은 Chart.Animation 인스턴스에 전달됩니다.

{
    // 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;
            }
        }
    }
});

이러한 콜백의 또 다른 사용법은 Github 에서 찾을 수 있습니다.

이 샘플은 애니메이션이 얼마나 멀리 있는지 보여주는 진행률 막대를 표시합니다.

댓글

댓글 본문
작성자
비밀번호
버전 관리
gamza
현재 버전
선택 버전
graphittie 자세히 보기