Navegación en carta Angular
La Ignite UI for Angular permite realizar panorámicas y acercamientos interactivos mediante el mouse, el teclado y el tacto.
Angular Chart Navigation Example
El siguiente ejemplo muestra todas las opciones de panorámica y zoom disponibles. Puede interactuar con el ejemplo usando los botones o seleccionar las opciones que desee usando los menús desplegables o las casillas de verificación.
¿Te gusta esta muestra? Obtenga acceso a nuestro completo kit de herramientas Angular y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Chart Navigation with User Interactions
El zoom está activado de forma predeterminada en el gráfico. Para deshabilitar la navegación en la interfaz de usuario, debe establecer las propiedades isHorizontalZoomEnabled
y/o isVerticalZoomEnabled
del gráfico en falso, según la dirección en la que desee deshabilitar el zoom.
También es posible hacer zoom o desplazarse simplemente haciendo clic con el mouse o usando el tacto. La propiedad defaultInteraction
del gráfico de datos determina lo que sucede al hacer clic con el mouse o al tocar eventos. Esta propiedad tiene como valor predeterminado DragZoom
y cuando se establece en esta opción con el zoom habilitado, al hacer clic y arrastrar se colocará un rectángulo de vista previa sobre el área del gráfico que se convertirá en el área ampliada del gráfico. Esta propiedad defaultInteraction
también se puede establecer en DragPan
para permitir la panorámica o None
para evitar estas operaciones.
Chart Navigation with Touch, Mouse and Keyboard
La navegación en el gráfico de datos Angular se puede realizar con el tacto, el mouse o el teclado. Las siguientes operaciones se pueden invocar mediante operaciones táctiles, del mouse o del teclado de forma predeterminada:
- Panorámica: usando las teclas de flecha 🡐 🡒 🡑 🡓 del teclado o manteniendo presionada la tecla Mayús, haciendo clic y arrastrando con el mouse o presionando y moviendo el dedo mediante el tacto.
- Acercar: usando la tecla Re Pág del teclado, girando la rueda del mouse hacia arriba o pellizcando para acercar mediante el tacto.
- Alejar: use la tecla Av Pág del teclado, gire la rueda del mouse hacia abajo o pellizque para alejar mediante el tacto.
- Ajustar al área del gráfico: usando la tecla Inicio en el teclado. No hay operación táctil ni de mouse para esto.
- Zoom de área: haga clic y arrastre el mouse dentro del área de trazado con la propiedad
defaultInteraction
establecida en su valor predeterminado:DragZoom
.
Las operaciones de zoom y panorámica también se pueden habilitar mediante el uso de teclas modificadoras configurando las propiedades dragModifier
y panModifier
, respectivamente. Estas propiedades se pueden configurar con las siguientes teclas modificadoras y, al presionarlas, se ejecutará la operación correspondiente:
Valor del modificador | Clave correspondiente |
---|---|
Shift |
Cambio |
Control |
Control |
Windows |
Ganar |
Apple |
Manzana |
None |
sin llaves |
Chart Navigation with Scrollbars
El gráfico se puede desplazar habilitando las propiedades verticalViewScrollbarMode
y horizontalViewScrollbarMode
.
Estos se pueden configurar con las siguientes opciones.
Persistent
: las barras de desplazamiento siempre permanecen visibles, siempre que el gráfico esté ampliado, y desaparecen cuando se reduce por completo.Fading
: las barras de desplazamiento desaparecen después de su uso y reaparecen cuando el mouse está cerca de su ubicación.FadeToLine
: las barras de desplazamiento se reducen a una línea más delgada cuando no se utiliza el zoom.None
: predeterminado, no se muestran barras de desplazamiento.
El siguiente ejemplo demuestra cómo habilitar las barras de desplazamiento.
Chart Navigation through Code
[!Note] Code navigation of the chart can only be used for the
IgxDataChartComponent
control.
El gráfico de datos Angular proporciona varias propiedades de navegación que se actualizan cada vez que se realiza una operación de zoom o desplazamiento en el gráfico. También puede configurar cada una de estas propiedades para ampliar o desplazar el gráfico de datos mediante programación. La siguiente es una lista de estas propiedades:
windowPositionHorizontal
: un valor numérico que describe la porción X del rectángulo de vista de contenido que se muestra en el gráfico de datos.windowPositionVertical
: un valor numérico que describe la parte Y del rectángulo de vista de contenido que se muestra en el gráfico de datos.windowRect
: un objetoRect
que representa un rectángulo que representa la parte del gráfico que está actualmente a la vista. Por ejemplo, unwindowRect
de "0, 0, 1, 1" sería la totalidad del gráfico de datos.windowScaleHorizontal
: un valor numérico que describe la parte del ancho del rectángulo de vista de contenido que se muestra en el gráfico de datos.windowScaleVertical
: un valor numérico que describe la parte de altura del rectángulo de vista de contenido que se muestra en el gráfico de datos.
Additional Resources
Puede encontrar más información sobre las funciones de gráficos relacionadas en estos temas:
API References
La siguiente es una lista de miembros de API mencionados en las secciones anteriores:
defaultInteraction
dragModifier
isHorizontalZoomEnabled
isVerticalZoomEnabled
panModifier
IgxCategoryChartComponent
IgxDataChartComponent
IgxFinancialChartComponent