FlexChart 애니메이션

로드와 업데이트 시 플롯 요소에 애니메이션 효과를 활성화하여 FlexChart, FlexPie, FinancialChart의 사용자 경험을 개선하도록 선택할 수 있습니다.

애니메이션은 ChartAnimation 객체를 만들고 지속 시간, 간단한(easing) 함수, 애니메이션 모드를 포함하는 몇 가지 주요 속성과 함께 차트 컨트롤 인스턴스를 전달하여 활성화할 수 있습니다.

• animationMode: 데이터 포인트가 애니메이션되는 방식을 결정합니다: 한 번에, 한 번에 하나씩, 또는 한 번에 한 시리즈. 전체 애니메이션은 기간 안에 완료됩니다.

• All: 모든 포인트와 시리즈가 한 번에 애니메이션됩니다.

• Point: 애니메이션이 포인트별로 수행됩니다. 여러 시리즈가 동시에 애니메이션화됩니다.

• Series: 애니메이션이 시리즈별로 수행됩니다. 전체 시리즈는 "All" 옵션과 동일한 애니메이션에 따라 한 번에 애니메이션화되지만, 한 번에 하나의 시리즈만 애니메이션화됩니다.

• easing: 애니메이션에 적용된 간단한(easing) 함수입니다.

• duration: 애니메이션 길이(밀리초)입니다.

예시 :

import * as chart from '@mescius/wijmo.chart';
import * as animation from '@mescius/wijmo.chart.animation';

var chartAnimation = new animation.ChartAnimation(myChart, {
        animationMode: wijmo.chart.animation.AnimationMode.All,
        easing: wijmo.chart.animation.Easing.Swing,
        duration: 400
    });

애니메이션이 활성화되면, 차트가 로드되고 업데이트될 때 애니메이션이 자동으로 발생합니다. animate 메서드를 호출하여 애니메이션을 즉시 트리거할 수 있습니다.

예시:

myChart.animate();

Easing 함수

애니메이션에 적용되는 Easing 함수를 설정하여 애니메이션을 추가로 구성할 수 있습니다. FlexChart는 cubic in/out, elastic in/out, bounce in/out 그리고 linear과 같은 표준 Easing 함수 컬렉션을 지원합니다.

• Linear

• Swing

• EaseInQuad

• EaseOutQuad

• EaseInOutQuad

• EaseInCubic

• EaseOutCubic

• EaseInOutCubic

• EaseInQuart

• EaseOutQuart

• EaseInOutQuart

• EaseInQuint

• EaseOutQuint

• EaseInOutQuint

• EaseInSine

• EaseOutSine

• EaseInOutSine

• EaseInExpo

• EaseOutExpo

• EaseInOutExpo

• EaseInCirc

• EaseOutCirc

• EaseInOutCirc

• EaseInBack

• EaseOutBack

• EaseInOutBack

• EaseInBounce

• EaseOutBounce

• EaseInOutBounce

• EaseInElastic

• EaseOutElastic

• EaseInOutElastic

축 애니메이션

axisAnimation 속성을 설정하여 축에도 애니메이션을 적용할 수 있습니다.

예시:

myChart.axisAnimation = true;

애니메이션 업데이트

__ChartAnimation__은 업데이트 중에도 적용됩니다. 애니메이션이 구성되면, 소스 컬렉션에서 포인트를 삽입 및 제거하여 차트의 데이터 소스를 쉽게 업데이트할 수 있습니다.

예시:

// insert point at start
myChart.itemsSource.insert(0, getMyDataItem());
// insert point at end
myChart.itemsSource.push(getMyDataItem());
// remove point at start
myChart.itemsSource.removeAt(0);
// remove point at end
myChart.itemsSource.pop();

getMyDataItem 메서드는 플레이스 홀더(Place holder)로만 사용되며 바인딩 유형과 일치하는 데이터 객체로 대체되어야 합니다.

동적 차트 애니메이션

FlexChart는 CollectionView 클래스를 데이터 소스로 사용하기 때문에, 데이터의 모든 변경 사항이 차트에 자동으로 반영됩니다. 이 CollectionView는 collectionView 속성에 의해 노출됩니다. 또한 이 컬렉션에서 포인트를 추가 및 제거하여 차트에서 업데이트 된 것을 볼 수 있습니다.

예시:

// append new points, remove old points
var arr = myChart.collectionView.sourceCollection;
var pt = arr[arr.length - 1];
var y = pt.y;
for (var i = 0; i < 10; i++) {
    y += Math.random() - .5;
    arr.push({ x: pt.x + i + 1, y: y });
    arr.splice(0, 1);
}

// update collectionview and chart
myChart.collectionView.refresh();
myChart.refresh();