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.

    Ejemplo de control deslizante de zoom Web Components

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

    EXAMPLE
    DATA
    TS
    HTML
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Ignite UI for Web Components y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Uso

    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.
    Ignite UI for Web Components | Banner de llamada a la acción

    dependencias

    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
    cmd

    Módulos de componentes

    El IgcZoomSliderComponent requiere los siguientes módulos:

    import { IgcZoomSliderModule } from 'igniteui-webcomponents-charts';
    import { IgcZoomSliderComponent } from "igniteui-webcomponents-charts";
    
    IgcZoomSliderModule.register();
    ts

    Fragmento de código

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

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

    Recursos adicionales

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

    Referencias de API

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