Blazor navegação no gráfico

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

    Blazor 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 Blazor completo e comece a criar seus próprios aplicativos em minutos. Baixe-o gratuitamente.

    Chart Navigation with User Interactions

    Se o zoom está ativado ou não por padrão depende do gráfico que você está usando. Se você estiver usando IgbCategoryChart, ele está ativado por padrão, mas não está no IgbDataChart. Para habilitar ou desabilitar a navegação na interface do usuário, você precisa definir as IsHorizontalZoomEnabled propriedades e/ou do IsVerticalZoomEnabled gráfico, dependendo da direção em que deseja habilitar ou desabilitar o zoom.

    Também é possível ampliar ou deslocar simplesmente clicando com o mouse ou usando o toque. A DefaultInteraction propriedade do gráfico de dados determina o que acontece nos eventos de clique ou toque do mouse. Essa propriedade é padronizada e DragZoom, quando definida como isso com o zoom ativado, clicar e arrastar colocará um retângulo de visualização sobre a área de plotagem que se tornará a área ampliada do gráfico. Essa DefaultInteraction propriedade também pode ser definida como DragPan para permitir o movimento panorâmico ou None para impedir essas operações.

    Chart Navigation with Touch, Mouse and Keyboard

    A navegação no gráfico de dados Blazor 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 de área: Clique e arraste o mouse dentro da área de plotagem com a DefaultInteraction propriedade definida como padrão -DragZoom.

    As operações de zoom e panorâmica também podem ser ativadas usando teclas modificadoras definindo as DragModifier propriedades e PanModifier, respectivamente. Essas propriedades podem ser definidas para as seguintes teclas modificadoras e, quando pressionadas, 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 rolado ativando as VerticalViewScrollbarMode propriedades e HorizontalViewScrollbarMode.

    Eles podem ser configurados para as seguintes opções

    • Persistent- As barras de rolagem sempre permanecem visíveis, desde que o gráfico seja ampliado, e desaparecem quando totalmente reduzidas.
    • Fading- As barras de rolagem desaparecem após o uso e reaparecem quando o mouse está próximo de sua localização.
    • 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 IgbDataChart control.

    O gráfico de dados Blazor 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 parte X do retângulo de exibição de conteúdo exibido pelo gráfico de dados.
    • WindowPositionVertical: Um valor numérico que descreve a parte Y do retângulo de exibição de conteúdo exibido pelo gráfico de dados.
    • WindowRect: Um Rect objeto que representa um retângulo que representa a parte do gráfico que está atualmente em exibição. Por exemplo, um WindowRect de "0, 0, 1, 1" seria a totalidade do gráfico de dados.
    • WindowScaleHorizontal: Um valor numérico que descreve a parte da largura do retângulo de exibição de conteúdo exibido pelo gráfico de dados.
    • WindowScaleVertical: Um valor numérico que descreve a parte da altura do retângulo de exibiçã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: