Visão geral do controle deslizante de zoom Angular

O controle Angular ZoomSlider fornece funcionalidade de zoom para controles habilitados para intervalo. O ZoomSlider apresenta uma barra de rolagem horizontal, uma miniatura de todo o intervalo e uma janela de intervalo de zoom redimensionável. O ZoomSlider não pode funcionar como um controle autônomo e atua como um aprimoramento para controles baseados em intervalo, como o DataChart ou CategoryChart.

Angular Zoom Slider Example

O exemplo a seguir demonstra como usar IgxZoomSliderComponent para navegar pelo conteúdo em IgxDataChartComponent.

Usage

Nome do Recurso	Descrição
Navegação por barra de rolagem	Os usuários podem alterar a escala e rolar por intervalos de dados usando os recursos integrados da barra de rolagem do ZoomSlider.
Panorâmica e zoom	Os usuários podem ajustar a escala de exibição arrastando as bordas do teclado para fazer com que a exibição atual cubra uma faixa maior (diminuir o zoom) ou uma faixa menor (aumentar o zoom).
Várias opções de interação do usuário	Todas as interações do usuário do mouse são suportadas redundantemente por meio do toque e a maioria delas – por meio do teclado. Para detalhes, veja Interações do usuário e usabilidade.
Suporte de toque	Em dispositivos habilitados para toque, os usuários podem aproveitar a funcionalidade completa do ZoomSlider. Todas as interações do mouse são suportadas no ambiente de toque.
Extensibilidade	O controle ZoomSlider oferece suporte imediato ao controle DataChart.
Janela de intervalo de zoom configurável	A largura e a posição da janela de zoom inicial, bem como seu tamanho mínimo, são configuráveis.

Dependencies

Ao instalar o componente Angular chart, o pacote principal também deve ser instalado.

npm install --save igniteui-angular-core
npm install --save igniteui-angular-charts

Component Modules

O IgxZoomSliderComponent requer os seguintes módulos:

import { IgxZoomSliderModule } from 'igniteui-angular-charts';
import { IgxZoomSliderComponent } from 'igniteui-angular-charts';

@NgModule({
    imports: [
        // ...
        IgxZoomSliderModule,
        // ...
    ]
})
export class AppModule {}

Code Snippet

O código a seguir demonstra como configurar o ZoomSlider.

<igx-zoom-slider
  width="100%"
  height="150px">
</igx-zoom-slider>

Additional Resources

Você pode encontrar mais informações sobre gráficos no tópico Recursos de gráficos.

API References

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

• IgxZoomSliderComponent
• IgxDataChartComponent