React navegação no gráfico

    Os gráficos Ignite UI for React permitem panorâmica e zoom interativos por meio do mouse, teclado e toque.

    React Chart Navigation Example

    O exemplo a seguir mostra todas as opções de movimento panorâmico e zoom disponíveis. Você pode interagir com o exemplo usando os botões ou selecionar as opções desejadas usando os menus suspensos ou caixas de seleção.

    Gostou deste exemplo? Tenha acesso ao nosso kit de ferramentas de React completo e comece a criar seus próprios aplicativos em minutos. Faça o download gratuitamente.

    Chart Navigation with User Interactions

    Se o zoom está ativado por padrão depende do gráfico que você está usando. Se você estiver usandoIgrCategoryChart, está ativado por padrão, mas não está noIgrDataChart. Para ativar ou desativar a navegação na interface, você precisa definir asisHorizontalZoomEnabled propriedades e/ouisVerticalZoomEnabled do gráfico, dependendo da direção que deseja ativar ou desativar o zoom.

    Também é possível dar zoom ou panoramar simplesmente clicando com o mouse ou usando o toque. AdefaultInteraction propriedade do gráfico de dados determina o que acontece em eventos de clique ou toque do mouse. Essa propriedade éDragZoom definida e, quando configurada para isso com o zoom ativado, clicar e arrastar coloca um retângulo de pré-visualização sobre a área do gráfico, que se tornará a área ampliada do gráfico. EssadefaultInteraction propriedade também pode ser definida paraDragPan permitir o panoramagem ouNone para impedir essas operações.

    Chart Navigation with Touch, Mouse and Keyboard

    A navegação no gráfico de dados React pode acontecer com toque, mouse ou teclado. As seguintes operações podem ser invocadas usando operações de toque, mouse ou teclado por padrão:

    • Movimento panorâmico: usando 🡐 🡓 🡒 🡑 as teclas de seta no teclado ou segurando a SHIFT tecla, clicando e arrastando com o mouse ou pressionando e movendo o dedo por meio do toque.
    • Ampliar: usando a PAGE UP tecla do teclado, rolando a roda do mouse para cima ou apertando para aumentar o zoom por meio do toque.
    • Diminuir o zoom: usando a PAGE DOWN tecla do teclado, rolando a roda do mouse para baixo ou apertando para diminuir o zoom por meio do toque.
    • Ajustar à área de plotagem do gráfico: Usando a HOME tecla do teclado. Não há operação de mouse ou toque para isso.
    • Zoom da Área: Clique e arraste o mouse dentro da área do plot com adefaultInteraction propriedade definida para o padrão -DragZoom.

    As operações de zoom e pan também podem ser habilitadas usando teclas modificadoras ao definir asdragModifier propriedades epanModifier, respectivamente. Essas propriedades podem ser definidas para as seguintes teclas modificadoras e, ao pressionar, a operação correspondente será executada:

    Valor do modificador Chave correspondente
    Shift TURNO
    Control CTRL
    Windows GANHAR
    Apple MAÇÃ
    None sem chaves

    Chart Navigation with Scrollbars

    O gráfico pode ser deslocado ativando asverticalViewScrollbarMode propriedades ehorizontalViewScrollbarMode.

    Eles podem ser configurados para as seguintes opções

    • Persistent- As barras de rolagem sempre permanecem visíveis, desde que o mapa esteja ampliado, e desaparecem quando totalmente afastadas.
    • Fading- As barras de rolagem desaparecem após o uso e reaparecem quando o mouse está próximo da localização deles.
    • FadeToLine- As barras de rolagem são reduzidas a uma linha mais fina quando o zoom não está em uso.
    • None- Padrão, nenhuma barra de rolagem é mostrada.

    O exemplo a seguir demonstra a habilitação de barras de rolagem.

    Chart Navigation through Code

    [!Note] Code navigation of the chart can only be used for the IgrDataChart control.

    O gráfico de dados React fornece várias propriedades de navegação que são atualizadas sempre que uma operação de zoom ou panorâmica ocorre no gráfico. Você também pode definir cada uma dessas propriedades para ampliar ou deslocar o gráfico de dados programaticamente. Veja a seguir uma lista dessas propriedades:

    • windowPositionHorizontal: Um valor numérico que descreve a porção X do retângulo de visualização de conteúdo exibido pelo gráfico de dados.
    • windowPositionVertical: Um valor numérico que descreve a porção Y do retângulo de visualização de conteúdo exibido pelo gráfico de dados.
    • windowRect: Um objeto queRect representa um retângulo que representa a parte do mapa que está atualmente em vista. Por exemplo, awindowRect de "0, 0, 1, 1" seria a totalidade do gráfico de dados.
    • windowScaleHorizontal: Um valor numérico que descreve a largura do retângulo de visualização de conteúdo exibido pelo gráfico de dados.
    • windowScaleVertical: Um valor numérico que descreve a parte de altura do retângulo de visualização de conteúdo exibido pelo gráfico de dados.

    Additional Resources

    Você pode encontrar mais informações sobre recursos de gráfico relacionados nestes tópicos:

    API References

    A seguir está uma lista de membros da API mencionados nas seções acima: