chartjs.org 공식 샘플(docs/samples/animations/*) 5종을 <syn_chartjs>로 재현합니다.
ChartJS 컨트롤은 기본값이
animation:false
이므로, 애니메이션을 보여주려면 각 차트의
options.animation
을 명시적으로 지정해야 합니다(재조회 버튼으로 다시 재생해 보세요).
Delay
animation.delay: (ctx) => ctx.dataIndex * 150
로 막대가 순서대로 나타납니다.
Drop
포인트가
easeOutBounce
로 위에서 튕기듯 떨어집니다.
Loop
일정 간격으로 데이터를 갱신해 계속 움직이는 라인 차트를 만듭니다.
Progressive Line
animation.x
를 이용해 선이 왼쪽부터 순서대로 그려지는 효과를 만듭니다.
Progressive Line Easing
같은 진행형 그리기에 서로 다른
easing
함수를 적용해 비교합니다.