React Navegación de cartas

    Los gráficos Ignite UI for React permiten el desplazamiento panorámico interactivo y el zoom a través del mouse, el teclado y el tacto.

    React 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 React completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Chart Navigation with User Interactions

    Si el zoom está activado por defecto depende del gráfico que utilices. Si lo usasIgrCategoryChart, está activado por defecto, pero no está en elIgrDataChart. Para activar o desactivar la navegación en la interfaz, necesitas establecer lasisHorizontalZoomEnabled propiedades y/oisVerticalZoomEnabled las del gráfico, dependiendo de la dirección en la que quieras activar o desactivar el zoom.

    También es posible hacer zoom o paneo simplemente haciendo clic con el ratón o usando el tacto. LadefaultInteraction propiedad de la tabla de datos determina qué ocurre en eventos de clic del ratón o táctiles. Esta propiedad seDragZoom configura por defecto y, al configurarse con el zoom activado, al hacer clic y arrastrar se coloca un rectángulo previo sobre el área del gráfico que se convierte en el área ampliada del gráfico. EstadefaultInteraction propiedad también puede configurarse paraDragPan permitir el paneo oNone para evitar estas operaciones.

    Chart Navigation with Touch, Mouse and Keyboard

    La navegación en el gráfico de datos de React 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.
    • Zoom de área: Haz clic y arrastra el ratón dentro del área de la parcela con ladefaultInteraction propiedad configurada en su configuración predeterminada -DragZoom.

    Las operaciones de zoom y pan también pueden activarse usando teclas modificadoras que establecen lasdragModifier propiedades ypanModifier y respectivamente. Estas propiedades pueden configurarse en las siguientes teclas modificadoras y, al pulsarse, se ejecutará la operación correspondiente:

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

    Chart Navigation with Scrollbars

    El gráfico puede desplazarse activando lasverticalViewScrollbarMode propiedades yhorizontalViewScrollbarMode.

    Estos se pueden configurar con las siguientes opciones.

    • Persistent- Las barras de desplazamiento siempre permanecen visibles, siempre que la carta esté ampliada, y se desvanecen cuando se aleja completamente.
    • Fading- Las barras de desplazamiento desaparecen tras su uso y reaparecen cuando el ratón está cerca de su ubicación.
    • FadeToLine- Las barras de desplazamiento se reducen a una línea más fina cuando no se utiliza el zoom.
    • None- Por defecto, 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 IgrDataChart control.

    El gráfico de datos React 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: Un valor numérico que describe la porción X del rectángulo de la vista de contenido mostrado por la tabla de datos.
    • windowPositionVertical: Un valor numérico que describe la porción Y del rectángulo de la vista de contenido mostrado por la gráfica de datos.
    • windowRect: Un objeto queRect representa un rectángulo que representa la parte del gráfico que está actualmente en la vista. Por ejemplo, unawindowRect de "0, 0, 1, 1" sería la totalidad del gráfico de datos.
    • windowScaleHorizontal: Un valor numérico que describe la parte de ancho del rectángulo de vista de contenido mostrado por la gráfica de datos.
    • windowScaleVertical: Un valor numérico que describe la parte de altura del rectángulo de vista de contenido mostrado por la tabla 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: