Angular Gráfico de Ações

    O Ignite UI for Angular Gráfico de Ações, às vezes chamado Angular de Gráfico Financeiro ou Gráfico de Velas, é uma visualização composta que renderiza dados de ticker de ações ou dados de preços em uma exibição interativa de séries temporais. O gráfico de ações mostra os preços das ações de um ticker ao longo do tempo em um eixo X de série temporal. Além disso, este gráfico mostra informações para os dados do ticker de uma empresa, como Preço de Abertura, Preço Alto, Preço Baixo e Preço de Fechamento (OHLC) para um período de tempo configurável. O gráfico de ações oferece várias maneiras pelas quais os dados podem ser visualizados e interpretados, incluindo modos de exibição de preço e volume e uma série de indicadores de ações.

    Angular Stock Chart Example

    Você pode criar o Gráfico de Ações usando o IgxFinancialChartComponent controle vinculando seus dados e, opcionalmente, definindo chartType a propriedade como Line value, conforme mostrado no exemplo abaixo.

    Stock Chart Recommendations

    Are Angular Stock Charts right for your project?

    O gráfico de ações típico é representado com dados de ticker em um gráfico de candlestick que é usado para a análise técnica das faixas de preço. Um gráfico de candlestick compara os preços altos e baixos de um dia com a abertura e o fechamento do símbolo de ticker.

    • O corpo do gráfico de velas mostra os valores de abertura e fechamento de negociações (O/C).
    • Os pavios do gráfico de velas mostram os preços de negociação altos e baixos (H/L).
    • A distância entre o topo e a base do valor do ticker é o intervalo diário do preço do ticker.
    • O valor do ticker do gráfico de velas fica vazio quando o ativo fechou mais alto do que abriu.
    • O valor do ticker do gráfico de velas é preenchido quando o ativo fechou abaixo do valor de abertura.
    • Uma vela preta ou vermelha representa um preço com um preço de fechamento menor que o fechamento da vela anterior.
    • Uma vela branca ou verde representa um preço de fechamento mais alto que o fechamento da vela anterior.

    O gráfico de ações pode ser configurado para exibir um dos seguintes:

    • Gráfico de velas
    • Gráfico de barras
    • Gráfico de colunas
    • Gráfico de linhas

    Como um gráfico de ações se destina a permitir que o usuário execute funções de análise de dados, ele inclui elementos interativos como:

    • Filtros baseados em tempo
    • Preços Ver
    • Visualização de volume
    • Indicadores de visualização
    • Linhas de tendência
    • Navegação / Visualização da barra de zoom

    Stock Chart Data Structure:

    • A fonte de dados deve ser uma matriz ou uma lista de itens de dados.
    • A fonte de dados deve conter pelo menos um item de dados.
    • Todos os itens de dados devem conter pelo menos uma coluna de data e hora (ou sequência de caracteres) que represente a data dos dados do ticker.
    • Todos os itens de dados devem conter 1 coluna numérica para gráficos de barras, linhas e colunas.
    • Todos os itens de dados devem conter 4 colunas numéricas para Abertura, Máxima, Mínima, Fechamento (OHLC) para um gráfico de velas.
    • Todos os itens de dados devem conter 5 colunas numéricas para Abertura, Máxima, Mínima, Fechamento e Volume para um gráfico de velas.

    Angular Stock Chart with Multiple Series

    Angular Gráfico de Ações

    Neste exemplo, o gráfico de ações representa o S&P 500 ao longo de um ano; útil para investidores e para conduzir análises técnicas e prever preços/relatórios futuros.

    Angular Stock Chart Styling

    Se você precisar de um Gráfico de Ações com mais recursos, como outras séries compostas, você pode configurar a espessura, contornos, pincéis, contornos negativos, pincéis negativos, conforme demonstrado abaixo. Neste exemplo, o gráfico de ações está comparando a receita entre Amazon, Microsoft e Tesla.

    Angular Chart Annotations

    A Camada de Anotação de Mira fornece linhas de cruzamento que atendem ao valor real de cada série de destino. Os tipos de mira incluem: Horizontal, Vertical e Ambos. A mira também pode ser configurada para se encaixar em pontos de dados definindo a crosshairsSnapToData propriedade como true, caso contrário, a mira será interpolada entre os pontos de dados. As anotações também podem ser ativadas para exibir o valor da mira ao longo do eixo.

    A Camada de Valor Final fornece uma visualização rápida ao longo do eixo do valor final exibido em uma série.

    A Camada de Chamada exibe uma chamada nas posições X/Y.

    Observação: ao usar o modo de eixo X ordinal, o CalloutsXMemberPath deve apontar para o índice numérico do item, caso contrário, o CalloutsXMemberPath deve apontar para o valor de tempo.

    Angular Chart Panes

    Os seguintes painéis estão disponíveis:

    • Painel de preços - renderiza preços usando linhas, velas, barras (OHLC), linhas de tendência e sobreposições financeiras.
    • Painel de Indicadores - Renderiza todos os indicadores financeiros em um gráfico separado, enquanto as sobreposições de BollingerBands e PriceChannel são renderizadas no Painel de Preços porque compartilham o mesmo intervalo de valores no Eixo Y.
    • Painel de Volume - Renderiza volumes de ações usando gráficos de Coluna, Linha e Área abaixo de todos os painéis acima.
    • Painel de zoom - controla o zoom de todos os painéis e é sempre renderizado na parte inferior do gráfico.

    Indicator Pane

    Indicadores financeiros são frequentemente usados por traders para medir mudanças e mostrar tendências nos preços de ações. Esses indicadores são geralmente exibidos abaixo do painel de preços porque eles não compartilham a mesma escala do eixo Y.

    Por padrão, os painéis indicadores não são exibidos. A barra de ferramentas permite que o usuário final selecione qual indicador exibir no tempo de execução. Para exibir um painel indicador inicialmente, a indicatorTypes propriedade deve ser definida como pelo menos um tipo de indicador, conforme demonstrado no código a seguir:

    Volume Pane

    O painel de volume representa o número de ações negociadas durante um determinado período. Volume baixo indicaria pouco interesse, enquanto volume alto indicaria alto interesse com muitas negociações. Isso pode ser exibido usando tipos de gráfico de coluna, linha ou área. A barra de ferramentas permite que o usuário final exiba o painel de volume selecionando um tipo de gráfico para renderizar os dados em tempo de execução. Para exibir o painel, um tipo de volume deve ser definido, conforme demonstrado no código a seguir:

    Price Pane

    Este painel exibe os preços das ações e mostra os preços altos, baixos, de abertura e fechamento das ações ao longo do tempo. Além disso, ele pode exibir linhas de tendência e sobreposições. Seu usuário final pode escolher diferentes tipos de gráfico na barra de ferramentas. Por padrão, o tipo de gráfico é definido como Auto. Você pode substituir a configuração padrão, conforme demonstrado no código a seguir:

    Observe que é recomendável usar o tipo de gráfico de linhas ao plotar várias fontes de dados ou ao plotar fontes de dados com muitos pontos de dados.

    Zoom Pane

    Esse painel controla o zoom de todos os painéis exibidos. Esse painel é exibido por padrão. Ele pode ser desativado definindo o zoomSliderType como none conforme demonstrado no código a seguir:

    Observe que você deve definir a zoomSliderType opção com o mesmo valor que a chartType opção está definida. Dessa forma, o controle deslizante de zoom mostrará a visualização correta do painel de preços. O código a seguir demonstra como fazer isso:

    Neste exemplo, o gráfico de ações está representando a receita dos Estados Unidos.

    Additional Resources

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

    API References

    A tabela a seguir lista os membros da API mencionados nas seções acima: