Las animaciones le permiten facilitar la serie a medida que carga una nueva fuente de datos. La animación disponible difiere según el tipo de serie de que se trate. Por ejemplo, la serie de columnas se anima al elevarse desde el eje x, una serie de líneas se anima al dibujar desde el origen del eje y.
Las animaciones están deshabilitadas en los gráficos de Ignite UI for Web Components, pero se pueden habilitar estableciendo la isTransitionInEnabled propiedad en true. A partir de ahí, puede establecer la propiedad para determinar cuánto transitionInDuration tiempo debe tardar en completarse la animación y para transitionInMode determinar el tipo de animación que se lleva a cabo.
Ejemplo de animación de gráfico de Web Components
El siguiente ejemplo muestra un Gráfico de líneas con una animación configurada en el transitionInMode predeterminado: "Auto". El menú desplegable y el control deslizante en la parte superior de este ejemplo le permitirán modificar transitionInMode y transitionInDuration, respectivamente, para que pueda ver cómo se ven las diferentes animaciones admitidas a diferentes velocidades.
<!DOCTYPE html><html><head><title>CategoryChartLineChartWithAnimations</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png"><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="options horizontal"><spanclass="options-label">Transition Type </span><selectid="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><labelid="transitionLabel"class="options-value"style="width: 75px">1000ms</label><inputid="transitionSlider"class="options-slider"type="range"min="50"max="2000"step="50"value="1000" /><buttonid="reloadChartBtn">Reload Chart</button></div><igc-category-chartid="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) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Recursos adicionales
Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas: