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:
GitHub