Web Components 차트 애니메이션

    애니메이션을 사용하면 새 데이터 소스를 로드할 때 시리즈를 쉽게 만들 수 있습니다. 사용 가능한 애니메이션은 관련된 시리즈 유형에 따라 다릅니다. 예를 들어 열 계열은 x축에서 상승하여 애니메이션되고, 선 계열은 y축 원점에서 그려 애니메이션됩니다.

    Ignite UI for Web Components 에서는 애니메이션이 비활성화되어 있지만 isTransitionInEnabled 속성을 true로 설정하면 활성화할 수 있습니다. 여기에서 transitionInDuration 속성을 설정하여 애니메이션이 완료되는 데 걸리는 시간을 결정하고, transitionInMode 설정하여 발생하는 애니메이션 유형을 결정할 수 있습니다.

    Web Components Chart Animation Example

    다음 예에서는 선형 차트 애니메이션이 기본값으로 설정된 경우 transitionInMode- "자동." 이 예의 상단에 있는 드롭다운 및 슬라이더를 사용하면 transitionInMode 그리고 transitionInDuration, 각각 지원되는 다양한 애니메이션이 다양한 속도에서 어떻게 보이는지 확인할 수 있습니다.

    EXAMPLE
    TS
    HTML
    CSS

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Additional Resources

    다음 항목에서 관련 차트 기능에 대한 자세한 내용을 확인할 수 있습니다.

    Ignite UI for Web Components | CTA Banner

    API References

    다음은 위 섹션에서 언급된 API 멤버 목록입니다.