תרשים פמוט משמש להצגת ערך פתיחה וסגירה של פמוט כשכבת-על מעל לשונות כוללת. לרוב, תרשימי פמוט משמשים להצגת התנהגות של ערכי מניה. בתרשים הזה, פריטים שבהם ערך הפתיחה נמוך מערך הסגירה מוצגים בירוק ופריטים שבהם ערך הפתיחה גדול מערך הסגירה מוצגים באדום. מידע נוסף זמין במסמכי התיעוד של פמוטות ב-Google Charts API.
שם הכיתה של התצוגה החזותית הוא google.visualization.ImageCandlestickChart.
var visualization = new google.visualization.ImageCandlestickChart(container);
פורמט נתונים
חמש עמודות, כאשר כל שורה מתארת סמן של פמוט אחד:
Col 0: מחרוזת המשמשת כתווית של הסמן הזה בציר ה-X.
קול 1: מספר שמציין את הערך הנמוך/המינימלי של הסמן הזה. זהו הבסיס של הקו השחור.
קול 2: מספר שמציין את ערך הפתיחה/הראשי של הסמן. זהו גבול אנכי אחד של הנר. אם הערך בעמודה 3 קטן מהערך בעמודה 3, הנר יהיה ירוק. אחרת, הנר יהיה אדום.
קול 3: מספר שמציין את ערך הסגירה/הסופי של הסמן הזה. זהו הגבול האנכי השני של הנר. אם הערך בעמודה 2 קטן מהערך בעמודה 2, הנר יהיה אדום. אחרת, הנר יהיה ירוק.
קול 4: מספר שמציין את הערך הגבוה/המקסימלי של הסמן הזה. זהו החלק העליון של הקו השחור.
אפשרויות הגדרה
בנוסף לאפשרויות שנתמכות בתרשים תמונות גנרי, תרשים פמוט תומך באפשרויות הבאות:
שם
סוג
ברירת המחדל
תיאור
backgroundColor
string
'#FFFFFF' (לבן)
צבע הרקע של התרשים. זוהי מחרוזת #RRGGBB, כולל הסימן #.
showAxisLines
boolean
true
הגדרה שקובעת אם להציג את קווי הציר. אם המדיניות מוגדרת כ-False, גם תוויות הצירים לא יוצגו.
גובה
number
גובה הרכיב שמכיל
גובה התרשים, בפיקסלים. אם 30 < height או height > 1,000, הערך הזה יוגדר כברירת מחדל ל-200.
מקסימלי
number
ערך נתונים מקסימלי
הערך המקסימלי של ציר ה-Y.
דקה
number
ערך נתונים מינימלי
הערך המינימלי של ציר ה-Y.
showCategoryLabels
boolean
true
אם הערך הוא False, התוויות של ציר ה-X יוסתרו.
showValueLabels
boolean
true
אם הערך הוא False, התוויות של ציר ה-Y יוסתרו.
showValueLabelsInternal
number
אוטומטי
הריווח בין התוויות של ציר ה-Y, בפיקסלים.
title
string
''
טקסט להצגה מעל התרשים.
רוחב
number
רוחב הרכיב שמכיל
רוחב התרשים, בפיקסלים. אם הערך של width קטן מ-30 או גדול מ-1,000, הערך של width יוגדר כ-300.
[[["התוכן קל להבנה","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 (שעון 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)."]]