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