Descripción general del control deslizante de zoom Angular

    El control Angular ZoomSlider 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.

    Angular Zoom Slider Example

    El siguiente ejemplo demuestra cómo usar IgxZoomSliderComponent para navegar por el contenido en IgxDataChartComponent.

    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 del gráfico Angular, también se debe instalar el paquete principal.

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

    Component Modules

    El IgxZoomSliderComponent requiere los siguientes módulos:

    import { IgxZoomSliderModule } from 'igniteui-angular-charts';
    import { IgxZoomSliderComponent } from 'igniteui-angular-charts';
    
    @NgModule({
        imports: [
            // ...
            IgxZoomSliderModule,
            // ...
        ]
    })
    export class AppModule {}
    

    Code Snippet

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

    <igx-zoom-slider
      width="100%"
      height="150px">
    </igx-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: