Angular Animações de Gráfico

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 Angular 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.

Angular Chart Animation Example

O exemplo a seguir mostra um Gráfico de Linhas com uma animação definida para o padrãotransitionInMode— "Auto." O menu suspenso e o controle deslizante no topo deste exemplo permitem que você modifique otransitionInMode andtransitionInDuration, respectivamente, para que você possa ver como as diferentes animações suportadas ficam em velocidades diferentes.

Additional Resources

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

• Anotações de gráficos
• Destaque de gráfico
• Dicas de ferramentas de gráfico

API References

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

• IgxCategoryChartComponent
• isTransitionInEnabled
• transitionInDuration
• transitionInMode