Visão geral do controle deslizante de zoom Web Components

O controle ZoomSlider Web Components 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 o CategoryChart.

Web Components Zoom Slider Example

O exemplo a seguir demonstra como usar IgcZoomSliderComponent o para navegar pelo IgcDataChartComponent conteúdo.

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 de gráfico de Web Components, o pacote principal também deve ser instalado.

npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-charts

Component Modules

O IgcZoomSliderComponent requer os seguintes módulos:

import { IgcZoomSliderModule } from 'igniteui-webcomponents-charts';
import { IgcZoomSliderComponent } from "igniteui-webcomponents-charts";

IgcZoomSliderModule.register();

Code Snippet

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

  <igc-zoom-slider
      name="zoomSlider"
      width="100%"
      height="160px" >
  </igc-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:

• IgcZoomSliderComponent
• IgcDataChartComponent