نظرة عامة
ويتمّ عرض الرسوم البيانية الشريطية من Google في المتصفّح باستخدام SVG أو VML، أيّهما يكون مناسبًا لمتصفّح المستخدم. مثل جميع مخططات Google، تعرض المخططات الشريطية تلميحات الأدوات عندما يمرر المستخدم مؤشر الماوس فوق البيانات. للحصول على نسخة عمودية من هذا الرسم البياني، راجع المخطط العمودي.
أمثلة
أشرطة الألوان
لنخطط لكثافات أربعة معادن ثمينة:
في الأعلى، يتم تحديد جميع الألوان باللون الأزرق الافتراضي. ويرجع ذلك إلى أنّها جميعًا جزء من السلسلة نفسها، وإذا كانت هناك مسلسل آخر، كان سيُلوَّن باللون الأحمر. يمكننا تخصيص هذه الألوان باستخدام دور النمط:
تتوفّر ثلاث طرق مختلفة لاختيار الألوان، ويعرض جدول البيانات كلّها: قيم نموذج أحمر أخضر أزرق (RGB) وأسماء الألوان الإنجليزية وبيان يشبه CSS:
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }], ['Copper', 8.94, '#b87333'], // RGB value ['Silver', 10.49, 'silver'], // English color name ['Gold', 19.30, 'gold'], ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration ]);
أنماط الأشرطة
يتيح لك دور النمط التحكّم في عدّة جوانب من ظهور الشريط باستخدام تعريفات CSS:
color
opacity
fill-color
fill-opacity
stroke-color
stroke-opacity
stroke-width
ونحن لا نوصي بمزج الأنماط بحرية كبيرة داخل مخطط، —اختر نمطًا والتزم به - ولكن لعرض جميع سمات النمط، فإليك عينة منها:
يستخدم الشريطان الأولان علامة color
محددة (الأولى باسم إنجليزي، والأخرى بقيمة RGB). لم يتم اختيار opacity
، لذلك يتم استخدام الإعداد التلقائي 1.0 (مُعتِم بالكامل)، ولهذا السبب يحجب الشريط الثاني
الخط المرسوم خلفها. في الشريط الثالث، يتم استخدام opacity
بقيمة 0.2
لكشف خط الشبكة. في الشريط الرابع، يتم استخدام ثلاث سمات للنمط: stroke-color
وstroke-width
لرسم الحدود، وfill-color
لتحديد لون المستطيل
بالداخل. بالإضافة إلى ذلك، يستخدم الشريط الموجود أقصى اليمين stroke-opacity
وfill-opacity
لاختيار تعتيم للحد وملء:
function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Visitations', { role: 'style' } ], ['2010', 10, 'color: gray'], ['2020', 14, 'color: #76A7FA'], ['2030', 16, 'opacity: 0.2'], ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'], ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2'] ]);
أشرطة التصنيف
الرسوم البيانية لها عدة أنواع من التصنيفات، مثل تصنيفات التسميات وتصنيفات التسمية التوضيحية والتصنيفات في تلميحات الأدوات. في هذا القسم، سنرى كيفية وضع التصنيفات داخل الأشرطة في المخطط الشريطي (أو بالقرب منه).
لنفترض أننا أردنا وضع تعليقات توضيحية على كل شريط باستخدام الرمز الكيميائي المناسب. يمكننا إجراء ذلك من خلال دور التعليقات التوضيحية:
في جدول البيانات، نحدّد عمودًا جديدًا يتضمّن { role:
'annotation' }
لتصنيف تصنيفات الشريط:
var data = google.visualization.arrayToDataTable([ ['Element', 'Density', { role: 'style' }, { role: 'annotation' } ], ['Copper', 8.94, '#b87333', 'Cu' ], ['Silver', 10.49, 'silver', 'Ag' ], ['Gold', 19.30, 'gold', 'Au' ], ['Platinum', 21.45, 'color: #e5e4e2', 'Pt' ] ]);
بينما يمكن للمستخدمين التمرير فوق الأشرطة لرؤية قيم البيانات، قد ترغب في تضمينها في الأشرطة ذاتها:
وقد يكون هذا أكثر تعقيدًا إلى حدٍّ ما، لأننا ننشئ DataView
لتحديد التعليق التوضيحي لكل شريط.
<script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ["Element", "Density", { role: "style" } ], ["Copper", 8.94, "#b87333"], ["Silver", 10.49, "silver"], ["Gold", 19.30, "gold"], ["Platinum", 21.45, "color: #e5e4e2"] ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" }, 2]); var options = { title: "Density of Precious Metals, in g/cm^3", width: 600, height: 400, bar: {groupWidth: "95%"}, legend: { position: "none" }, }; var chart = new google.visualization.BarChart(document.getElementById("barchart_values")); chart.draw(view, options); } </script> <div id="barchart_values" style="width: 900px; height: 300px;"></div>
إذا أردنا تنسيق القيمة بشكل مختلف، يمكننا تحديد formatter ووضعها في دالة على النحو التالي:
function getValueAt(column, dataTable, row) { return dataTable.getFormattedValue(row, column); }
وِبَعْدْ كِدَهْ مُمْكِنْ نِتِّصِلْ بِـ calc: getValueAt.bind(undefined, 1)
.
إذا كان التصنيف كبيرًا جدًا بحيث لا يتسع بالكامل داخل الشريط، يتم عرضه في الخارج:
الرسوم البيانية الشريطية المُجَمَّعة
المخطط الشريطي المكدّس هو رسم بياني شريطي يضع القيم ذات الصلة فوق بعضها البعض. وفي حال وجود أي قيم سالبة، يتم تكديسها عكس الترتيب أسفل خط الأساس للرسم البياني. عادةً ما يتم استخدام المخططات الشريطية المكدسة عندما تنقسم الفئة بشكل طبيعي إلى مكوّنات. على سبيل المثال، فكّر في بعض مبيعات الكتب الافتراضية، مقسّمة حسب النوع ومقارنتها على مدار الوقت:
يمكنك إنشاء رسم بياني شريطي مكدّس من خلال ضبط
الخيار isStacked
على true
:
var data = google.visualization.arrayToDataTable([ ['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General', 'Western', 'Literature', { role: 'annotation' } ], ['2010', 10, 24, 20, 32, 18, 5, ''], ['2020', 16, 22, 23, 30, 16, 9, ''], ['2030', 28, 19, 29, 30, 12, 13, ''] ]); var options = { width: 600, height: 400, legend: { position: 'top', maxLines: 3 }, bar: { groupWidth: '75%' }, isStacked: true };
تتيح أيضًا الرسوم البيانية الشريطية المُجَمَّعة إمكانية التكديس بنسبة 100%، حيث يتم تغيير حجم حِزم العناصر في كل قيمة نطاق بما يصل إلى 100%. والخيارات المخصّصة لذلك هي
isStacked: 'percent'
، وهي تنسيق كل قيمة كنسبة مئوية 100% و
isStacked: 'relative'
، وهي تنسيق كل قيمة ككسر من 1. هناك أيضًا خيار isStacked: 'absolute'
، وهو مكافئ وظيفي للخاصية isStacked: true
.
ملاحظة: في الرسم البياني المكدّس بنسبة 100% على يسار الصفحة، تستند قيم المؤشرات إلى مقياس نسبي من 0 إلى 1 ككسر من 1، ولكن يتم عرض قيم المحور كنسب مئوية. ويرجع ذلك إلى أنّ مؤشرات المحور بالنسبة المئوية ناتجة عن تطبيق تنسيق "#.##%" على القيم النسبية للمقياس 0-1. عند استخدام isStacked: 'percent'
، احرص على تحديد أي مؤشرات باستخدام
مقياس نسبي من 0 إلى 1.
var options_stacked = { isStacked: true, height: 300, legend: {position: 'top', maxLines: 3}, hAxis: {minValue: 0} };
var options_fullStacked = { isStacked: 'percent', height: 300, legend: {position: 'top', maxLines: 3}, hAxis: { minValue: 0, ticks: [0, .3, .6, .9, 1] } };
إنشاء مخططات شريطية لمواد
في عام 2014، أعلنت Google عن إرشادات تهدف إلى دعم المظهر والأسلوب الشائعين عبر مواقعها وتطبيقاتها (مثل تطبيقات Android) التي تعمل على أنظمة Google الأساسية. ونُطلق على هذا الإجراء اسم التصميم متعدد الأبعاد. سنقدم إصدارات "مادّة" لجميع الرسوم البيانية الأساسية، ويمكنك استخدامها إذا أعجبك الشكل الذي تظهر به.
إن عملية إنشاء مخطط شريطي متعدد الأبعاد مماثلة لإنشاء ما نطلق عليه الآن اسم مخطط شريطي "كلاسيكي". يمكنك تحميل واجهة برمجة التطبيقات للتمثيل المرئي من Google
(على الرغم من استخدام الحزمة 'bar'
بدلاً من الحزمة 'corechart'
)، يمكنك تحديد جدول البيانات، ثم إنشاء عنصر (بدلاً من الفئة google.charts.Bar
بدلاً من google.visualization.BarChart
).
ملاحظة: لن تعمل مخططات المواد في الإصدارات القديمة من Internet Explorer. (لا يدعم الإصدار IE8 والإصدارات الأقدم SVG، وهو الأمر الذي تتطلبه مخططات المواد).
تشتمل المخططات الشريطية المتعددة الأبعاد على العديد من التحسينات الصغيرة على المخططات الشريطية الكلاسيكية، بما في ذلك لوحة ألوان محسنة وزوايا مستديرة وتنسيق أكثر وضوحًا للتصنيفات وتباعد تلقائي أكثر تقاربًا بين السلاسل وخطوط ناعمة وعناوين (وإضافة ترجمات مصاحبة).
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses', 'Profit'], ['2014', 1000, 400, 200], ['2015', 1170, 460, 250], ['2016', 660, 1120, 300], ['2017', 1030, 540, 350] ]); var options = { chart: { title: 'Company Performance', subtitle: 'Sales, Expenses, and Profit: 2014-2017', }, bars: 'horizontal' // Required for Material Bar Charts. }; var chart = new google.charts.Bar(document.getElementById('barchart_material')); chart.draw(data, google.charts.Bar.convertOptions(options)); } </script> </head> <body> <div id="barchart_material" style="width: 900px; height: 500px;"></div> </body> </html>
الرسوم البيانية للمواد تجريبية. يُعدّ الشكل
والتفاعل النهائيان نهائيين إلى حدّ كبير، ولكنّ العديد من الخيارات المتوفّرة في الرسوم البيانية الكلاسيكية
غير متوفرة بعد. يمكنك الاطّلاع على قائمة بالخيارات غير المتاحة بعد في
هذه المشكلة.
بالإضافة إلى ذلك، لم يتم إنهاء الطريقة التي يتم بها الإعلان عن الخيارات، لذا إذا كنت تستخدم أيًا من الخيارات الكلاسيكية، يجب تحويلها إلى خيارات المواد من خلال استبدال هذا السطر:
chart.draw(data, options);
...باستخدام هذا:
chart.draw(data, google.charts.Bar.convertOptions(options));
يتيح لك استخدام google.charts.Bar.convertOptions()
الاستفادة من ميزات معيّنة،
مثل خيارات hAxis/vAxis.format
المعدّة مسبقًا.
الرسوم البيانية ثنائية الاتجاه X
ملاحظة: لا تتوفر محاور ثنائية إلا للمخططات المادية (أي تلك التي تحتوي على الحزمة bar
).
في بعض الأحيان، ستحتاج إلى عرض سلسلتين في مخطط شريطي، مع محورين س مستقلين: محور علوي لسلسلة واحدة، ومحاور سفلي لسلسلة أخرى:
ملاحظة: لا يتم تصنيف محورَي x بشكل مختلف فقط
("مقياسَي القياس" و"الحجم الظاهر") ولكن لكلٍّ منهما مقياس مستقلّ وخطوط على شكل شبكة. وإذا كنت تريد تخصيص هذا السلوك،
فاستخدم خيارات hAxis.gridlines
.
في الرمز الوارد أدناه، تحدّد خيارات axes
وseries
معًا شكل الرسم البياني الثنائي المزدوج. يحدّد الخيار series
المحور المطلوب استخدامه لكلٍ منهما ('distance'
و'brightness'
؛ وليس هناك أي صلة بين أسماء الأعمدة في جدول البيانات). يؤدي الخيار axes
إلى تحويل هذا الرسم البياني إلى
مخطط مزدوج، ووضع المحور 'apparent magnitude'
في الأعلى
والمحور 'parsecs'
في الأسفل.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Galaxy', 'Distance', 'Brightness'], ['Canis Major Dwarf', 8000, 23.3], ['Sagittarius Dwarf', 24000, 4.5], ['Ursa Major II Dwarf', 30000, 14.3], ['Lg. Magellanic Cloud', 50000, 0.9], ['Bootes I', 60000, 13.1] ]); var options = { width: 800, chart: { title: 'Nearby galaxies', subtitle: 'distance on the left, brightness on the right' }, bars: 'horizontal', // Required for Material Bar Charts. series: { 0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'. 1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'. }, axes: { x: { distance: {label: 'parsecs'}, // Bottom x-axis. brightness: {side: 'top', label: 'apparent magnitude'} // Top x-axis. } } }; var chart = new google.charts.Bar(document.getElementById('dual_x_div')); chart.draw(data, options); }; </script> </head> <body> <div id="dual_x_div" style="width: 900px; height: 500px;"></div> </body> </html>
أهمّ المخططات X
ملاحظة: لا تتوفر المحاور العلوية فقط
للمخططات المادية (أي تلك التي تحتوي على الحزمة bar
).
إذا كنت ترغب في وضع تصنيفات المحور "س" والعنوان في أعلى المخطط بدلاً من الأسفل، يمكنك إجراء ذلك في المخططات المادية باستخدام الخيار axes.x
:
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawStuff); function drawStuff() { var data = new google.visualization.arrayToDataTable([ ['Opening Move', 'Percentage'], ["King's pawn (e4)", 44], ["Queen's pawn (d4)", 31], ["Knight to King 3 (Nf3)", 12], ["Queen's bishop pawn (c4)", 10], ['Other', 3] ]); var options = { title: 'Chess opening moves', width: 900, legend: { position: 'none' }, chart: { title: 'Chess opening moves', subtitle: 'popularity by percentage' }, bars: 'horizontal', // Required for Material Bar Charts. axes: { x: { 0: { side: 'top', label: 'Percentage'} // Top x-axis. } }, bar: { groupWidth: "90%" } }; var chart = new google.charts.Bar(document.getElementById('top_x_div')); chart.draw(data, options); }; </script> </head> <body> <div id="top_x_div" style="width: 900px; height: 500px;"></div> </body> </html>
جارٍ التحميل
اسم الحزمة google.charts.load
هو "corechart"
.
اسم فئة التمثيل البصري هو google.visualization.BarChart
.
google.charts.load("current", {packages: ["corechart"]});
var visualization = new google.visualization.BarChart(container);
في المخططات الشريطية المتعددة الأبعاد، اسم الحزمة google.charts.load
هو "bar"
.
اسم فئة التمثيل البصري
هو google.charts.Bar
.
google.charts.load("current", {packages: ["bar"]});
var chart = new google.charts.Bar(container);
تنسيق البيانات
الصفوف: يمثل كل صف في الجدول مجموعة من الأشرطة.
الأعمدة:
العمود 0 | العمود 1 | ... | العمود N | |
---|---|---|---|---|
الغرض: | شريط القيم 1 في هذه المجموعة | ... | شريط القيم N في هذه المجموعة | |
نوع البيانات: |
|
number | ... | number |
الدور: | نطاق | البيانات | ... | البيانات |
اختياري أدوار الأعمدة: | ... |
خيارات الضبط
الاسم | |
---|---|
.GIF |
مدة الصورة المتحركة بالمللي ثانية. لمعرفة التفاصيل، يُرجى الاطّلاع على مستندات الصور المتحركة. النوع: الرقم
القيمة التلقائية: 0
|
رسم متحرك. |
دالة الإرخاء المطبَّقة على الحركة. تتوفّر الخيارات التالية:
النوع: سلسلة
افتراضي: "خطي"
|
تشغيل الصور المتحركة. |
لتحديد ما إذا كان الرسم المتحرك سيتحرك في الرسم الأولي. إذا كانت القيمة النوع: منطقي
افتراضي
|
تعليقات توضيحية.دائمًا خارج |
في الرسوم البيانية الشريطية
و
الأعمدة، في حال ضبطها على النوع: منطقي
تلقائي: خطأ
|
تعليقات توضيحية.مرجع |
بالنسبة إلى الرسوم البيانية التي تتيح استخدام
التعليقات التوضيحية،
يتيح لك الكائن
annotations.datum إلغاء اختيار
"المخطّطات من Google" للتعليقات التوضيحية المقدَّمة
لعناصر البيانات الفردية (مثل القيم التي تظهر مع كل شريط على الرسم البياني الشريطي). يمكنك التحكم في اللون باستخدام annotations.datum.stem.color ، وطول الجذعية باستخدام annotations.datum.stem.length ، والنمط باستخدام annotations.datum.style .
النوع: الكائن
تلقائي: اللون "أسود"، والطول 12، النمط هو "نقطة".
|
تعليقات توضيحية.نطاق |
بالنسبة إلى الرسوم البيانية التي تتيح استخدام
التعليقات التوضيحية،
يتيح لك الكائن
annotations.domain إلغاء
خيار "خرائط Google" للتعليقات التوضيحية المقدّمة لنطاق (المحور الرئيسي في الرسم البياني، مثل المحور "س" على رسم بياني خطي
عادي). يمكنك التحكم في اللون باستخدام annotations.domain.stem.color ، وطول الجذعية باستخدام annotations.domain.stem.length ، والنمط باستخدام annotations.domain.style .
النوع: الكائن
افتراضي: اللون "أسود"، والطول 5، النمط هو "نقطة".
|
تعليقات توضيحية.مربع النمط |
بالنسبة إلى الرسوم البيانية التي تتيح استخدام التعليقات التوضيحية، يتحكّم الكائن var options = { annotations: { boxStyle: { // Color of the box outline. stroke: '#888', // Thickness of the box outline. strokeWidth: 1, // x-radius of the corner curvature. rx: 10, // y-radius of the corner curvature. ry: 10, // Attributes for linear gradient fill. gradient: { // Start color for gradient. color1: '#fbf6a7', // Finish color for gradient. color2: '#33b679', // Where on the boundary to start and // end the color1/color2 gradient, // relative to the upper left corner // of the boundary. x1: '0%', y1: '0%', x2: '100%', y2: '100%', // If true, the boundary for x1, // y1, x2, and y2 is the box. If // false, it's the entire chart. useObjectBoundingBoxUnits: true } } } }; يتوفر هذا الخيار حاليًا للمخططات المساحية والشريطية والعمودية والسردية والخطية والنقاط المبعثرة. وهذا الإجراء غير متاح في الرسم البياني للتعليقات التوضيحية. النوع: الكائن
تلقائي: null
|
تعليق توضيحي.highContrast |
بالنسبة إلى الرسوم البيانية التي تتيح
التعليقات التوضيحية،
تتيح لك العلامة المنطقية
annotations.highContrast إلغاء اختيار "رسومات Google البيانية"
للون التعليق التوضيحي. ويتم ضبط annotations.highContrast على "صحيح" تلقائيًا، ما يجعل
الرسوم البيانية تختار لون التعليق التوضيحي بدرجة تباين جيدة: الألوان الفاتحة على الخلفيات الداكنة
والألوان الداكنة على الإضاءة. إذا ضبطت السمة annotations.highContrast على "خطأ" ولم تحدّد
لون التعليق التوضيحي الخاص بك، ستستخدم مخططات Google لون السلسلة التلقائي الخاص بالتعليقات التوضيحية:
النوع: منطقي
افتراضي: صحيح
|
تعليقات توضيحية. |
بالنسبة إلى الرسوم البيانية التي تتيح
التعليقات التوضيحية،
يتيح لك الكائن
annotations.stem إلغاء
اختيار الرسوم البيانية في "مخططات Google" للنمط الجذري. يمكنك التحكم في اللون باستخدام annotations.stem.color وطول الجذعية باستخدام annotations.stem.length . يُرجى العِلم بأنّ خيار طول الجذع ليس له أي تأثير على التعليقات التوضيحية ذات النمط 'line' : بالنسبة إلى التعليقات التوضيحية للمرجع 'line' ، يكون طول الجذعية دائمًا مماثلاً للنص، وبالنسبة إلى التعليقات التوضيحية لنطاق 'line' ، يمتد الساق عبر المخطط بأكمله.
النوع: الكائن
افتراضي: اللون "أسود"، والطول 5 للتعليقات التوضيحية للنطاق و12 اللون للتعليقات التوضيحية المرجعة.
|
تعليقات توضيحية. |
بالنسبة إلى الرسوم البيانية التي تتيح
التعليقات التوضيحية،
يتيح لك الخيار
annotations.style إلغاء
اختيار نوع الرسوم التوضيحية في "مخطّطات Google". ويمكن أن تكون القيمة 'line' أو 'point' .
النوع: سلسلة
تلقائي: "نقطة"
|
تعليقات توضيحية.نمط النص |
بالنسبة إلى الرسوم البيانية التي تتيح استخدام التعليقات التوضيحية، يتحكّم العنصر
annotations.textStyle في مظهر نص التعليق التوضيحي:
var options = { annotations: { textStyle: { fontName: 'Times-Roman', fontSize: 18, bold: true, italic: true, // The color of the text. color: '#871b47', // The color of the text outline. auraColor: '#d799ae', // The transparency of the text. opacity: 0.8 } } }; يتوفر هذا الخيار حاليًا للمخططات المساحية والشريطية والعمودية والسردية والخطية والنقاط المبعثرة. لا يتوافق هذا الرسم البياني مع الرسم البياني للتعليقات التوضيحية. النوع: الكائن
تلقائي: null
|
موضع العناوين |
مكان وضع عناوين المحور، مقارنة بمنطقة المخطط. القيم المسموح بها:
النوع: سلسلة
تلقائي: "out"
|
لون الخلفية |
لون الخلفية للمنطقة الرئيسية من المخطط. يمكن أن تكون إما سلسلة لون HTML بسيطة، على سبيل المثال: النوع: سلسلة أو كائن
تلقائي: "أبيض"
|
backgroundColor.com |
لون حد المخطط، كسلسلة لون HTML. النوع: سلسلة
الافتراضي: '#666'
|
عرض لون الخلفية.الشطب |
عرض الحدود، بالبكسل. النوع: الرقم
القيمة التلقائية: 0
|
backgroundColor.fill |
لون تعبئة المخطط، كسلسلة لون HTML. النوع: سلسلة
تلقائي: "أبيض"
|
عرض شريط المجموعة. |
عرض مجموعة من الأشرطة، المحددة في أي من هذه الأشكال:
النوع: رقم أو سلسلة
القيمة التلقائية:
النسبة الذهبية، وهي '61.8% تقريبًا'.
|
حانات |
لتحديد ما إذا كانت الأشرطة في Material رسم بياني شريطي عمودية أم أفقية؟ لا يؤثر هذا الخيار في المخططات الشريطية الكلاسيكية أو مخططات الأعمدة الكلاسيكية. النوع: "أفقي" أو "رأسي"
تلقائية: 'vertical'
|
منطقة الرسم البياني |
كائن به أعضاء لضبط موضع وحجم منطقة الرسم البياني (حيث يتم رسم الرسم البياني نفسه، باستثناء المحور والتسمية التوضيحية). هناك تنسيقان متوافقان: رقم أو رقم متبوع بعلامة %. الرقم البسيط هو قيمة بوحدات البكسل، ويكون الرقم متبوعًا بعلامة النسبة المئوية نسبة مئوية. مثال: النوع: الكائن
تلقائي: null
|
لون الرسم البياني لمنطقة الخلفية |
لون خلفية منطقة الرسم البياني. عند استخدام سلسلة، يمكن أن تكون سلسلة سداسية عشرية (مثل "#fdc") أو اسم اللون الإنجليزي. عند استخدام كائن، يمكن توفير الخصائص التالية:
النوع: سلسلة أو كائن
تلقائي: "أبيض"
|
منطقة الرسم البياني اليسرى |
مقدار رسم الرسم البياني من الحد الأيسر. النوع: رقم أو سلسلة
تلقائي: تلقائي
|
منطقة الرسم البياني العليا |
مقدار رسم المخطط من الحد العلوي. النوع: رقم أو سلسلة
تلقائي: تلقائي
|
مخطط منطقة العرض |
عرض منطقة الرسم البياني. النوع: رقم أو سلسلة
تلقائي: تلقائي
|
ارتفاع الرسم البياني |
رسم بياني لمنطقة ارتفاع. النوع: رقم أو سلسلة
تلقائي: تلقائي
|
مخطط فرعي |
بالنسبة إلى مخططات المواد، يحدد هذا الخيار العنوان الفرعي. لا تتيح سوى الرسوم البيانية المادية استخدام الترجمات المصاحبة. النوع: سلسلة
تلقائي: null
|
schema.title |
بالنسبة إلى مخططات المواد، يحدد هذا الخيار العنوان. النوع: سلسلة
تلقائي: null
|
ألوان |
الألوان التي يمكن استخدامها لعناصر الرسم البياني. مصفوفة من السلاسل، حيث يكون كل عنصر عبارة عن سلسلة لون HTML، على سبيل المثال: النوع: مصفوفة من السلاسل
الافتراضي: الألوان التلقائية
|
تعتيم البيانات |
شفافية نقاط البيانات، حيث تكون القيمة 1.0 معتمة تمامًا و0.0 شفافة بالكامل. في الرسوم البيانية للنقاط المبعثرة والمدرّجة التكرارية والشريطية والعمودية، يشير ذلك إلى البيانات المرئية: النقاط في الرسم البياني للنقاط المبعثرة والمستطيلات في المناطق الأخرى. في الرسوم البيانية حيث يؤدي تحديد البيانات إلى إنشاء نقطة، مثل المخططات الخطية والمساحية، يشير هذا إلى الدوائر التي تظهر عند التمرير فوق النص أو عند تحديده. يعرض الرسم البياني للسلوك كلا السلوكين، ولن يكون لهذا الخيار أي تأثير في الرسوم البيانية الأخرى. (لتغيير مستوى تعتيم خط الاتجاه، يُرجى الاطّلاع على تعتيم خط الاتجاه .) النوع: الرقم
الإعداد التلقائي: 1.0
|
تفعيل التفاعل |
ما إذا كان الرسم البياني يعرض أحداثًا مستندة إلى المستخدمين أو يتفاعل مع تفاعل المستخدم. وفي حال اختيار القيمة "false"، لن يعرض الرسم البياني أحداث "اختيار" أو أحداث أخرى قائمة على التفاعل (ولكنه سيعرض أحداث جاهزة أو خطأ)، ولن يعرض نص تمرير النص أو سيتغيّر بناءً على إدخال المستخدم. النوع: منطقي
افتراضي: صحيح
|
مستكشِف |
يسمح الخيار هذه الميزة تجريبية وقد تتغير في الإصدارات المستقبلية. ملاحظة: لا يعمل المستكشف إلا مع المحاور المستمرة (مثل الأرقام أو التواريخ). النوع: الكائن
تلقائي: null
|
explorer.actions |
يتيح مستكشف مخططات Google ثلاثة إجراءات:
النوع: مصفوفة من السلاسل
الافتراضي: ['dragToPan', 'rightClickToReset']
|
محور المستكشف |
بشكل تلقائي، يمكن للمستخدمين التحريك أفقيًا ورأسيًا عند استخدام الخيار النوع: سلسلة
الوضع التلقائي:التحريك الأفقي والرأسي
|
explorer.keepInBounds |
بشكل تلقائي، يمكن للمستخدمين التحريك في جميع أنحاء المكان، بغض النظر عن مكان البيانات. وللتأكد من عدم تجاوز المستخدمين للرسم البياني خارج الرسم البياني الأصلي، استخدِم النوع: منطقي
تلقائي: خطأ
|
explorer.maxZoomIn |
الحد الأقصى الذي يمكن للمستكشف تكبيره. بشكل تلقائي، سيتمكّن المستخدمون من التكبير بشكلٍ كافٍ
لدرجة أنهم لن يشاهدوا سوى 25% من العرض الأصلي. يؤدي ضبط السياسة النوع: الرقم
القيمة التلقائية: 0.25
|
explorer.maxZoomOut |
الحد الأقصى الذي يمكن للمستكشف تصغيره. سيتمكّن المستخدمون تلقائيًا من التصغير
بما يكفي لأن يحتل الرسم البياني ثلث المساحة المتاحة فقط. من خلال ضبط السياسة النوع: الرقم
تلقائي: 4
|
explorer.zoomDelta |
عند إجراء المستخدمين للتكبير أو التصغير، تحدد النوع: الرقم
الإعداد التلقائي: 1.5
|
استهداف الهدف |
نوع الكيان الذي يتلقى التركيز على تمرير الماوس. ويؤثر هذا الإجراء أيضًا في الكيان الذي يتم اختياره من خلال النقر بالماوس، وعنصر جدول البيانات المرتبط بالأحداث. ويمكن أن يكون واحدًا مما يلي:
في focusTarget 'category'، يعرض التلميح كل قيم الفئات. وقد يكون هذا الإجراء مفيدًا عند مقارنة قيم سلاسل مختلفة. النوع: سلسلة
تلقائي: "مرجع"
|
حجم الخط |
حجم الخط الافتراضي، بالبكسل، لكل النص في المخطط. يمكنك إلغاء هذا باستخدام الخصائص لعناصر معينة في الرسم البياني. النوع: الرقم
افتراضي: تلقائي
|
اسم الخط |
واجهة الخط الافتراضية لكل النص في المخطط. يمكنك إلغاء هذا باستخدام الخصائص لعناصر معينة في الرسم البياني. النوع: سلسلة
افتراضي: 'Arial'
|
فرض إطار |
لرسم المخطط داخل إطار مضمن. (تجدر الإشارة إلى أنه يتم تجاهل هذا الخيار في IE8، ويتم رسم جميع الرسوم البيانية لـ IE8 في إطارات i.) النوع: منطقي
تلقائي: خطأ
|
محاور |
لتحديد خصائص محاور أفقية فردية، إذا كان الرسم البياني يحتوي على عدة محاور أفقية. كل كائن فرعي هو كائن
لتحديد رسم بياني يحتوي على محاور أفقية متعددة، عليك أولاً تحديد محور جديد باستخدام
يمكن أن تكون هذه الخاصية إما كائنًا أو مصفوفة: الكائن عبارة عن مجموعة من الكائنات، ولكل منها تصنيف رقمي يحدد المحور الذي يحدده--هذا هو التنسيق الموضح أعلاه، المصفوفة هي مصفوفة من الكائنات، واحد لكل محور. على سبيل المثال، تتطابق علامة نمط المصفوفة التالية مع الكائن hAxes: { {}, // Nothing specified for axis 0 { title:'Losses', textStyle: { color: 'red' } } // Axis 1 النوع: مصفوفة كائن أو كائن به كائنات فرعية
تلقائي: null
|
محور محوري |
كائن به أعضاء لتهيئة عناصر محور أفقية مختلفة. لتحديد خصائص هذا الكائن، يمكنك استخدام الترميز الحرفي للكائن، كما هو موضّح هنا: { title: 'Hello', titleTextStyle: { color: '#FF0000' } } النوع: الكائن
تلقائي: null
|
خط الأساس hAxis.base |
خط الأساس للمحور الأفقي. النوع: الرقم
افتراضي: تلقائي
|
لون hAxis.baseline |
لون خط الأساس للمحور الأفقي. يمكن أن تكون أي سلسلة لون HTML، مثل:
النوع: الرقم
افتراضي: "أسود"
|
hAxis.direction |
الاتجاه الذي تنمو فيه القيم على طول المحور الأفقي. حدِّد النوع: 1 أو -1
تلقائي: 1
|
تنسيق hAxis.format |
سلسلة تنسيق لتصنيفات المحاور الرقمية. هذه مجموعة فرعية من
مجموعة أنماط وحدة العناية المركزة
. على سبيل المثال، سيعرض
التنسيق الفعلي المطبّق على التصنيف مشتق من اللغة التي تم تحميل واجهة برمجة التطبيقات بها. لمزيد من التفاصيل، يمكنك الاطّلاع على تحميل الرسوم البيانية بلغة معيّنة .
عند احتساب قيم المؤشرات وخطوط الشبكة في الحوسبة، ستتم مراعاة عدة نُسخ بديلة من جميع خيارات خطوط الشبكة ذات الصلة، وسيتم رفض البدائل في حال تكرار تصنيفات المؤشرات التي تم تنسيقها أو التداخل معها.
لذلك، يمكنك تحديد النوع: سلسلة
تلقائي: تلقائي
|
خطوط hAxis.gridlines |
كائن له خصائص لضبط خطوط الشبكة على المحور الأفقي. لاحظ أنه يتم رسم خطوط الشبكة للمحور الأفقي رأسيًا. لتحديد خصائص هذا الكائن، يمكنك استخدام التدوين الحرفي للكائن، كما هو موضّح أدناه: {color: '#333', minSpacing: 20} النوع: الكائن
تلقائي: null
|
hAxis.gridlines.color |
لون خطوط الشبكة الأفقية داخل منطقة المخطط. حدد سلسلة لون HTML صالحة. النوع: سلسلة
الافتراضي: '#CCC'
|
hAxis.gridlines.count |
العدد التقريبي لخطوط الشبكة الأفقية داخل منطقة المخطط.
إذا حددت رقمًا موجبًا لـ النوع: الرقم
تلقائي: -1
|
وحدات hAxis.gridlines.units |
تلغي هذه السياسة التنسيق التلقائي لجوانب مختلفة من أنواع البيانات المتعلقة بالتاريخ/التاريخ والوقت/timedayday عند استخدامها مع خطوط الشبكة المحسوبة في رسم بياني. تسمح هذه السياسة بالتنسيق للسنوات والأشهر والأيام والساعات والدقائق والثواني والمللي ثانية. التنسيق العام هو: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } ويمكن العثور على معلومات إضافية في التواريخ والأوقات. النوع: الكائن
تلقائي: null
|
hAxis.minorGridlines |
كائن به أعضاء لضبط خطوط الشبكة الثانوية على المحور الأفقي، مثل خيار hAxis.gridlines. النوع: الكائن
تلقائي: null
|
hAxis.minorGridlines.color |
لون خطوط الشبكة الثانوية الأفقية داخل منطقة الرسم البياني. حدد سلسلة لون HTML صالحة. النوع: سلسلة
افتراضي: مزيج من خطوط الشبكة وألوان الخلفية
|
hAxis.minorGridlines.count |
يكون الخيار النوع: الرقم
تلقائي:1
|
وحدات hAxis.minorGridlines.units |
لإلغاء التنسيق التلقائي لمختلف جوانب أنواع البيانات التاريخ/التاريخ والوقت/timedayday عند استخدامها مع خطوط الشبكة التي تم حسابها من خلال الرسم البياني. تسمح هذه السياسة بالتنسيق للسنوات والأشهر والأيام والساعات والدقائق والثواني والمللي ثانية. التنسيق العام هو: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } ويمكن العثور على معلومات إضافية في التواريخ والأوقات. النوع: الكائن
تلقائي: null
|
hAxis.logScale |
الخاصية النوع: منطقي
تلقائي: خطأ
|
hAxis.scaleType |
خاصية
النوع: سلسلة
القيمة التلقائية: فارغة
|
hAxis.textStyle |
كائن يحدد نمط نص المحور الأفقي. ويكون الكائن بهذا التنسيق: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
يمكن أن يكون النوع: الكائن
تلقائي:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.textPosition |
موضع نص المحور الأفقي، بالنسبة إلى منطقة المخطط. القيم المسموح بها: "out" و"in" و"none". النوع: سلسلة
تلقائي: "out"
|
hAxis.ticks |
لاستبدال مؤشرات المحور السيني التي يتم إنشاؤها تلقائيًا بالمصفوفة المحددة. ويجب أن يكون كل عنصر من عناصر الصفيف إما قيمة صالحة صالحة للإشارة (مثل رقم أو تاريخ أو تاريخ ووقت أو يوم من اليوم) أو كائن. وإذا كان العنصر عبارة عن كائن، يجب أن يحتوي على السمة
وسيتم توسيع viewViewdow تلقائيًا لتضمين علامات الحد الأقصى والحد الأقصى إلا في حال تحديد أمثلة:
النوع: مصفوفة من العناصر
تلقائي: تلقائي
|
hAxis.title |
الخاصية النوع: سلسلة
تلقائي: null
|
hAxis.titleTextStyle |
كائن يحدد نمط نص عنوان المحور الأفقي. ويكون الكائن بهذا التنسيق: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
يمكن أن يكون النوع: الكائن
تلقائي:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
hAxis.maxValue |
لنقل الحد الأقصى للمحور الأفقي إلى القيمة المحددة، سيكون هذا يمينًا في معظم الرسومات البيانية. يتم التجاهل إذا تم ضبط القيمة على قيمة أصغر من الحد الأقصى لقيمة x للبيانات.
يلغي النوع: الرقم
افتراضي: تلقائي
|
hAxis.minValue |
لنقل القيمة الدنيا للمحور الأفقي إلى القيمة المحددة، سيكون هذا لليسار في معظم الرسوم البيانية. يتم التجاهل إذا تم ضبط القيمة على قيمة أكبر من الحد الأدنى لقيمة x للبيانات.
يلغي النوع: الرقم
افتراضي: تلقائي
|
hAxis.viewWindowMode |
لتحديد كيفية تغيير حجم المحور الأفقي لعرض القيم داخل منطقة المخطط. تتوفّر قيم السلسلة التالية:
النوع: سلسلة
تلقائي:
مكافئة لـ "pretty"، ولكن يكون لـ
haxis.viewWindow.min وhaxis.viewWindow.max الأولوية في حال استخدامها.
|
hAxis.viewWindow |
لتحديد نطاق الاقتصاص للمحور الأفقي. النوع: الكائن
تلقائي: null
|
HAxis.viewWindow.max |
الحد الأقصى لقيمة البيانات الأفقية المطلوب عرضها. يتم التجاهل عندما تكون قيمة النوع: الرقم
تلقائي: تلقائي
|
hAxis.viewWindow.min |
الحد الأدنى لقيمة البيانات الأفقية المطلوب عرضها. يتم التجاهل عندما تكون قيمة النوع: الرقم
تلقائي: تلقائي
|
الارتفاع |
ارتفاع المخطط بالبكسل. النوع: الرقم
افتراضي: ارتفاع العنصر المضمن
|
مكدس |
في حال الضبط على "true"، تتكدس العناصر لكل السلسلة في كل قيمة نطاق. ملاحظة: في الرسوم البيانية لكل من العمود والمنطقة وSteppedArea، تعكس مخططات Google ترتيب عناصر التسمية التوضيحية لكي يتوافق بشكل أفضل مع تكديس عناصر السلسلة (على سبيل المثال، ستكون السلسلة 0 هي العنصر الأكثر أهمية في أسفل الصفحة). لا لا تنطبق على Bar الرسوم البيانية.
يوفّر الخيار خيارات
بالنسبة إلى التكديس 100%، ستظهر القيمة المحسوبة لكل عنصر في التلميح بعد قيمته الفعلية.
سيتم ضبط القيمة المستهدفة للمحور المستهدَف تلقائيًا على قيم من القيم بناءً على مقياس من 0 إلى 1 نسبي ككسور من 1 لـ
لا تعتمد ميزة التكديس 100% إلا على قيم البيانات من النوع النوع: قيمة منطقية/سلسلة
تلقائي: خطأ
|
أسطورة |
كائن به أعضاء لتهيئة جوانب مختلفة من التسمية التوضيحية. لتحديد خصائص هذا الكائن، يمكنك استخدام الترميز الحرفي للكائن، كما هو موضّح هنا: {position: 'top', textStyle: {color: 'blue', fontSize: 16}} النوع: الكائن
تلقائي: null
|
مؤشر التسمية التوضيحية |
تم اختيار مبدئي فهرس الصفحات الصفري المستند إلى الصفر. النوع: الرقم
القيمة التلقائية: 0
|
وضع التسمية التوضيحية |
موضع التسمية التوضيحية. يمكن أن يكون واحدًا مما يلي:
النوع: سلسلة
تلقائي: 'يمين'
|
محاذاة |
محاذاة التسمية التوضيحية. يمكن أن يكون واحدًا مما يلي:
يرتبط كل من البداية والوسط والنهاية بنمط - رأسي أو أفقي - للتسمية التوضيحية. على سبيل المثال، في وسيلة إيضاح "اليمين" تكون "البدء" و"الانتهاء" في الجزء العلوي والسفلي على التوالي، وبالنسبة إلى وسيلة الإيضاح "أعلى" تكون "البدء" و"الانتهاء" في يسار ويمين المنطقة، على التوالي. وتعتمد القيمة الافتراضية على موضع التسمية التوضيحية. وبالنسبة إلى التعليقات التفسيرية "bottom"، تكون القيمة التلقائية هي "center"، بينما تكون القيمة التلقائية الأخرى هي "start". النوع: سلسلة
افتراضي: تلقائي
|
وسيلة الإيضاح |
كائن يحدد نمط نص التسمية التوضيحية. ويكون الكائن بهذا التنسيق: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
يمكن أن يكون النوع: الكائن
تلقائي:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
الفئات العكسية |
في حال الضبط على "true"، سيتم رسم سلسلة من أسفل إلى أعلى. الإعداد الافتراضي هو الرسم من أعلى لأسفل. النوع: منطقي
تلقائي: خطأ
|
الاتجاه |
اتجاه المخطط. عند الضبط على النوع: سلسلة
تلقائي: "أفقية"
|
سلسلة |
مصفوفة من العناصر تصف كل منها تنسيق السلسلة المقابلة في الرسم البياني. لاستخدام قيم تلقائية لسلسلة، حدِّد كائنًا فارغًا {}. وإذا لم يتم تحديد سلسلة أو قيمة، سيتم استخدام القيمة العامة. يدعم كل كائن الخصائص التالية:
يمكنك تحديد مصفوفة من العناصر، ينطبق كل منها على السلسلة بالترتيب المحدد، أو يمكنك تحديد كائن يحتوي فيه كل طفل على مفتاح رقمي يشير إلى السلسلة التي ينطبق عليها. على سبيل المثال، البيانان التاليان متطابقان ويعلنان أن السلسلة الأولى سوداء ولا تتوفّر في وسيلة الإيضاح، والبيان الرابع على أنّه أحمر وغائب عن التسمية التوضيحية: series: [ {color: 'black', visibleInLegend: false}, {}, {}, {color: 'red', visibleInLegend: false} ] series: { 0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false} } النوع: مصفوفة من الكائنات أو كائن به كائنات مدمجة
تلقائي: {}
|
مظهر |
التصميم هو مجموعة من قيم الخيارات المحدّدة مسبقًا التي تعمل معًا لتحقيق سلوك محدّد للرسم البياني أو تأثير مرئي. لا يتوفر حاليًا سوى مظهر واحد:
النوع: سلسلة
تلقائي: null
|
العنوان |
النص المطلوب عرضه أعلى المخطط. النوع: سلسلة
تلقائي: بدون عنوان
|
titleالموضع |
مكان وضع عنوان المخطط، مقارنةً بمنطقة المخطط. القيم المسموح بها:
النوع: سلسلة
تلقائي: "out"
|
العنوانTextStyle |
كائن يحدد نمط نص العنوان. ويكون الكائن بهذا التنسيق: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
يمكن أن يكون النوع: الكائن
تلقائي:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
تلميح |
كائن به أعضاء لتهيئة عناصر تلميحات متنوعة. لتحديد خصائص هذا الكائن، يمكنك استخدام الترميز الحرفي للكائن، كما هو موضح هنا: {textStyle: {color: '#FF0000'}, showColorCode: true} النوع: الكائن
تلقائي: null
|
tooltip.ignoreBounds |
في حال الضبط على ملاحظة: ينطبق هذا فقط على تلميحات HTML. في حال تفعيل هذا الخيار باستخدام تلميحات الأدوات بتنسيق SVG، سيتم اقتصاص أي تدفق خارج حدود الرسم البياني. ولمزيد من التفاصيل، يمكنك الاطّلاع على تخصيص محتوى التلميح. النوع: منطقي
تلقائي: خطأ
|
tooltip.isHtml |
في حال ضبطها على "صحيح"، استخدِم تلميحات الأدوات المعروضة بتنسيق HTML (بدلاً من ملفات SVG التي يتم عرضها). ولمزيد من التفاصيل، يمكنك الاطّلاع على تخصيص محتوى التلميح. ملاحظة: لا يمكن تخصيص محتوى تلميح HTML عبر دور بيانات عمود تلميحات الأدوات من خلال التمثيل البصري لمخطط الفقاعات التفسيرية. النوع: منطقي
تلقائي: خطأ
|
tooltip.showColorCode |
إذا كان ذلك صحيحًا، فاعرض المربعات الملونة بجوار معلومات السلسلة في تلميح الأداة. ويتم ضبط القيمة التلقائية على "صحيح" عند ضبط النوع: منطقي
افتراضي: تلقائي
|
tooltip.textStyle |
كائن يحدد نمط نص التلميح. ويكون الكائن بهذا التنسيق: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
يمكن أن يكون النوع: الكائن
تلقائي:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
tooltip.trigger |
تفاعل المستخدم الذي يتسبب في عرض التلميح:
النوع: سلسلة
تلقائي: "التركيز"
|
خطوط الاتجاه |
تعرض
خطوط الاتجاه
على الرسوم البيانية التي تدعمها. ويتم تلقائيًا استخدام خطوط الاتجاه الخطية، ولكن يمكن تخصيصه باستخدام الخيار
ويتم تحديد خطوط الاتجاه على أساس كل سلسلة، ولذلك ستبدو خياراتك في معظم الأوقات على النحو التالي: var options = { trendlines: { 0: { type: 'linear', color: 'green', lineWidth: 3, opacity: 0.3, showR2: true, visibleInLegend: true } } } النوع: الكائن
تلقائي: null
|
colorlines.n.color. |
لون خط الاتجاه ، ويُعبر عنه باسم لون إنجليزي أو سلسلة سداسية عشرية. النوع: سلسلة
تلقائي: لون السلسلة التلقائي
|
خطوط الاتجاه.n.degree |
بالنسبة إلى
خطوط الاتجاه
لـ النوع: الرقم
تلقائي: 3
|
Trendslines.n.labelInLegend |
في حال الضبط، سيظهر خط الاتجاه في وسيلة الإيضاح كسلسلة بيانات. النوع: سلسلة
تلقائي: null
|
عرض خطوط الاتجاه.n.line |
عرض خط خط الاتجاه بالبكسل. النوع: الرقم
تلقائي: 2
|
خطوط الاتجاه.n.opacity |
شفافية خط الاتجاه ، من 0.0 (شفاف) إلى 1.0 (غير شفاف). النوع: الرقم
الإعداد التلقائي: 1.0
|
خطوط الاتجاه.n.pointSize |
خطوط الاتجاه
يتم حصرها بختم مجموعة من النقاط على الرسم البياني، ويتيح لك هذا الخيار الذي نادرًا ما تحتاج إليه
تخصيص حجم النقاط. عادةً ما يكون خيار النوع: الرقم
تلقائي: 1
|
خطوط المؤشرات.n.النقاط المرئية |
خطوط الاتجاه
يتم ربطها بختم مجموعة من النقاط على الرسم البياني. يحدّد الخيار النوع: منطقي
افتراضي: صحيح
|
خطوط الاتجاه.n.showR2 |
يمكنك اختيار ما إذا كنت تريد عرض معامل التحديد في تلميح وسيلة الإيضاح أو خط الاتجاه. النوع: منطقي
تلقائي: خطأ
|
typelines.n.type |
ما إذا كانت
خطوط الاتجاه
هي النوع: سلسلة
افتراضي: خطي
|
لاين لاين |
يمكنك اختيار ما إذا كانت معادلة خط الاتجاه تظهر في وسيلة الإيضاح. (وسيظهر في تلميح خط الاتجاه.) النوع: منطقي
تلقائي: خطأ
|
محور محوري |
كائن به أعضاء لتهيئة عناصر محور رأسي متنوعة. لتحديد خصائص هذا الكائن، يمكنك استخدام الترميز الحرفي للكائن، كما هو موضّح هنا: {title: 'Hello', titleTextStyle: {color: '#FF0000'}} النوع: الكائن
تلقائي: null
|
إصدار vAxis.baseline |
الخاصية
لا يتوفّر هذا الخيار إلا للمحور
النوع: الرقم
افتراضي: تلقائي
|
لون vAxis.baseline |
تحدد لون خط الأساس للمحور العمودي. يمكن أن تكون أي سلسلة لون HTML، على سبيل المثال:
لا يتوفّر هذا الخيار إلا للمحور
النوع: الرقم
افتراضي: "أسود"
|
إصدار vAxis.direction |
الاتجاه الذي تنمو فيه القيم على طول المحور الرأسي. تظهر القيم المنخفضة في أسفل الرسم البياني تلقائيًا. حدِّد النوع: 1 أو -1
تلقائي: 1
|
تنسيق vAxis. |
سلسلة تنسيق لتصنيفات محور التاريخ الرقمي أو الرقمي.
بالنسبة إلى تصنيفات المحور الرقمي، هذه هي مجموعة فرعية من تنسيق الأرقام العشرية
مجموعة أنماط وحدة العناية المركزة
.
على سبيل المثال، سيعرض
بالنسبة إلى تصنيفات محاور التاريخ، تُمثِّل هذه مجموعة فرعية من تنسيق التاريخ
تعيين نمط وحدة العناية المركزة
.
على سبيل المثال، سيعرض التنسيق الفعلي المطبّق على التصنيف مشتق من اللغة التي تم تحميل واجهة برمجة التطبيقات بها. لمزيد من التفاصيل، يمكنك الاطّلاع على تحميل الرسوم البيانية بلغة معيّنة .
عند احتساب قيم المؤشرات وخطوط الشبكة في الحوسبة، ستتم مراعاة عدة نُسخ بديلة من جميع خيارات خطوط الشبكة ذات الصلة، وسيتم رفض البدائل في حال تكرار تصنيفات المؤشرات التي تم تنسيقها أو التداخل معها.
لذلك، يمكنك تحديد
لا يتوفّر هذا الخيار إلا للمحور
النوع: سلسلة
تلقائي: تلقائي
|
خطوط vAxis.gridlines |
كائن به أعضاء لضبط خطوط الشبكة على المحور الرأسي. لاحظ أنه يتم رسم خطوط الشبكة للمحور العمودي أفقيًا. لتحديد خصائص هذا الكائن، يمكنك استخدام الترميز الحرفي للكائن، كما هو موضّح هنا: {color: '#333', minSpacing: 20}
لا يتوفّر هذا الخيار إلا للمحور
النوع: الكائن
تلقائي: null
|
vAxis.gridlines.color |
لون خطوط الشبكة الرأسية داخل منطقة المخطط. حدد سلسلة لون HTML صالحة. النوع: سلسلة
الافتراضي: '#CCC'
|
vAxis.gridlines.count |
العدد التقريبي لخطوط الشبكة الأفقية داخل منطقة المخطط.
إذا حددت رقمًا موجبًا لـ النوع: الرقم
تلقائي: -1
|
وحدات vAxis.gridlines.units |
تلغي هذه السياسة التنسيق التلقائي لجوانب مختلفة من أنواع البيانات المتعلقة بالتاريخ/التاريخ والوقت/timedayday عند استخدامها مع خطوط الشبكة المحسوبة في رسم بياني. تسمح هذه السياسة بالتنسيق للسنوات والأشهر والأيام والساعات والدقائق والثواني والمللي ثانية. التنسيق العام هو: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]}, hours: {format: [/*format strings here*/]}, minutes: {format: [/*format strings here*/]}, seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]} } } ويمكن العثور على معلومات إضافية في التواريخ والأوقات. النوع: الكائن
تلقائي: null
|
vAxis.minorGridlines |
كائن به أعضاء لضبط خطوط الشبكة الثانوية على المحور الرأسي، على غرار خيار vAxis.gridlines.
لا يتوفّر هذا الخيار إلا للمحور
النوع: الكائن
تلقائي: null
|
vAxis.minorGridlines.color |
لون خطوط الشبكة الرأسية داخل منطقة المخطط. حدد سلسلة لون HTML صالحة. النوع: سلسلة
افتراضي: مزيج من خطوط الشبكة وألوان الخلفية
|
vAxis.minorGridlines.count |
غالبًا ما يتم إيقاف الخيار GridGridlines.count، باستثناء إيقاف خطوط الشبكة الثانوية من خلال ضبط العدد على 0. يعتمد عدد خطوط الشبكة الثانوية على الفاصل الزمني بين خطوط الشبكة الرئيسية (يُرجى الاطِّلاع على vAxis.gridlines.interval) والحد الأدنى من المساحة المطلوبة (يمكنك الاطّلاع على vAxis.minorGridlines.minSpacing). النوع: الرقم
تلقائي: 1
|
وحدات vAxis.minorGridlines.units |
لإلغاء التنسيق التلقائي لمختلف جوانب أنواع البيانات التاريخ/التاريخ والوقت/timedayday عند استخدامها مع خطوط الشبكة التي تم حسابها من خلال الرسم البياني. تسمح هذه السياسة بالتنسيق للسنوات والأشهر والأيام والساعات والدقائق والثواني والمللي ثانية. التنسيق العام هو: gridlines: { units: { years: {format: [/*format strings here*/]}, months: {format: [/*format strings here*/]}, days: {format: [/*format strings here*/]} hours: {format: [/*format strings here*/]} minutes: {format: [/*format strings here*/]} seconds: {format: [/*format strings here*/]}, milliseconds: {format: [/*format strings here*/]}, } } ويمكن العثور على معلومات إضافية في التواريخ والأوقات. النوع: الكائن
تلقائي: null
|
vAxis.logScale |
إذا كانت القيمة true، سيتم تحويل المحور الرأسي إلى مقياس لوغاريتمي. ملاحظة: يجب أن تكون جميع القيم موجبة.
لا يتوفّر هذا الخيار إلا للمحور
النوع: منطقي
تلقائي: خطأ
|
vAxis.scaleType |
الخاصية
النوع: سلسلة
تلقائي: null
|
vAxis.textPosition |
موضع نص المحور الرأسي بالنسبة إلى منطقة المخطط. القيم المسموح بها: "out" و"in" و"none". النوع: سلسلة
تلقائي: "out"
|
vAxis.textStyle |
كائن يحدد نمط نص المحور العمودي. ويكون الكائن بهذا التنسيق: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
يمكن أن يكون النوع: الكائن
تلقائي:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
الإصدار vAxis.ticks |
لاستبدال علامات المحور الصادي التي يتم إنشاؤها تلقائيًا بالمصفوفة المحددة. ويجب أن يكون كل عنصر من عناصر الصفيف إما قيمة صالحة صالحة للإشارة (مثل رقم أو تاريخ أو تاريخ ووقت أو يوم من اليوم) أو كائن. وإذا كان العنصر عبارة عن كائن، يجب أن يحتوي على الخاصية
وسيتم توسيع viewViewdow تلقائيًا لتضمين علامات الحد الأقصى والحد الأقصى إلا في حال تحديد أمثلة:
لا يتوفّر هذا الخيار إلا للمحور
النوع: مصفوفة من العناصر
تلقائي: تلقائي
|
عنوان vAxis.title |
الخاصية النوع: سلسلة
تلقائي: بدون عنوان
|
vAxis.titleTextStyle |
كائن يحدد نمط نص عنوان المحور الرأسي. ويكون الكائن بهذا التنسيق: { color: <string>, fontName: <string>, fontSize: <number>, bold: <boolean>, italic: <boolean> }
يمكن أن يكون النوع: الكائن
تلقائي:
{color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
|
vAxis.maxValue |
لنقل الحد الأقصى لقيمة المحور الرأسي إلى القيمة المحددة، سيكون هذا أعلى في معظم الرسوم البيانية. يتم التجاهل إذا تم ضبط القيمة على قيمة أصغر من الحد الأقصى لقيمة "ص" للبيانات.
يلغي
لا يتوفّر هذا الخيار إلا للمحور
النوع: الرقم
افتراضي: تلقائي
|
vAxis.minValue |
لنقل القيمة الدنيا للمحور العمودي إلى القيمة المحددة، سيكون هذا أقل في معظم الرسومات البيانية. يتم التجاهل إذا تم ضبط القيمة على قيمة أكبر من الحد الأدنى لقيمة "ص" للبيانات.
يلغي
لا يتوفّر هذا الخيار إلا للمحور
النوع: الرقم
تلقائي: null
|
vAxis.viewWindowMode |
لتحديد كيفية تغيير حجم المحور الرأسي لعرض القيم ضمن منطقة المخطط. تتوفّر قيم السلسلة التالية:
لا يتوفّر هذا الخيار إلا للمحور
النوع: سلسلة
تلقائي:
مكافئة لـ "pretty"، ولكن يكون لـ
vaxis.viewWindow.min وvaxis.viewWindow.max الأولوية في حال استخدامها.
|
vAxis.viewWindow |
لتحديد نطاق الاقتصاص للمحور العمودي. النوع: الكائن
تلقائي: null
|
vAxis.viewWindow.max |
يتم التجاهل عندما تكون قيمة النوع: الرقم
تلقائي: تلقائي
|
vAxis.viewWindow.min |
يتم التجاهل عندما تكون قيمة النوع: الرقم
تلقائي: تلقائي
|
width |
عرض المخطط بالبكسل. النوع: الرقم
افتراضي: عرض العنصر المضمن
|
الطرق
الطريقة | |
---|---|
draw(data, options) |
لرسم المخطط. لا يقبل الرسم البياني أي طلبات أخرى للحصول على طريقة إلا بعد إطلاق فعالية نوع الإرجاع: لا شيء
|
getAction(actionID) |
لعرض عنصر إجراء التلميح مع نوع الإرجاع: كائن
|
getBoundingBox(id) |
لعرض كائن يحتوي على عنصر الرسم البياني الأيمن والأيسر والعرض والارتفاع
ترتبط القيم بحاوية الرسم البياني. وعليك باستدعاء هذا بعد رسم المخطط. نوع الإرجاع: كائن
|
getChartAreaBoundingBox() |
لعرض كائن يحتوي على يسار محتوى الرسم البياني والجزء العلوي منه وعرضه وارتفاعه (مثل استبعاد التصنيفات والتسمية التوضيحية):
ترتبط القيم بحاوية الرسم البياني. وعليك باستدعاء هذا بعد رسم المخطط. نوع الإرجاع: كائن
|
getChartLayoutInterface() |
لعرض كائن يحتوي على معلومات حول الموضع الذي يظهر على الشاشة للرسم البياني وعناصره. يمكن استدعاء الطرق التالية في الكائن المعروض:
وعليك باستدعاء هذا بعد رسم المخطط. نوع الإرجاع: كائن
|
getHAxisValue(xPosition, optional_axis_index) |
لعرض قيمة البيانات الأفقية على مثال: وعليك باستدعاء هذا بعد رسم المخطط. نوع الإرجاع: رقم
|
getImageURI() |
لعرض المخطط المتسلسل كعنوان URI للصورة. وعليك باستدعاء هذا بعد رسم المخطط. راجع طباعة مخططات PNG. نوع الإرجاع: سلسلة
|
getSelection() |
لعرض صفيف من كيانات المخطط المحددة.
الكيانات القابلة للتحديد هي أشرطة وإدخالات تسمية توضيحية وفئات.
بالنسبة إلى هذا الرسم البياني، لا يمكن اختيار سوى كيان واحد في أي لحظة.
نوع العرض: مصفوفة من عناصر التحديد
|
getVAxisValue(yPosition, optional_axis_index) |
لعرض قيمة البيانات الرأسية عند مثال: وعليك باستدعاء هذا بعد رسم المخطط. نوع الإرجاع: رقم
|
getXLocation(dataValue, optional_axis_index) |
لعرض الإحداثي x لوحدة البكسل مثال: وعليك باستدعاء هذا بعد رسم المخطط. نوع الإرجاع: رقم
|
getYLocation(dataValue, optional_axis_index) |
لعرض الإحداثي الصادي لبكسل وحدة البكسل مثال: وعليك باستدعاء هذا بعد رسم المخطط. نوع الإرجاع: رقم
|
removeAction(actionID) |
إزالة إجراء تلميح الأداة نوع الإرجاع:
none |
setAction(action) |
تُحدِّد إجراء تلميح لتنفيذه عندما ينقر المستخدم على نص الإجراء.
تستخدم الطريقة
يجب ضبط جميع إجراءات التلميحات قبل استدعاء طريقة الرسم البياني نوع الإرجاع:
none |
setSelection() |
لاختيار كيانات الرسم البياني المحددة. لإلغاء أي اختيار سابق.
الكيانات القابلة للتحديد هي أشرطة وإدخالات تسمية توضيحية وفئات.
بالنسبة إلى هذا الرسم البياني، لا يمكن اختيار سوى كيان واحد في كل مرة.
نوع الإرجاع: لا شيء
|
clearChart() |
محو الرسم البياني وإصدار جميع الموارد المخصّصة له نوع الإرجاع: لا شيء
|
الأحداث
للحصول على مزيد من المعلومات عن كيفية استخدام هذه الأحداث، يمكنك الاطّلاع على التفاعل الأساسي والتعامل مع الأحداث وتنشيط الأحداث.
الاسم | |
---|---|
animationfinish |
يتم الإطلاق عند اكتمال الرسوم المتحركة للنقل. الخصائص: بلا
|
click |
يتم الإطلاق عندما ينقر المستخدم داخل الرسم البياني. ويمكن استخدامها لتحديد وقت النقر على العنوان أو عناصر البيانات أو إدخالات وسيلة الإيضاح أو المحاور أو خطوط الشبكة أو التصنيفات. الخصائص: targetID
|
error |
يتم الإطلاق عند حدوث خطأ عند محاولة عرض الرسم البياني. الخصائص: رقم التعريف، الرسالة
|
legendpagination |
يتم الإطلاق عندما ينقر المستخدم على أسهم ترقيم الصفحات. لإرجاع فهرس الصفحة الحالي المستند إلى الصفر وإجمالي عدد الصفحات. الخصائص: currentPageIndex, totalPages
|
onmouseover |
يتم الإطلاق عندما يمرر المستخدم الماوس فوق وحدة مرئية. لإرجاع فهارس الصفوف والأعمدة الخاصة بعنصر جدول البيانات المقابل. يرتبط شريط بخلية في جدول البيانات، وإدخال أسطوري إلى عمود (فهرس الصف فارغ)، والفئة إلى صف (فهرس العمود فارغ). الخصائص: صف، عمود
|
onmouseout |
يتم الإطلاق عندما يمرر المستخدم بعيدًا عن وحدة مرئية. لإرجاع فهارس الصفوف والأعمدة الخاصة بعنصر جدول البيانات المقابل. يرتبط شريط بخلية في جدول البيانات، وإدخال أسطوري إلى عمود (فهرس الصف فارغ)، والفئة إلى صف (فهرس العمود فارغ). الخصائص: صف، عمود
|
ready |
المخطط جاهز لاستدعاءات الطرق الخارجية. إذا كنت تريد التفاعل مع الرسم البياني وطرق الاتصال بعد رسمه، عليك إعداد مستمع لهذا الحدث قبل طلب طريقة الخصائص: بلا
|
select |
يتم الإطلاق عندما ينقر المستخدم على كيان مرئي. للاطّلاع على ما تم اختياره، يمكنك الاتصال
الخصائص: بلا
|
سياسة البيانات
تتم معالجة جميع الرموز والبيانات وعرضها في المتصفح. ولا يتم إرسال أي بيانات إلى أي خادم.