Gráfico de imagens de velas

Importante: o uso do componente de gráficos de imagem das Ferramentas de gráfico do Google foi suspenso oficialmente em 20 de abril de 2012. Ela vai continuar funcionando de acordo com nossa política de descontinuação.

  1. Visão geral
  2. Exemplo
  3. Carregando
  4. Formato de dados
  5. Opções de configuração
  6. Métodos
  7. Eventos
  8. Política de dados

Visão geral

Um gráfico de velas que é renderizado como uma imagem usando a API Google Charts.

Um gráfico de velas é usado para mostrar um valor de abertura e fechamento sobreposto a uma variação total. Os gráficos de velas são usados com frequência para mostrar o comportamento do valor das ações. Nesse gráfico, os itens em que o valor de abertura é menor que o valor de fechamento são exibidos em verde. Já aqueles em que o valor de abertura é maior que o de fechamento são mostrados em vermelho. Consulte a documentação do candlestick na API Google Charts para mais informações.

Exemplo

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagechart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var options = {};
        dataTable = google.visualization.arrayToDataTable([
          ['Gainers',10,30,45,60],
          ['Losers',20,35,25,45],
          ], true);

       var chart = new google.visualization.ImageCandlestickChart(document.getElementById('chart_div'));
       chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Carregando

O nome do pacote google.charts.load é "imagechart". 

  google.charts.load('current', {packages: [imagechart]});

O nome da classe do layout é google.visualization.ImageCandlestickChart. 

  var visualization = new google.visualization.ImageCandlestickChart(container);

Formato de dados

Cinco colunas, em que cada linha descreve um único marcador de vela:

  • Col 0: string usada como um rótulo para esse marcador no eixo X.
  • Col 1: número que especifica o valor mínimo/menor desse marcador. Essa é a base da linha preta.
  • Col 2:número que especifica o valor inicial/de abertura deste marcador. Trata-se de uma borda vertical da vela japonesa. Se for menor que o valor da coluna 3, a vela vai ficar verde, caso contrário, vai ficar vermelha.
  • Col 3: número que especifica o valor de fechamento/final deste marcador. É a segunda borda vertical da vela japonesa. Se for menor que o valor da coluna 2, a vela vai ficar vermelha; caso contrário, vai ficar verde.
  • Col 4:número que especifica o valor alto/máximo deste marcador. Essa é a parte superior da linha preta.

Opções de configuração

Além das opções aceitas pelo Gráfico de imagem genérico, o Gráfico de velas é compatível com as seguintes opções:

Nome Tipo Padrão Descrição
backgroundColor string '#FFFFFF' (branca) A cor do plano de fundo do gráfico. Esta é uma string #RRGGBB, incluindo a marca #.
Linhas de linhas de apresentação boolean verdadeiro Define se as linhas do eixo serão mostradas. Se for definido como falso, os rótulos dos eixos também não serão exibidos.
altura number Altura do elemento contido Altura do gráfico, em pixels. Se 30 < altura ou altura > 1.000,o valor padrão será 200.
max number Valor máximo dos dados O valor máximo do eixo Y.
min number Valor mínimo dos dados O valor mínimo do eixo Y.
Marcadores de categoria boolean verdadeiro Se for falso, oculta os rótulos do eixo X.
Rótulos de valor de exibição boolean verdadeiro Se for falso, oculta os rótulos do eixo Y.
showValueLabelInternal number auto O espaçamento entre os rótulos do eixo Y, em pixels.
title string '' Texto a ser exibido acima do gráfico.
largura number Largura do elemento contido Largura do gráfico, em pixels. Se width for menor que 3.000 ou maior que 1.000, width será definido como 300.

Métodos

Método Tipo de retorno Descrição
draw(data, options) nenhum Desenha o gráfico.

Eventos

Você pode se registrar para ouvir os eventos descritos na página Gráfico de imagens genéricos.

Política de dados

Consulte a política de geração de registros da API Chart.