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 um Gráfico de Ações usando oIgxFinancialChartComponent controle, vinculando seus dados e, opcionalmente, configurandochartType a propriedade paraLine valor, como 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 Crosshair fornece linhas cruzadas que se encontram no valor real de cada série alvo. Os tipos de mira incluem: Horizontal, Vertical e ambos. As Cruzes também podem ser configuradas para encaixar em pontos de dados definindo acrosshairsSnapToData propriedade como verdadeira, caso contrário as miras serão interpoladas entre os pontos de dados. 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 em tempo de execução. Para exibir inicialmente um painel de indicadores, aindicatorTypes propriedade deve ser definida para 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 de alta, mínima, abertura e fechamento da ação ao longo do tempo. Além disso, pode exibir linhas de tendência e sobreposições. Seu usuário final pode escolher diferentes tipos de gráficos na barra de ferramentas. Por padrão, o tipo de gráfico está definido paraAuto. Você pode sobrescrever a configuração padrão, como 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 desligado definindo ozoomSliderType comonone como demonstrado no seguinte código:

    Note que você deve definir azoomSliderType opção para o mesmo valor que achartType opção está definida. Dessa forma, o controle deslizante de zoom mostrará a pré-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: