تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
ملاحظة مهمة: لقد تم إيقاف جزء "مخططات الصور" في "أدوات مخططات Google" رسميًا اعتبارًا من 20 نيسان (أبريل) 2012. وسيبقى بإمكانك استخدامه وفقًا لسياسة الإيقاف المتّبعة لدينا.
تحدد لونًا أساسيًا لاستخدامه في كل السلاسل، وستكون كل سلسلة تدرجًا
للون المحدد. ويتم تحديد الألوان في تنسيق ألوان Chart API.
يتم تجاهل السياسة إذا تم تحديد colors.
الألوان
مصفوفة<string>
تلقائية
استخدِم هذا الخيار لتحديد ألوان معيّنة لكل سلسلة بيانات. ويتم تحديد الألوان في تنسيق ألوان Chart API.
يُستخدم اللون i في عمود البيانات i، والذي يلتف حول البداية
إذا كان هناك أعمدة بيانات أكثر من الألوان. إذا كانت صيغ اللون الواحد مقبولة لكل السلاسل، استخدِم الخيار color
بدلاً من ذلك.
enableEvents
boolean
false
يؤدي إلى طرح الرسوم البيانية للأحداث التي يشغّلها المستخدم، مثل النقر أو الماوس.
لا تتوفّر هذه الميزة إلا لأنواع محددة من الرسوم البيانية. يمكنك الاطّلاع على الأحداث أدناه.
الطول
الرقم
ارتفاع الحاوية
ارتفاع الرسم البياني بالبكسل
is3D
boolean
false
في حال ضبطها على "صحيح"، يتم عرض رسم بياني ثلاثي الأبعاد.
تصنيفات
سلسلة
"بدون"
التصنيف، إن وجد، الذي سيظهر لكل شريحة. اختَر من بين القيم التالية:
'none' - لا توجد تصنيفات.
"القيمة" - استخدام قيمة الشريحة كتسمية.
"الاسم" - استخدم اسم الشريحة (اسم العمود).
أسطورة
سلسلة
"يمين"
موقع وسيلة الإيضاح على الرسم البياني. اختَر إحدى القيم التالية: 'top' أو 'bottom' أو 'left' أو 'right' أو 'none'.
تاريخ التعديل الأخير: 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,["# Visualization: Pie Chart (Image)\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 pie chart that is rendered as an image using the [Google Charts API](/chart/image/docs/gallery/pie_charts).\n\nExample\n-------\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':\\['imagepiechart'\\]}); \\\u003c/script\\\u003e \\\u003cdiv id=\"chart_div\" style=\"width: 400px; height: 240px;\"\\\u003e\\\u003c/div\\\u003e google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable(\\[ \\['Task', 'Hours per Day'\\], \\['Work', 11\\], \\['Eat', 2\\], \\['Commute', 2\\], \\['Watch TV', 2\\], \\['Sleep', 7\\] \\]); var chart = new google.visualization.ImagePieChart(document.getElementById('chart_div')); chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'}); } \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:[\"imagepiechart\"]});\n google.charts.setOnLoadCallback(drawChart);\n\n function drawChart() {\n var data = google.visualization.arrayToDataTable([\n ['Task', 'Hours per Day'],\n ['Work', 11],\n ['Eat', 2],\n ['Commute', 2],\n ['Watch TV', 2],\n ['Sleep', 7]\n ]);\n\n var chart = new google.visualization.ImagePieChart(document.getElementById('chart_div'));\n\n chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});\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 `\"imagepiechart\"`: \n\n```gdscript\n google.charts.load('current', {packages: ['imagepiechart']});\n```\n\n\nThe visualization's class name is `google.visualization.ImagePieChart` \n\n```gdscript\n var visualization = new google.visualization.ImagePieChart(container);\n```\n\nData Format\n-----------\n\n\nTwo columns.\nThe first column should be a string, and contain the slice label.\nThe second column should be a number, and contain the slice value.\n\nConfiguration Options\n---------------------\n\nYou can specify the following options as part of the *options* object passed into\nthe visualization's `draw()` method.\n\n| Name | Type | Default | Description |\n|-----------------|-----------------|--------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| backgroundColor | string | '#FFFFFF' (white) | The background color for the chart in the [Chart API color format](/chart/image/docs/chart_params#gcharts_rgb). |\n| color | string | Auto | Specifies a base color to use for all series; each series will be a gradation of the color specified. Colors are specified in the [Chart API color format](/chart/image/docs/chart_params#gcharts_rgb). Ignored if `colors` is specified. |\n| colors | Array\\\u003cstring\\\u003e | Auto | Use this to assign specific colors to each data series. Colors are specified in the [Chart API color format](/chart/image/docs/chart_params#gcharts_rgb). Color i is used for data column i, wrapping around to the beginning if there are more data columns than colors. If variations of a single color is acceptable for all series, use the `color` option instead. |\n| enableEvents | boolean | false | Causes charts to throw user-triggered events such as click or mouse over. Supported only for specific chart types. See [Events](#Events) below. |\n| height | number | Container's height | Height of the chart in pixels. |\n| is3D | boolean | false | If set to true, displays a three-dimensional chart. |\n| labels | string | 'none' | What label, if any, to show for each slice. Choose from the following values: - 'none' - No labels. - 'value' - Use the slice value as a label. - 'name' - Use the slice name (the column name). |\n| legend | string | 'right' | The location of the legend on the chart. Choose from one of the following values: 'top', 'bottom', 'left', 'right', 'none'. |\n| title | string | no title | Text to display above the chart. |\n| width | number | Container's width | Width of the chart in pixels. |\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)."]]
