Web Components Chart Navigation

    The Ignite UI for Web Components charts allows for interactive panning and zooming via the mouse, keyboard and touch.

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

    Chart Navigation with User Interactions

    Whether or not zooming is on by default depends on the chart you are using. If you are using IgcCategoryChartComponent, it is on by default, but it is not in the IgcDataChartComponent. 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.

    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

    Navigation in the Web Components data chart can happen with either touch, the mouse or the keyboard. The following operations can be invoked using touch, mouse or keyboard operations by default:

    • 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 IgcDataChartComponent control.

    The Web Components data chart provides several navigation properties that are updated each time a zoom or pan operation happens in the chart. You can also set each of these properties to zoom or pan the data chart programmatically. The following is a list of these properties:

    • 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: