Web Components Chart Animations

As animações permitem que você facilite a série à medida que carrega uma nova fonte de dados. A animação disponível difere dependendo do tipo de série envolvida. Por exemplo, a série de colunas é animada subindo do eixo x, uma série de linhas é animada desenhando a partir da origem do eixo y.

Animations are disabled in the Ignite UI for Web Components Charts, but they can be enabled by setting the isTransitionInEnabled property to true. From there, you can set the transitionInDuration property to determine how long your animation should take to complete and the transitionInMode to determine the type of animation that takes place.

Web Components Chart Animation Example

O exemplo a seguir descreve um gráfico de linhas com uma animação definida como o padrão transitionInMode "Auto". A lista suspensa e o controle deslizante na parte superior neste exemplo permitirão que você modifique o transitionInMode e transitionInDuration, respectivamente, para que você possa ver como as diferentes animações suportadas se parecem em diferentes velocidades.

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

Você pode encontrar mais informações sobre recursos de gráfico relacionados nestes tópicos:

API References

A seguir está uma lista de membros da API mencionados nas seções acima: