Angular Navegación de cartas

    Los gráficos Ignite UI for Angular permiten el desplazamiento panorámico interactivo y el zoom a través del 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 kit de herramientas de Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Chart Navigation with User Interactions

    Whether or not zooming is on by default depends on the chart you are using. If you are using IgxCategoryChartComponent, it is on by default, but it is not in the IgxDataChartComponent. In order to enable or disable navigation in the UI, you need to set either the isHorizontalZoomEnabled and/or the isVerticalZoomEnabled properties of the chart, depending on the direction that you wish to enable or disable zooming.

    It is also possible to zoom or pan simply by clicking the mouse or using touch. The defaultInteraction property of the data chart determines what happens on mouse click or touch events. This property defaults to DragZoom and when set to this with zooming enabled, clicking and dragging will place a preview rectangle over the plot area that will become the zoomed area of the chart. This defaultInteraction property can also be set to either DragPan to allow panning or None to prevent these operations.

    Chart Navigation with Touch, Mouse and Keyboard

    La navegación en el gráfico de datos de Angular puede realizarse con el tacto, el ratón o el teclado. De forma predeterminada, se pueden invocar las siguientes operaciones mediante operaciones táctiles, de ratón o de teclado:

    • Panorámica: Usar 🡐 🡓 🡒 🡑 las teclas de flecha en el teclado o mantener presionada la SHIFT tecla, hacer clic y arrastrar con el mouse o presionar y mover el dedo al tacto.
    • Acercar: Usar la PAGE UP tecla del teclado, girar la rueda del mouse hacia arriba o pellizcar para acercar con el tacto.
    • Alejar: Usar la PAGE DOWN tecla del teclado, girar la rueda del mouse hacia abajo o pellizcar para alejar mediante el tacto.
    • Ajustar al área de trazado del gráfico: Usando la HOME tecla del teclado. No hay operación táctil o de mouse para esto.
    • Area Zoom: Click and drag the mouse within the plot area with the defaultInteraction property set to its default - DragZoom.

    The zoom and pan operations can also be enabled by using modifier keys by setting the dragModifier and panModifier properties, respectively. These properties can be set to the following modifier keys, and when pressed, the corresponding operation will be executed:

    Valor del modificador Clave correspondiente
    Shift TURNO
    Control CTRL
    Windows GANAR
    Apple MANZANA
    None sin llaves

    Chart Navigation with Scrollbars

    The chart can be scrolled by enabling the verticalViewScrollbarMode and horizontalViewScrollbarMode properties.

    Estos se pueden configurar con las siguientes opciones.

    • Persistent - The scrollbars always stay visible, as long as the chart is zoomed in, and fade away when fully zoomed out.
    • Fading - The scrollbars disappear after use and reappear when the mouse is near their location.
    • FadeToLine - The scrollbars are reduced to a thinner line when zooming is not in use.
    • None - Default, no scrollbars are shown.

    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 panorámica en el gráfico. También puede establecer cada una de estas propiedades para acercar o desplazar el gráfico de datos mediante programación. A continuación se muestra una lista de estas propiedades:

    • windowPositionHorizontal: A numeric value describing the X portion of the content view rectangle displayed by the data chart.
    • windowPositionVertical: A numeric value describing the Y portion of the content view rectangle displayed by the data chart.
    • windowRect: A Rect object representing a rectangle that represents the portion of the chart that is currently in view. For example, a windowRect of "0, 0, 1, 1" would be the entirety of the data chart.
    • windowScaleHorizontal: A numeric value describing the width portion of the content view rectangle displayed by the data chart.
    • windowScaleVertical: A numeric value describing the height portion of the content view rectangle displayed by the data chart.

    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: