Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Importante: a parte de gráficos de imagem das Ferramentas de gráficos do Google foi oficialmente suspensa em 20 de abril de 2012. Ele continuará funcionando de acordo com nossa política de descontinuação.
Um gráfico candlestick renderizado como imagem usando a Google Charts API.
Um gráfico candlestick é usado para mostrar um valor de abertura e fechamento sobreposto em uma variância total. Os gráficos candlestick costumam ser usados para mostrar o comportamento do valor das ações. Neste gráfico, os itens em que o valor de abertura é menor que o de fechamento são desenhados em verde, e os itens em que o valor de abertura é maior que o de fechamento são desenhados em vermelho. Consulte a documentação do candlestick na API Google Charts para mais informações.
O nome da classe da visualização é 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 rótulo para o marcador no eixo X.
Col 1: número que especifica o valor baixo/mínimo desse marcador. Essa é a base da linha preta.
Col 2: número que especifica o valor de abertura/inicial desse marcador. Essa é a primeira divisão vertical do candlestick. Se for menor que o valor da coluna 3, o candlestick será verde. Caso contrário, será vermelho.
Col 3: número que especifica o valor de fechamento/final desse marcador. Essa é a segunda divisão vertical do candlestick. Se for menor que o valor da coluna 2, o candlestick será vermelho. Caso contrário, será verde.
Col 4: número que especifica o valor alto/máximo desse marcador. Este é o topo da linha preta.
Opções de configuração
Além das opções aceitas pelo gráfico genérico de imagens,
o gráfico candlestick é compatível com as seguintes opções:
Nome
Tipo
Padrão
Descrição
backgroundColor
string
'#FFFFFF' (branco)
A cor do plano de fundo do gráfico. Essa é uma string #RRGGBB, incluindo a marca #.
showAxisLines
boolean
verdadeiro
Indica se as linhas do eixo serão mostradas. Se definido como falso, os rótulos dos eixos também não serão mostrados.
height
number
Altura do elemento contêiner
Altura do gráfico, em pixels. Se 30 < height ou height > 1.000,o padrão será 200.
max
number
Valor máximo dos dados
O valor máximo do eixo Y.
min
number
Valor mínimo de dados
O valor mínimo do eixo Y.
showCategoryLabels
boolean
verdadeiro
Se falso, oculta os rótulos do eixo X.
showValueLabels
boolean
verdadeiro
Se falso, oculta os rótulos do eixo Y.
showValueLabelsInternal
number
automático
O espaçamento entre os rótulos do eixo Y, em pixels.
título
string
"
Texto a ser exibido acima do gráfico.
width
number
Largura do elemento contêiner
Largura do gráfico, em pixels. Se a largura for menor que 30 ou maior que 1.000, a largura será definida como 300.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2024-07-10 UTC."],[],[],null,["# Candlestick Image Chart\n\n**Important:** The Image Charts portion of Google Chart Tools has been [officially deprecated](http://googledevelopers.blogspot.com/2012/04/changes-to-deprecation-policies-and-api.html) as of April 20, 2012. It will continue to work as per our [deprecation policy](/chart/terms). \n1. [Overview](#Overview)\n2. [Example](#Example)\n3. [Loading](#Loading)\n4. [Data Format](#Data_Format)\n5. [Configuration Options](#Configuration_Options)\n6. [Methods](#Methods)\n7. [Events](#Events)\n8. [Data Policy](#Data_Policy)\n\nOverview\n--------\n\n\nA candlestick chart that is rendered as an image using the [Google Charts API](/chart/image/docs/gallery/compound_charts#candlestick_charts).\n\nA candlestick chart is used to show an opening and closing value overlaid on top of a total variance. Candlestick charts are often used to show stock value behavior. In this chart, items where the opening value is less than the closing value are drawn in green, and items where the opening value is more than the closing value are drawn in red. See the [candlestick documentation in the Google Charts API](/chart/image/docs/gallery/compound_charts#candlestick_charts) for more information.\n\nExample\n-------\n\n\u003cbr /\u003e\n\n\\\u003cscript type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"\\\u003e\\\u003c/script\\\u003e \\\u003cscript type=\"text/javascript\"\\\u003e google.charts.load('current', {'packages':\\['imagechart'\\]}); \\\u003c/script\\\u003e \\\u003cdiv id=\"chart_div\" style=\"width: 400px; height: 240px;\"\\\u003e\\\u003c/div\\\u003e 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); } \n\n```html\n\u003chtml\u003e\n \u003chead\u003e\n \u003cscript type=\"text/javascript\" src=\"https://www.gstatic.com/charts/loader.js\"\u003e\u003c/script\u003e\n \u003cscript type=\"text/javascript\"\u003e\n google.charts.load(\"current\", {packages:[\"imagechart\"]});\n google.charts.setOnLoadCallback(drawChart);\n\n function drawChart() {\n\n var options = {};\n dataTable = google.visualization.arrayToDataTable([\n ['Gainers',10,30,45,60],\n ['Losers',20,35,25,45],\n ], true);\n\n var chart = new google.visualization.ImageCandlestickChart(document.getElementById('chart_div'));\n chart.draw(dataTable, options);\n }\n \u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cdiv id=\"chart_div\" style=\"width: 400px; height: 240px;\"\u003e\u003c/div\u003e\n \u003c/body\u003e\n\u003c/html\u003e\n```\n\nLoading\n-------\n\n\nThe `google.charts.load` package name is `\"imagechart\"`. \n\n```transact-sql\n google.charts.load('current', {packages: [imagechart]});\n```\n\n\nThe visualization's class name is `google.visualization.`ImageCandlestickChart. \n\n```gdscript\n var visualization = new google.visualization.ImageCandlestickChart(container);\n```\n\nData Format\n-----------\n\nFive columns, where each row describes a single candlestick marker:\n\n- **Col 0:** String used as a label for this marker on the X axis.\n- **Col 1:** Number specifying the low/minimum value of this marker. This is the base of the black line.\n- **Col 2:** Number specifying the opening/initial value of this marker. This is one vertical border of the candle. If less than the column 3 value, the candle will be green; otherwise it will be red.\n- **Col 3:** Number specifying the closing/final value of this marker. This is the second vertical border of the candle. If less than the column 2 value, the candle will be red; otherwise it will be green.\n- **Col 4:** Number specifying the high/maximum value of this marker. This is the top of the black line.\n\nConfiguration Options\n---------------------\n\nIn addition to the options supported by the [Generic Image Chart](/chart/interactive/docs/gallery/genericimagechart#Configuration_Options),\nthe Candlestick Chart supports the following options:\n\n| Name | Type | Default | Description |\n|-------------------------|---------|----------------------------------|-------------------------------------------------------------------------------------------------------------------|\n| backgroundColor | string | '#FFFFFF' (white) | The background color for the chart. This is a #RRGGBB string, including the # mark. |\n| showAxisLines | boolean | true | Whether to show the axis lines. If set to false, then the axis labels will also not be shown. |\n| height | number | Height of the containing element | Height of the chart, in pixels. If 30 \\\u003c *height* or *height* \\\u003e 1,000 then this value will default to 200. |\n| max | number | Maximum data value | The maximum Y axis value. |\n| min | number | Minimum data value | The minimum Y axis value. |\n| showCategoryLabels | boolean | true | If false, hides the X axis labels. |\n| showValueLabels | boolean | true | If false, hides the Y axis labels. |\n| showValueLabelsInternal | number | auto | The spacing between the Y axis labels, in pixels. |\n| title | string | '' | Text to display above the chart. |\n| width | number | Width of the containing element | Width of the chart, in pixels. If *width* is less than 30 or greater than 1,000, then *width* will be set to 300. |\n\nMethods\n-------\n\n| Method | Return Type | Description |\n|-----------------------|-------------|------------------|\n| `draw(data, options)` | none | Draws the chart. |\n\nEvents\n------\n\nYou can register to hear the events described on the [Generic\nImage Chart](/chart/interactive/docs/gallery/genericimagechart#Events) page.\n\nData Policy\n-----------\n\n\nPlease refer to the [Chart API logging policy](/chart/interactive/faq#logging)."]]
