Web Components 차트 애니메이션

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

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

Web Components Chart Animation Example

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

import { IgcCategoryChartModule } from 'igniteui-webcomponents-charts';
import { IgcCategoryChartComponent } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';

ModuleManager.register(
    IgcCategoryChartModule
);

export class CategoryChartLineChartWithAnimations {

    private chart: IgcCategoryChartComponent;
    private transitionLabel: HTMLLabelElement;

    public data: any[] = [];

    constructor() {

        this.onAnimationChanged = this.onAnimationChanged.bind(this);
        this.onTransitionTimeChanged = this.onTransitionTimeChanged.bind(this);
        this.onReloadChartBtnClicked = this.onReloadChartBtnClicked.bind(this);
        this.reloadChart = this.reloadChart.bind(this);

        this.initData();

        this.chart = document.getElementById('chart') as IgcCategoryChartComponent;
        this.chart.dataSource = this.data;

        const animationSelect = document.getElementById("animationSelect") as HTMLSelectElement;
        animationSelect.addEventListener("change", this.onAnimationChanged);

        this.transitionLabel = document.getElementById("transitionLabel") as HTMLLabelElement;

        const transitionSlider = document.getElementById("transitionSlider") as HTMLInputElement;
        transitionSlider.addEventListener("change", this.onTransitionTimeChanged);

        const reloadChartButton = document.getElementById("reloadChartBtn") as HTMLButtonElement;
        reloadChartButton.addEventListener("click", this.onReloadChartBtnClicked);
    }

    public initData() {
        this.data = [
            { Year: "2009", Europe: 31, China: 21, USA: 19 },
            { Year: "2010", Europe: 43, China: 26, USA: 24 },
            { Year: "2011", Europe: 66, China: 29, USA: 28 },
            { Year: "2012", Europe: 69, China: 32, USA: 26 },
            { Year: "2013", Europe: 58, China: 47, USA: 38 },
            { Year: "2014", Europe: 40, China: 46, USA: 31 },
            { Year: "2015", Europe: 78, China: 50, USA: 19 },
            { Year: "2016", Europe: 13, China: 90, USA: 52 },
            { Year: "2017", Europe: 78, China: 132, USA: 50 },
            { Year: "2018", Europe: 40, China: 134, USA: 34 },
            { Year: "2019", Europe: 80, China: 96, USA: 38 }
        ];
    }

    public onAnimationChanged(e: any) {
        this.chart.transitionInMode = e.target.value;
        this.reloadChart();
    }

    public onTransitionTimeChanged(e: any) {
        this.chart.transitionInDuration = e.target.value;
        this.transitionLabel.textContent = e.target.value + "ms";
        this.reloadChart();
    }

    public onReloadChartBtnClicked(e: any) {
        this.reloadChart();
    }

    public reloadChart() {
        this.chart.replayTransitionIn();
    }
}

new CategoryChartLineChartWithAnimations();
ts

<!DOCTYPE html>
<html>

<head>
  <title>CategoryChartLineChartWithAnimations</title>
  <meta charset="UTF-8" />

  <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
  <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

</head>

<body>
  <div id="root">
    <div class="container sample">
      <div class="options horizontal">
        <span class="options-label">Transition Type </span>
        <select id="animationSelect">
            <option>Auto</option>
            <option>AccordionFromBottom</option>
            <option>AccordionFromCategoryAxisMaximum</option>
            <option>AccordionFromCategoryAxisMinimum</option>
            <option>AccordionFromLeft</option>
            <option>AccordionFromRight</option>
            <option>AccordionFromTop</option>
            <option>AccordionFromValueAxisMaximum</option>
            <option>AccordionFromValueAxisMinimum</option>
            <option>Expand</option>
            <option>FromZero</option>
            <option>SweepFromBottom</option>
            <option>SweepFromCategoryAxisMaximum</option>
            <option>SweepFromCategoryAxisMinimum</option>
            <option>SweepFromCenter</option>
            <option>SweepFromLeft</option>
            <option>SweepFromRight</option>
            <option>SweepFromTop</option>
            <option>SweepFromValueAxisMaximum</option>
            <option>SweepFromValueAxisMinimum</option>
        </select>
        <label id="transitionLabel" class="options-value" style="width: 75px">1000ms</label>
        <input id="transitionSlider" class="options-slider" type="range" min="50" max="2000" step="50" value="1000" />
        <button id="reloadChartBtn">Reload Chart</button>
      </div>

      <igc-category-chart id="chart" width="100%" height="calc(100% - 30px)"
           chart-type="Line"
           is-transition-in-enabled="true"
           is-horizontal-zoom-enabled="false"
           is-vertical-zoom-enabled="false"
           y-axis-title="TWh"
           y-axis-title-left-margin="10"
           y-axis-title-right-margin="5"
           y-axis-label-left-margin="0"
		   computed-plot-area-margin-mode="Series">
      </igc-category-chart>
    </div>

  </div>
  <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

</body>

</html>html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */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

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

API References

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