تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
ملاحظة مهمة: لقد تم إيقاف جزء "مخططات الصور" في "أدوات مخططات Google" رسميًا اعتبارًا من 20 نيسان (أبريل) 2012. وسيبقى بإمكانك استخدامه وفقًا لسياسة الإيقاف المتّبعة لدينا.
يُستخدم مخطط الشمعدان لإظهار القيمة الافتتاحية والختامية متراكبة فوق تباين إجمالي. غالبًا ما يتم استخدام مخططات الشموع لإظهار سلوك قيمة الأسهم. في هذا المخطط، يتم رسم العناصر التي تكون فيها القيمة الافتتاحية أقل من القيمة الختامية باللون الأخضر، والعناصر التي تكون فيها القيمة الافتتاحية أكبر من القيمة الختامية يتم رسمها باللون الأحمر. يمكنك الاطّلاع على مستندات الشموع في واجهة برمجة تطبيقات Google Charts للحصول على مزيد من المعلومات.
اسم فئة العرض المرئي هو google.visualization.ImageCandlestickChart.
var visualization = new google.visualization.ImageCandlestickChart(container);
تنسيق البيانات
خمسة أعمدة، حيث يصف كل صف علامة شمعدان واحدة:
العمود 0: سلسلة تُستخدم كتصنيف لهذه العلامة على المحور "س".
العمود 1: رقم يحدّد القيمة الأدنى/الأدنى لهذه العلامة. هذه هي قاعدة الخط الأسود.
العمود 2: رقم يحدّد القيمة الافتتاحية/الأولية لهذه العلامة. ويكون هذا حدًا عموديًا واحدًا للشمعة. إذا كانت قيمة العمود 3 أقل من قيمة العمود 3، ستكون الشمعة خضراء، وإلا فستكون حمراء.
العمود 3: رقم يحدّد القيمة الختامية/النهائية لهذه العلامة. هذا هو الحد العمودي الثاني للشمعة. إذا كانت قيمة العمود 2 أقل من قيمة العمود 2، ستكون الشمعة حمراء، وإلا فستكون خضراء.
العمود 4: رقم يحدّد القيمة العالية/الأقصى لهذه العلامة. هذا هو الجزء العلوي من الخط الأسود.
خيارات الضبط
بالإضافة إلى الخيارات التي يتيحها مخطط الصور العام،
يتيح "مخطط الشموع" الخيارات التالية:
الاسم
النوع
القيمة التلقائية
الوصف
backgroundColor
سلسلة
'#FFFFFF' (أبيض)
لون خلفية الرسم البياني هذه سلسلة #RRGGBB، بما في ذلك علامة #.
showAxisLines
boolean
صحيح
تحديد ما إذا كان سيتم إظهار خطوط المحور أم لا. في حال الضبط على "خطأ"، لن تظهر أيضًا تصنيفات المحاور.
الطول
الرقم
ارتفاع العنصر المتضمّن
تمثّل هذه السمة ارتفاع الرسم البياني بالبكسل. إذا كانت 30 < height أو height > 1,000، سيتم ضبط هذه القيمة تلقائيًا على 200.
الحد الأقصى
الرقم
الحد الأقصى لقيمة البيانات
الحد الأقصى لقيمة المحور "ص".
دقيقة
الرقم
الحد الأدنى لقيمة البيانات
الحد الأدنى لقيمة المحور "ص".
showCategoryLabels
boolean
صحيح
إذا كانت القيمة "false"، يخفي تصنيفات المحور "س".
showValueLabels
boolean
صحيح
إذا كانت القيمة "false"، يخفي تصنيفات المحور "ص".
showValueLabelsInternal
الرقم
تلقائي
يشير ذلك المصطلح إلى التباعد بين تصنيفات المحور "ص" بالبكسل.
title
سلسلة
''
النص المطلوب عرضه أعلى الرسم البياني
العرض
الرقم
عرض العنصر المتضمّن
عرض الرسم البياني بالبكسل إذا كانت width أقل من 30 أو أكبر من 1,000، سيتم ضبط width على 300.
تاريخ التعديل الأخير: 2024-07-10 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2024-07-10 (حسب التوقيت العالمي المتفَّق عليه)"],[],[],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)."]]
