توضّح هذه الصفحة مفهوم الأدوار واستخدامها في جداول بيانات الرسم البياني.
ما هي الأدوار؟
تتيح الآن عناصر DataTable من Google وDataView من Google إمكانية تعيين أدوار الأعمدة التي تم تعيينها بشكل صريح. ويصف دور العمود الغرض من البيانات في هذا العمود، على سبيل المثال، قد يحتوي عمود على بيانات تصف نص التلميح أو التعليقات التوضيحية لنقاط البيانات أو مؤشرات عدم اليقين. تنطبق معظم أدوار الأعمدة على عمود "البيانات" الذي يسبقه، سواء كان قبله مباشرةً أم قبل أول مجموعة متتالية من أعمدة الأدوار. على سبيل المثال، يمكن أن يكون لديك عمودان يتبعان عمود "البيانات"، أحدهما لـ "tooltip" والآخر "للتعليق التوضيحي". مع ذلك، بعد عمود domain، نسمح أيضًا بشكل عام بدورَي العمود "annotation" و"annotationText".
ملاحظة: إذا أردت التحكّم في محتوى تلميحات الأدوات التي تظهر عندما يمرِّر المستخدم مؤشر الماوس فوق رسم بياني، راجِع التلميحات.
في الأصل، كان هناك دوران فقط للعمود: "النطاق" الذي يحدد قيم المحور الرئيسي، و"البيانات" الذي يحدد ارتفاعات الشريط وعرض الشريحة الدائرية وما إلى ذلك. وقد تم تخصيص هذه الأدوار ضمنيًا استنادًا إلى ترتيب الأعمدة ونوعها في الجدول. مع إمكانية تحديد أدوار الأعمدة بشكل واضح، يمكنك الآن إضافة أعمدة اختيارية توفّر ميزات جديدة ومثيرة للاهتمام إلى الرسم البياني، مثل تصنيفات التعليقات التوضيحية العشوائية والنص الطائر وأشرطة عدم التأكّد.
إذا لم تحدّد دور عمود بشكل صريح، يتم استنتاج دوره من خلال ترتيب العمود في الجدول، وفقًا لمواصفات تنسيق البيانات في الرسم البياني. ستوضّح لك هذه الصفحة الأدوار المتاحة لك لتعيينها بشكل صريح، وكيفية إسنادها.
إليك مقارنة بين الإجراءات التي يمكنك تنفيذها في الرسم البياني الخطي باستخدام الأدوار التلقائية والمستنتجة فقط، مقارنةً بالأدوار الإضافية التي تم تعيينها بشكل صريح.
تنسيق جدول بيانات الرسم البياني الخطي:
| العمود 0 | العمود 1 | ... | العمود N | |
|---|---|---|---|---|
| الغرض | قيم السطر 1 | ... | قيم السطر N | |
| نوع البيانات | الرقم | ... | الرقم | |
| Role | نطاق | البيانات | ... | البيانات |
| أدوار الأعمدة المتاحة الاختيارية |
|
|
... |
|
| رسم بياني بدون أدوار أعمدة واضحة | رسم بياني بأدوار أعمدة واضحة |
|---|---|
|
|
|
لا يطبّق هذا الرسم البياني الأدوار بشكل صريح، وبالتالي لا يمكن استخدام سوى البيانات الأساسية وتنسيق عمود النطاق الموضّح أعلاه. جدول البيانات: var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addRows([
['April',1000],
['May', 1170],
['June', 660],
['July', 1030]
]); |
يعيّن هذا الرسم البياني الأدوار بشكلٍ صريح، وبالتالي يمكن إضافة الأعمدة الاختيارية. يحتوي هذا الرسم البياني على أعمدة اختيارية لأدوار التعليقات التوضيحية والتعليقات التوضيحية والفاصلة واليقين.
جدول البيانات: var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({type:'number', role:'interval'}); // interval role col.
data.addColumn({type:'number', role:'interval'}); // interval role col.
data.addColumn({type:'string', role:'annotation'}); // annotation role col.
data.addColumn({type:'string', role:'annotationText'}); // annotationText col.
data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
data.addRows([
['April',1000, 900, 1100, 'A','Stolen data', true],
['May', 1170, 1000, 1200, 'B','Coffee spill', true],
['June', 660, 550, 800, 'C','Wumpus attack', true],
['July', 1030, null, null, null, null, false]
]); |
ما هي الأدوار المتوفّرة؟
يسرد الجدول التالي جميع الأدوار التي تدعمها "مخطّطات Google". لا يمكن استخدام كل الأدوار مع كل أنواع الرسومات البيانية، لأنّ مستندات كل رسم بياني ستصف الأدوار المتاحة وأين تنتقل، مع العلم بأنّه يتم عرض الأدوار بشكل مختلف حسب أنواع الرسومات البيانية المختلفة.
| Role | الوصف | مثال |
|---|---|---|
| تعليق توضيحي | نص يتم عرضه على الرسم البياني بالقرب من نقطة البيانات المرتبطة ويتم عرض النص بدون أي تفاعل من المستخدم. يمكن تعيين التعليقات التوضيحية ونص التعليقات التوضيحية لكل من نقاط البيانات والفئات (تصنيفات المحور). هناك نمطان للتعليقات التوضيحية: نقطة (تلقائي)، ترسم نص التعليق التوضيحي بالقرب من النقطة المحدّدة، والخط الذي يرسم نص التعليق التوضيحي على خط يقسم مساحة الرسم البياني. يمكنك تحديد نمط الخط من خلال ضبط خيار الرسم البياني التالي: نوع البيانات: سلسلة الإعداد التلقائي: سلسلة فارغة |
البيانات: label: 'Year', 'Sales', null, null, 'Expenses', null, null
role: domain, data, annotate, annotateText, data, annotate, annotateText
'2004', 1000, null, null, 400, null, null
'2005', 1
إنّ الحرفين "أ" و"ب" في هذا الرسم البياني عبارة عن تعليقات توضيحية. مرِّر مؤشر الماوس فوق التعليق التوضيحي لعرض نص التعليق التوضيحي. يجب تمرير مؤشر الماوس فوق التعليق التوضيحي، وليس نقطة البيانات التي يتم تطبيقه عليها، لعرض قيمة annotateText. يتم قبول القيم الخالية لكل من خلايا التعليق التوضيحي والتعليقات التوضيحية النصية، ولكن إذا كانت لديك قيمة annotateText، يجب أن تكون لديك قيمة تعليق توضيحي مرتبطة. |
| annotationText | يتم توسيع النص لعرضه عندما يمرر المستخدم مؤشر الماوس فوق التعليق التوضيحي المرتبط. يمكن تعيين التعليقات التوضيحية ونص التعليقات التوضيحية لكل من نقاط البيانات والفئات (تصنيفات المحور). إذا كان لديك عمود annotateText، يجب أن يكون لديك أيضًا عمود للتعليق التوضيحي. في المقابل، يتم عرض نص التلميح عندما يمرِّر المستخدم مؤشر الماوس فوق نقطة البيانات المرتبطة في الرسم البياني. نوع البيانات: سلسلة الإعداد التلقائي: سلسلة فارغة |
|
| اليقين | تشير إلى ما إذا كانت نقطة البيانات مؤكدة أم لا. وتعتمد طريقة عرض هذا العنوان على نوع الرسم البياني، على سبيل المثال، قد يتم الإشارة إليه بخطوط متقطّعة أو تعبئة مخططة. بالنسبة للمخططات الخطية والمساحية، يكون المقطع بين نقطتين مؤكدًا إذا كانت كلتا نقطتين البيانات متأكدتين فقط. نوع البيانات: منطقي، عندما تكون الصواب مؤكدًا، بينما تكون القيمة "خطأ" غير مؤكّدة. القيمة التلقائية: true |
|
| التوكيد | يؤكد على نقاط بيانات الرسم البياني المحددة. يتم عرضه كخط عريض و/أو نقطة كبيرة. بالنسبة إلى المخططات الخطية والمساحية، يتم التأكيد على المقطع بين نقطتي بيانات إذا وفقط إذا تم التأكيد على نقطتَي البيانات. نوع البيانات: منطقية الإعداد التلقائي: false |
البيانات: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, emphasis, data, emphasis
'2004', 1000, true, 400, false
'2005', 1170, true, 460, true
'2006', 660, false, 1120, true
'2007', 1030, false, 540, true
في هذا الرسم البياني، تحتوي سلسلة "المبيعات" على شريحة واحدة مؤكَّدة، ويتم تحديدها حسب العمود الثالث، والصفَّين الأول والثاني. تحتوي سلسلة "النفقات" على شريحتين محددتين، تم تعيينهما بواسطة العمود الخامس، والصفوف الثانية والثلاثة وأربعة. لاحظ كيف يتطلب التوكيد التأكيد على كل من نقاط الحد. |
| الفاصل الزمني | تشير هذه السمة إلى نطاق البيانات المحتمل لنقطة معيّنة. يتم عرض الفواصل عادةً كمؤشرات لنطاق نمط I-bar. أعمدة الفاصل هي أعمدة رقمية، ويمكنك إضافة أعمدة الفاصل إلى أزواج، مع الإشارة إلى القيمة المنخفضة والمرتفعة للشريط. يجب إضافة قيم الفاصل الزمني بالقيمة المتزايدة، من اليسار إلى اليمين. نوع البيانات: رقم الإعداد التلقائي: بدون فاصل زمني |
البيانات: label: 'Day', 'Stock value', null, null
role: domain, data, interval, interval
'Mon', 38, 20, 45
'Tue', 55, 31, 66
'Wed', 77, 50, 80
'Thurs', 66, 50, 77
في هذا المخطط، تحدد قيم الفاصل شريط I-bar يحيط بالنقاط. تزيد القيم من اليسار إلى اليمين. تشير الفواصل العليا والأدنى حول نقطة إلى أعلى وأسفل الشريط. ملاحظة: للحصول على جميع التفاصيل عن الفواصل الزمنية، راجِع الفاصلات. |
| النطاق | يشير إلى ما إذا كانت النقطة داخل النطاق أم خارجه. إذا كانت النقطة خارج النطاق، فسيتم إلغاء التركيز عليها بصريًا. بالنسبة إلى الرسوم البيانية الخطية والمساحية، يكون الجزء بين نقطتين من البيانات ضمن النطاق إذا كانت أي نقطة نهاية في النطاق. نوع البيانات: قيمة منطقية، تشير القيمة "صحيح" إلى أنّها تقع ضمن النطاق. القيمة التلقائية: true |
البيانات: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, scope, data, scope
'2004', 1000, false, 400, true
'2005', 1170, false, 460, false
'2006', 660, true, 1120, false
'2007', 1030, true, 540, false
ينطبق عمود النطاق الأول على عمود بيانات "المبيعات" على يساره. يصبح الجزء الأول خارج النطاق لأن كلتا النقطتين الحديتين خارج النطاق. ينطبق عمود النطاق الثاني على عمود بيانات "النفقات" على يمينه. يتم وضع علامة على الجزء الأول على أنه داخل النطاق لأن إحدى نقاط حدوده داخل النطاق؛ بينما يكون باقي الخط خارج النطاق لأن جميع النقاط الأخرى مميزة بأنها خارج النطاق. |
| النمط |
تحديد أنماط لسمات معيّنة لجوانب مختلفة من بياناتك. وهذه القيم هي:
نوع البيانات: سلسلة، حيث يمكن تطبيق أنماط متعددة باستخدام بنية القيمة التلقائية: خالية |
البيانات:
label: 'Character', 'Popularity', 'Style',
role: domain, data, style,
'Hulk', 50, 'color: green',
'Captain America', 75, 'color: #0000cf;' +
'stroke-color: #cf001d',
'Wolverine', 90, 'opacity: 0.5;' +
'stroke-width: 5;' +
'stroke-color: #01a0ff;' +
'fill-color: #fff600',
'Iron Man', 60, 'color: #db9500;' +
'stroke-width: 10;' +
'stroke-color: #a30300',
'Spider Man', 100, 'bar {' +
'fill-color: #c8001d;' +
'stroke-width: 3;' +
'stroke-color: #1800c8}'
في هذا الرسم البياني، يكون تصميم كل شريط مستقلاً عن الآخر باستخدام دور العمود ملاحظة: يمكن الاطّلاع على مزيد من التفاصيل في قسم آخر حول كيفية تخصيص نمط النقاط والخطوط والأشرطة. اطّلِع أيضًا على خيارات كل نوع من أنواع الرسومات البيانية حيث يمكن تحديد أنماط لأنواع أخرى من الكيانات، مثل المناطق والنص والمربّعات. |
| تلميح |
نص سيتم عرضه عندما يمرِّر المستخدم مؤشر الماوس فوق نقطة البيانات المرتبطة بهذا الصف. ملاحظة: لا يمكن استخدام هذا التمثيل المرئي في الرسم البياني الفقاعي. إنّ محتوى تلميحات HTML للرسم البياني الفقاعي غير قابل للتخصيص. نوع البيانات: سلسلة الإعداد التلقائي: قيمة نقطة البيانات |
البيانات: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, tooltip, data, tooltip
'2004', 1000, '1M$ sales, 400, '$0.4M expenses
in 2004' in 2004'
'2005', 1170, '1.17M$ sales, 460, '$0.46M expenses
in 2005' in 2005'
'2006', 660, '.66$ sales, 1120, '$1.12M expenses
in 2006' in 2006'
'2007', 1030, '1.03M$ sales, 540, '$0.54M expenses
in 2007' in 2007'
مرِّر مؤشر الماوس فوق نقاط البيانات لعرض نص التلميح. يتم تعيين بيانات تلميح إلى جميع النقاط في كلا الخطين، في العمودين 3 و5. ملاحظة: لمزيد من التفاصيل حول تخصيص التلميحات، يُرجى الاطّلاع على التلميحات. |
| النطاق | ليس عليك إسناد هذا الدور بشكل صريح إلا إذا تم تصميم رسم بياني متعدد النطاقات (كما هو موضّح هنا)، لأنّ التنسيق الأساسي لجدول البيانات يتيح لمحرّك الرسومات البيانية استنتاج الأعمدة التي هي أعمدة في النطاق. مع ذلك، عليك معرفة الأعمدة التي هي أعمدة في النطاق، وبالتالي تحديد الأعمدة الأخرى التي يمكن تعديلها. تحدد أعمدة المجال التسميات على طول المحور الرئيسي للمخطط. يمكن في بعض الأحيان استخدام أعمدة نطاق متعددة لدعم مقاييس متعددة داخل الرسم البياني نفسه. نوع البيانات: عادةً ما تكون سلسلة، لكن أحيانًا رقم أو تاريخ |
البيانات:
label: '2009, '2009, '2009, '2008, '2008 '2008
Quarter', Sales', Expenses', Quarter', Sales', Expenses'
role: domain, data, data, domain, data, data
'Q1/09', 1000, 400, 'Q1/08', 800, 300
'Q2/09', 1170, 460, 'Q2/08', 750, 400
'Q3/09', 660, 1120, 'Q3/08', 700, 540
'Q4/09', 1030, 540, 'Q4/08', 820, 620
يوضح هذا المثال رسمًا بيانيًا متعدد النطاقات. يقوم أول عمودين من عمودي البيانات بتعديل النطاق الأول ("ربع عام 2009")، ويعدّل عمودا البيانات الأخيران النطاق الثاني ("ربع عام 2008"). يظهر كلا النطاقين على نفس مقاييس المحور. |
| البيانات | ليس عليك إسناد هذا الدور بشكل صريح، لأنّ التنسيق الأساسي لجدول البيانات يتيح لمحرّك الرسومات البيانية استنتاج الأعمدة التي هي أعمدة في النطاق. في المقابل، عليك معرفة الأعمدة التي هي أعمدة بيانات، وبالتالي تحديد الأعمدة الأخرى التي يمكن تعديلها. تحدّد أعمدة دور البيانات بيانات السلسلة المطلوب عرضها في الرسم البياني. في معظم الرسومات البيانية، يكون عمود واحد = سلسلة واحدة، ولكن يمكن أن يختلف هذا العمود حسب نوع الرسم البياني (على سبيل المثال، تتطلّب الرسوم البيانية للنقاط المبعثرة عمودَي بيانات للسلسلة الأولى، وعمود إضافي لكل سلسلة إضافية. تتطلّب الرسوم البيانية بالشموع أربعة أعمدة بيانات لكل سلسلة). نوع البيانات: رقم |
التسلسل الهرمي للأدوار والرابطة
يوضح المخطّط التالي أعمدة الأدوار التي يمكن تطبيقها على أعمدة الأدوار الأخرى. تنطبق كل الأعمدة باستثناء أعمدة النطاق على الجار الأقرب الأيسر الذي يمكن تطبيقه عليها.
لذلك، على سبيل المثال، ينطبق عمود النطاق على أقرب عمود بيانات على يمينه، وسيتم تطبيق عمود annotationText على أقرب عمود annotation على يساره، وسيتم تطبيق التعليق التوضيحي على أقرب عمود data أو domain على يساره.
تعيين دور
يتمّ تعيين الأدوار كخاصية للعمود في كائن DataTable. وهناك عدة طرق لإنشاء عمود دور، ولكن إليك أكثرها شيوعًا:
يرسم أول أسلوبين المخطط التالي:
طريقة DataTable.addColumn
ينشئ المثال التالي رسمًا بيانيًا شريطيًا يتضمّن محدِّد الفاصل الزمني على ثلاثة من الأشرطة. ويتم تحديد علامات الفواصل الزمنية من خلال العمودين الثالث والرابع باستخدام الإجراء DataTable.addColumn().
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain column.
data.addColumn('number', 'Sales'); // Implicit data column.
data.addColumn({type:'number', role:'interval'});
data.addColumn({type:'number', role:'interval'});
data.addColumn('number', 'Expenses');
data.addRows([
['April',1000, 900, 1100, 400],
['May', 1170, 1000, 1200, 460],
['June', 660, 550, 800, 1120],
['July', 1030, , , 540]
]);
var chart = new google.visualization.BarChart(
document.getElementById('visualization'));
chart.draw(data,
{width: 800, height: 600, title: 'Company Performance'});
التدوين الحرفي لـ JavaScript
في صيغة JSON الحرفية، عليك تحديد سمة p في العمود باستخدام القيمة "role":"role-type".
يوضّح المثال التالي كيفية تحديد الأدوار باستخدام الترميز الحرفي في JavaScript. لا يمكن تنفيذ ذلك إلا في وقت إنشاء الجدول.
{"cols":[
{"id":"","label":"Month","pattern":"","type":"string"},
{"id":"","label":"Sales","pattern":"","type":"number"},
{"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
{"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
{"id":"","label":"Expenses","pattern":"","type":"number"}],
"rows":[
{"c":[
{"v":"April","f":null},
{"v":1000,"f":null},
{"v":900,"f":null},
{"v":1100,"f":null},
{"v":400,"f":null}]},
{"c":[
{"v":"May","f":null},
{"v":1170,"f":null},
{"v":1000,"f":null},
{"v":1200,"f":null},
{"v":460,"f":null}]},
{"c":[{"v":"June","f":null},
{"v":660,"f":null},
{"v":550,"f":null},
{"v":800,"f":null},
{"v":1120,"f":null}]},
{"c":[
{"v":"July","f":null},
{"v":1030,"f":null},
{"v":null,"f":null},
{"v":null,"f":null},
{"v":540,"f":null}]}],
"p":null
}
طريقة DataView.setColumns
عند إنشاء ملف شخصي، يمكنك تحديد دور العمود بشكل صريح. ويكون هذا مفيدًا عند إنشاء عمود مَحسوب جديد. يمكنك الانتقال إلى DataView.setColumns() للاطّلاع على مزيد من المعلومات.