Angular navegação no gráfico

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

    Angular 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 Angular completo e comece a criar seus próprios aplicativos em minutos. Faça o download 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 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

    A navegação no gráfico de dados Angular 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.
    • 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 do modificador Chave correspondente
    Shift TURNO
    Control CTRL
    Windows GANHAR
    Apple MAÇÃ
    None sem chaves

    Chart Navigation with Scrollbars

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

    Eles podem ser configurados para as seguintes opções

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

    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 IgxDataChartComponent control.

    O gráfico de dados Angular 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: 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

    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: