[]
로드와 업데이트 시 플롯 요소에 애니메이션 효과를 활성화하여 FlexChart, FlexPie, FinancialChart의 사용자 경험을 개선하도록 선택할 수 있습니다.
애니메이션은 ChartAnimation 객체를 만들고 지속 시간, 간단한(easing) 함수, 애니메이션 모드를 포함하는 몇 가지 주요 속성과 함께 차트 컨트롤 인스턴스를 전달하여 활성화할 수 있습니다.
예시 :
import * as chart from '@grapecity/wijmo.chart';
import * as animation from '@grapecity/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 함수를 설정하여 애니메이션을 추가로 구성할 수 있습니다. FlexChart는 cubic in/out, elastic in/out, bounce in/out 그리고 linear과 같은 표준 Easing 함수 컬렉션을 지원합니다.
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();