Wykres świecowy renderowany jako obraz przy użyciu interfejsu Google Charts API.
Wykres świecowy służy do wyświetlania wartości otwarcia i zamknięcia nałożonych na całkowitą wariancję. Wykresy świecowe są często używane do przedstawiania wartości akcji. Na tym wykresie elementy, dla których wartość otwarcia jest mniejsza niż wartość zamknięcia, są rysowane na zielono, a te, dla których wartość otwarcia jest większa niż wartość zamknięcia, na czerwono. Więcej informacji znajdziesz w dokumentacji dotyczącej świec w interfejsie Google Charts API.
Nazwa klasy wizualizacji to google.visualization.ImageCandlestickChart.
var visualization = new google.visualization.ImageCandlestickChart(container);
Format danych
Pięć kolumn, w których każdy wiersz opisuje pojedynczy znacznik świecy:
Kolumna 0: ciąg znaków używany jako etykieta tego znacznika na osi X.
Kolumna 1: liczba określająca dolną/minimalną wartość znacznika. To jest podstawa czarnej linii.
Kolumna 2: liczba określająca wartość otwarcia/początkową tego znacznika. Ta wartość wyznacza jedną z krawędzi świecy – górną lub dolną. Jeśli wartość jest niższa od wartości z kolumny 3, świeca ma kolor zielony. W przeciwnym razie ma kolor czerwony.
Kolumna 3: liczba określająca wartość zamknięcia lub wartość końcową znacznika. Ta wartość wyznacza drugą z krawędzi świecy – górną lub dolną. Jeśli wartość jest niższa od wartości z kolumny 2, świeca jest czerwona. W przeciwnym razie ma kolor zielony.
Kolumna 4: liczba określająca wysoką/maksymalną wartość tego znacznika. To górny róg czarnej linii.
Opcje konfiguracji
Oprócz opcji obsługiwanych przez ogólny wykres graficzny wykres świecowy obsługuje następujące opcje:
Nazwa
Typ
Domyślne
Opis
backgroundColor
string,
'#FFFFFF' (biała)
Kolor tła wykresu. Jest to ciąg #RRGGBB ze znakiem #.
showAxisLines
boolean
prawda
Określa, czy wyświetlać linie osi. Jeśli ma wartość Fałsz, etykiety osi też nie są wyświetlane.
wysokość
Liczba
Wysokość elementu nadrzędnego
Wysokość wykresu w pikselach. Jeśli 30 < height lub height > 1000,ta wartość przyjmuje domyślną wartość 200.
maksimum
Liczba
Maksymalna wartość danych
Maksymalna wartość na osi Y.
min
Liczba
Minimalna wartość danych
Minimalna wartość na osi Y.
showCategoryLabels
boolean
prawda
Jeśli ma wartość Fałsz, etykiety osi X są ukrywane.
showValueLabels
boolean
prawda
Jeśli ma wartość Fałsz, etykiety osi Y są ukrywane.
showValueLabelsInternal
Liczba
automatycznie
Odstępy między etykietami na osi Y w pikselach.
tytuł
string,
''
Tekst do wyświetlenia nad wykresem.
szerokość
Liczba
Szerokość elementu, który zawiera
Szerokość wykresu w pikselach. Jeśli wartość parametru width jest mniejsza niż 30 lub większa niż 1000, wartość parametru width jest ustawiona na 300.
[[["Łatwo zrozumieć","easyToUnderstand","thumb-up"],["Rozwiązało to mój problem","solvedMyProblem","thumb-up"],["Inne","otherUp","thumb-up"]],[["Brak potrzebnych mi informacji","missingTheInformationINeed","thumb-down"],["Zbyt skomplikowane / zbyt wiele czynności do wykonania","tooComplicatedTooManySteps","thumb-down"],["Nieaktualne treści","outOfDate","thumb-down"],["Problem z tłumaczeniem","translationIssue","thumb-down"],["Problem z przykładami/kodem","samplesCodeIssue","thumb-down"],["Inne","otherDown","thumb-down"]],["Ostatnia aktualizacja: 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)."]]
