Descripción general del control deslizante de zoom Web Components

El control ZoomSlider Web Components proporciona funcionalidad de zoom a controles habilitados para rango. ZoomSlider presenta una barra de desplazamiento horizontal, una miniatura de todo el rango y una ventana de rango de zoom de tamaño variable. ZoomSlider no puede funcionar como un control independiente y actúa como una mejora para controles basados en rangos como DataChart o CategoryChart.

Web Components Zoom Slider Example

El siguiente ejemplo demuestra cómo usar IgcZoomSliderComponent para navegar por el contenido en IgcDataChartComponent.

Usage

Nombre de la característica	Descripción
Navegación con barra de desplazamiento	Los usuarios pueden cambiar la escala y desplazarse por rangos de datos utilizando las capacidades integradas de la barra de desplazamiento ZoomSlider.
Panorámica y zoom	Los usuarios pueden ajustar la escala de visualización arrastrando los bordes del control para el pulgar para hacer que la visualización actual cubra un rango mayor (alejar) o un rango más pequeño (acercar).
Múltiples opciones de interacción del usuario	Todas las interacciones del usuario del mouse se admiten de manera redundante a través del tacto y la mayoría de ellas, a través del teclado. Para obtener más información, consulte Interacciones del usuario y usabilidad.
Soporte táctil	En dispositivos táctiles, los usuarios pueden disfrutar de la funcionalidad completa de ZoomSlider. Todas las interacciones del mouse son compatibles en un entorno táctil.
Extensibilidad	El control ZoomSlider admite el control DataChart listo para usar.
Ventana de rango de zoom configurable	El ancho y la posición inicial de la ventana del rango de zoom, así como su tamaño mínimo, son configurables.

Dependencies

Al instalar el componente gráfico Web Components, también se debe instalar el paquete principal.

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

Component Modules

El IgcZoomSliderComponent requiere los siguientes módulos:

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

IgcZoomSliderModule.register();

Code Snippet

El siguiente código demuestra cómo configurar ZoomSlider.

  <igc-zoom-slider
      name="zoomSlider"
      width="100%"
      height="160px" >
  </igc-zoom-slider>

Additional Resources

Puede encontrar más información sobre los gráficos en el tema Características de los gráficos.

API References

La siguiente es una lista de miembros de API mencionados en las secciones anteriores:

• IgcZoomSliderComponent
• IgcDataChartComponent