Google Charts API kullanılarak resim olarak oluşturulan bir şamdan grafik.
Şamdan grafikler, toplam varyansın üzerine yerleştirilen bir açılış ve kapanış değeri göstermek için kullanılır. Şamdan grafikler, genellikle hisse senedi değeri davranışını göstermek için kullanılır. Bu grafikte, açılış değeri kapanış değerinden düşük olan öğeler yeşil renkle, açılış değeri kapanış değerinden fazla olan öğeler kırmızı renkle çizilir. Daha fazla bilgi için Google Charts API'deki şamdan dokümanlarına bakın.
Görselleştirmenin sınıf adı: google.visualization.ImageCandlestickChart.
var visualization = new google.visualization.ImageCandlestickChart(container);
Veri Biçimi
Her satırın tek bir şamdan işaretçisini açıkladığı beş sütun:
Col 0: X ekseninde bu işaretçi için etiket olarak kullanılan dize.
Col 1: Bu işaretçinin alt/minimum değerini belirten sayı. Bu, siyah çizginin tabanıdır.
Col 2: Bu işaretçinin açılış/başlangıç değerini belirten sayı. Bu, mumun dikey kenarlıklarından biridir. 3. sütundaki değerden düşükse mum yeşil, aksi takdirde kırmızı olur.
Col 3: Bu işaretçinin kapanış/son değerini belirten numara. Bu, mumun ikinci dikey kenarlığıdır. 2. sütundaki değerden düşükse mum kırmızı, aksi takdirde yeşil olur.
Col 4: Bu işaretçinin yüksek/maksimum değerini belirten sayı. Bu, siyah çizginin üst kısmıdır.
Yapılandırma Seçenekleri
Şamdan Grafik, Genel Resim Grafiği tarafından desteklenen seçeneklere ek olarak aşağıdaki seçenekleri de destekler:
Ad
Tür
Varsayılan
Açıklama
backgroundColor
dize
"#FFFFFF" (beyaz)
Grafik için arka plan rengi. Bu, # işaretiyle birlikte bir # RRGGBB dizesidir.
showAxisLines
boolean
true
Eksen çizgilerinin gösterilip gösterilmeyeceğini belirler. Yanlış değerine ayarlanırsa eksen etiketleri de gösterilmez.
yükseklik
sayı
Kapsayıcı öğenin yüksekliği
Grafiğin piksel cinsinden yüksekliği. 30 < height veya height > 1.000 ise bu değer varsayılan olarak 200'e ayarlanır.
maks.
sayı
Maksimum veri değeri
Maksimum Y ekseni değeri.
dk
sayı
Minimum veri değeri
Minimum Y ekseni değeri.
showCategoryLabels
boolean
true
Yanlış değerine ayarlanırsa X ekseni etiketlerini gizler.
showValueLabels
boolean
true
Yanlış değerine ayarlanırsa Y ekseni etiketlerini gizler.
showValueLabelsInternal
sayı
otomatik
Y ekseni etiketleri arasındaki piksel cinsinden boşluk.
title
dize
''
Grafiğin üzerinde gösterilecek metin.
genişlik
sayı
Kapsayıcı öğenin genişliği
Grafiğin piksel cinsinden genişliği. width değeri 30'dan küçük veya 1.000'den büyükse width değeri 300 olarak ayarlanır.
Yöntemler
Yöntem
Dönüş Türü
Açıklama
draw(data, options)
yok
Grafiği çizer.
Etkinlikler
Genel Resim Grafiği sayfasında açıklanan etkinlikleri dinlemek için kaydolabilirsiniz.
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 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)."]]