Un grafico a candele visualizzato come immagine utilizzando l'API Google Profiles.
Un grafico a candele viene utilizzato per mostrare un valore di apertura e chiusura sovrapposto a una varianza totale. I grafici a candele vengono spesso utilizzati per mostrare il comportamento del valore delle azioni. In questo grafico, gli elementi in cui il valore di apertura è inferiore al valore di chiusura sono disegnati in verde, mentre gli elementi in cui il valore di apertura è superiore al valore di chiusura sono disegnati in rosso. Per ulteriori informazioni, consulta la documentazione relativa ai candele nell'API Google Listings.
Il nome della classe della visualizzazione è google.visualization.ImageCandlestickChart.
var visualization = new google.visualization.ImageCandlestickChart(container);
Formato dei dati
Cinque colonne, dove ogni riga descrive un singolo indicatore a candele:
Col 0: stringa utilizzata come etichetta per questo indicatore sull'asse X.
Col 1: numero che specifica il valore minimo/minimo dell'indicatore. Questa è la base della linea nera.
Col 2: numero che specifica il valore di apertura/iniziale dell'indicatore. Si tratta di un bordo verticale della candela. Se è inferiore al valore della colonna 3, la candela sarà verde, altrimenti sarà rossa.
Col 3: numero che specifica il valore di chiusura/finale dell'indicatore. Si tratta del secondo bordo verticale della candela. Se è inferiore al valore della colonna 2, la candela sarà rossa, altrimenti sarà verde.
Col 4: numero che specifica il valore massimo dell'indicatore. Questa è la parte superiore della linea nera.
Opzioni di configurazione
Oltre alle opzioni supportate dal Grafico immagine generico,
il grafico a candele supporta le seguenti opzioni:
Nome
Tipo
Predefinita
Descrizione
backgroundColor
stringa
'#FFFFFF' (bianco)
Il colore di sfondo del grafico. Questa è una stringa #RRGGBB, incluso il segno #.
showAxisLines
boolean
true
Indica se mostrare le linee degli assi. Se impostato su false, le etichette degli assi non verranno visualizzate.
altezza
numero
Altezza dell'elemento contenitore
Altezza del grafico, in pixel. Se 30 < height o height > 1000,il valore predefinito sarà 200.
max
numero
Valore massimo dei dati
Il valore massimo dell'asse Y.
min
numero
Valore minimo dei dati
Il valore minimo dell'asse Y.
showCategoryLabels
boolean
true
Se il valore è false, nasconde le etichette dell'asse X.
showValueLabels
boolean
true
Se il valore è false, nasconde le etichette dell'asse Y.
showValueLabelsInternal
numero
Automatica
La spaziatura tra le etichette dell'asse Y, in pixel.
title
stringa
"
Testo da visualizzare sopra il grafico.
larghezza
numero
Larghezza dell'elemento contenitore
Larghezza del grafico, in pixel. Se width è inferiore a 30 o maggiore di 1000, il valore width sarà impostato su 300.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 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)."]]
