أدوار العمود

تصف هذه الصفحة مفهوم الأدوار واستخدامه في جداول بيانات الرسم البياني.

  1. ما هي الأدوار؟
  2. ما هي الأدوار المتوفّرة؟
  3. التدرج الهرمي للدور والارتباط الوظيفي
  4. إسناد دور

ما الأدوار؟

تتوافق كائنات Google DataTable وDataView الآن مع أدوار الأعمدة التي تم تعيينها بشكل صريح. يصف دور العمود الغرض من البيانات في هذا العمود: على سبيل المثال، قد يحتوي أحد الأعمدة على بيانات تصف نص تلميحات الأدوات أو التعليقات التوضيحية لنقاط البيانات أو مؤشرات عدم التأكّد. وتنطبق معظم أدوار الأعمدة على عمود "البيانات" الذي يسبقه، سواء كان قبله مباشرةً أو قبل أول مجموعة متتابعة من أعمدة الأدوار. على سبيل المثال، قد يكون لديك عمودان يتبعان عمود "البيانات"، أحدهما لـ "تلميح" والآخر للتعليق التوضيحي. ولكن بعد العمود 'domain'، نسمح أيضًا بشكلٍ عام بأدوار العمودين 'annotation' و'annotationText'.

ملاحظة: إذا كنت تريد التحكّم في محتوى تلميحات الأدوات التي تظهر عندما يمرّر المستخدم مؤشر الماوس فوق رسم بياني، يمكنك الاطّلاع على نصائح الأداة.

في الأصل، لم يتوفّر سوى دورَين للعمود: "النطاق" الذي يحدّد قيم المحور الرئيسي، و"البيانات" الذي يحدّد ارتفاعات الشريط وعروض الشرائح الدائرية وما إلى ذلك. وتم تخصيص هذه الأدوار بشكل ضمني، استنادًا إلى ترتيب الأعمدة في الجدول ونوعها. ومع ذلك، مع القدرة على إسناد أدوار العمود بشكل صريح، يمكنك الآن إضافة أعمدة اختيارية توفّر ميزات جديدة ومثيرة للاهتمام في رسم بياني، مثل تصنيفات التعليقات التوضيحية العشوائية والتمرير فوق النص وأشرطة عدم التأكّد.

في حال عدم تحديد دور العمود بشكل صريح، سيتم استنتاج دوره من خلال ترتيب العمود في الجدول، وفقًا لمواصفات تنسيق بيانات الرسم البياني. ستوضّح لك هذه الصفحة الأدوار المتاحة لك صراحةً وكيفية تحديد هذه الأدوار.

في ما يلي مقارنة بين ما يمكنك تنفيذه باستخدام رسم بياني خطي باستخدام الأدوار التلقائية المستنبطة فقط، مقارنةً بالأدوار الإضافية والمُحدَّدة صراحةً.

تنسيق جدول بيانات الرسم البياني الخطي:

  العمود 0 العمود 1 ... العمود N
الغرض
  • تصنيفات مجموعات المحور السيني (منفصلة)
  • قيم المحور السيني (مستمر)
قيم السطر 1 ... قيم السطر N
نوع البيانات number ... number
الدور نطاق البيانات ... البيانات
الأدوار الاختيارية والمتاحة
للأعمدة
  • علامة توضيح
  • نص التعليق التوضيحي
  • علامة توضيح
  • نص التعليق التوضيحي
  • يقين
  • التشديد
  • interval
  • نطاق
  • style
  • تلميح
...
  • علامة توضيح
  • نص التعليق التوضيحي
  • يقين
  • التشديد
  • interval
  • نطاق
  • style
  • تلميح

 

رسم بياني بدون أدوار أعمدة صريحة رسم بياني لأدوار الأعمدة الصريحة

لا يطبّق هذا الرسم البياني الأدوار بشكل صريح، ولذلك يمكن فقط استخدام تخطيط أعمدة البيانات والنطاق الأساسي الموضح أعلاه.

جدول البيانات:

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]
]);

يعيّن هذا الرسم البياني الأدوار بشكل صريح، ومن ثم يمكن إضافة الأعمدة الاختيارية. يحتوي هذا الرسم البياني على أعمدة اختيارية لأدوار التعليقات التوضيحية والنص التوضيحي والفاصل الزمني والتأكيد.

  • التعليقات التوضيحية تحدد التصنيفات الثابتة في المخطط. وهنا، تعتبر "أ" و"ب" و"ج" تعليقات توضيحية.
  • annotationText التي تحدد النص عند تمرير الماوس فوق التعليق التوضيحي (وليس نقطة البيانات).
  • الفاصل الزمني تحدد النقطتين العلويتين والسفليتين لأشرطة I-على المخطط. هناك ثلاثة أشرطة I- في المخطط.
  • اليقين ما إذا كانت البيانات في هذه المرحلة مؤكدة أم لا. النقطة الأخيرة في البيانات غير مؤكدة، وبالتالي فإن السطر المؤدي إليها متقطع.

جدول البيانات:

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. لا تتوافق جميع الأدوار مع جميع أنواع الرسوم البيانية، حيث ستوضّح وثائق كل رسم بياني الأدوار المتاحة والأماكن التي تذهب إليها. ويتم عرض الأدوار بشكل مختلف لأنواع الرسوم البيانية المختلفة.

الدور الوصف مثال
تعليق توضيحي

النص المطلوب عرضه على الرسم البياني بالقرب من نقطة البيانات المرتبطة. يتم عرض النص بدون أي تفاعل من المستخدم. يمكن تعيين نص التعليقات التوضيحية والتعليقات التوضيحية لكل من نقاط البيانات والفئات (تصنيفات المحور).

هناك نمطان للتعليقات التوضيحية: النقطة (التلقائية) التي ترسم نص التعليق التوضيحي بالقرب من النقطة المحددة والسطر الذي يرسم نص التعليق التوضيحي على سطر يقسم منطقة الرسم البياني. يمكنك تحديد نمط الخط من خلال ضبط خيار الرسم البياني التالي: annotations: {'column_id': {style: 'line'}}

نوع البيانات: سلسلة

تلقائي: سلسلة فارغة

البيانات:

label: 'Year', 'Sales', null, null, 'Expenses', null, null role: النطاق، البيانات، التعليق التوضيحي، التعليق التوضيحي، النص، التعليق التوضيحي، التعليق التوضيحي '2004'، 1000، null، 0، 0، 0، 0، 0، 0، 0، 0، 0، 0، 0، 0، 0، 0، و0، و0، و0، و0، و0

يمثّل الحرفان "A" و"B" في هذا الرسم البياني تعليقات توضيحية. مرِّر مؤشر الماوس فوق التعليق التوضيحي للاطّلاع على نص التعليق التوضيحي. تجدر الإشارة إلى أنّه يجب تمرير مؤشر الماوس فوق التعليق التوضيحي، وليس نقطة البيانات التي يتم تطبيقها عليه، لعرض قيمة التعليق التوضيحي لنص.

يتم قبول القيم الفارغة لكل من خلايا التعليق التوضيحي وخلايا التعليق التوضيحي، ولكن إذا كانت لديك قيمة نص توضيحي، يجب أن تكون لديك قيمة تعليق توضيحي مرتبطة.

نص التعليق التوضيحي

النص الموسّع الذي سيتم عرضه عندما يمرر المستخدم مؤشر الماوس فوق التعليق التوضيحي المرتبط. يمكن تعيين التعليقات التوضيحية ونص التعليق التوضيحي لكل من نقاط البيانات والفئات (تصنيفات المحور). إذا كان لديك عمود نص توضيحي، يجب أن يكون لديك أيضًا عمود تعليق توضيحي. وعلى طرف النقيض، يتم عرض نص تلميح الأداة عندما يمرِّر المستخدم مؤشر الماوس فوق نقطة البيانات ذات الصلة في الرسم البياني.

نوع البيانات: سلسلة

تلقائي: سلسلة فارغة

التأكيد

يشير إلى ما إذا كانت نقطة البيانات مؤكدة أم لا. وتعتمد طريقة عرض المحتوى على نوع الرسم البياني، على سبيل المثال، قد يُشار إليه بخطوط متقطعة أو تعبئة مخططة.

بالنسبة إلى المخططات الخطية والمساحية، يكون التقسيم بين نقطتي بيانات مؤكدًا فقط في حالة ما إذا كانت كلتا نقطتي البيانات مؤكتين.

نوع البيانات: منطقي، عندما تكون القيمة 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. الأعمدة الفاصلّة هي أعمدة رقمية، ويمكنك إضافة أعمدة الفاصلات في أزواج، مع تحديد القيمة المرتفعة والمنخفضة للشريط. ويجب إضافة قيم الفاصل الزمني في قيمة متزايدة من اليسار إلى اليمين.

نوع البيانات: رقم

تلقائي: بلا فاصل

البيانات:

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 حول النقاط. تزيد القيم من اليسار إلى اليمين. تشير الفواصل الزمنية الأعلى والأدنى حول النقطة إلى أعلى الشريط وأسفله.

ملاحظة: للحصول على جميع التفاصيل حول الفواصل الزمنية، راجع الفترات الزمنية.

النطاق

يشير إلى ما إذا كانت النقطة خارج النطاق أم لا. إذا كانت إحدى النقاط خارج النطاق، فسيتم إلغاء التركيز عليها مرئيًا.

بالنسبة إلى المخططات الخطية والمساحية، تقع الشريحة بين نقطتي بيانات في النطاق إذا كانت أي من نقاط النهاية في النطاق.

نوع البيانات: منطقي، حيث تعني القيمة الصحيحة في النطاق.

تلقائي: صحيح

البيانات:

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

ينطبق عمود النطاق الأول على عمود بيانات "المبيعات" على يمينه. يتم عرض الجزء الأول خارج النطاق نظرًا لأن نقطتي الحدود خارج النطاق. وينطبق عمود النطاق الثاني على عمود بيانات "النفقات" على يمينه. ويتم وضع علامة على الجزء الأول باعتباره داخل النطاق لأن إحدى النقاط الحدية تقع ضمن النطاق؛ في حين أن بقية السطر خارج النطاق لأن جميع النقاط الأخرى تم وضع علامة عليها خارج النطاق.

النمط

تصميم خصائص معينة لجوانب مختلفة من بياناتك. وهذه القيم هي:

  • color
  • opacity
  • stroke-width
  • stroke-color
  • stroke-opacity
  • fill-color
  • fill-opacity

نوع البيانات: سلسلة، حيث يمكن تطبيق أنماط متعددة باستخدام بنية 'firstProperty: value; secondProperty: value'، أو تعيين أنماط معينة لـ bar, line, وpoint من خلال تحديد النوع والتفاف خصائص النمط داخل أقواس معقوفة (مثل bar { //properties go here }).

القيمة التلقائية: فارغة

البيانات:

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}'

      

في هذا الرسم البياني، يتم تصميم كل شريط بشكل مستقل عن الأنماط الأخرى باستخدام دور العمود style. يمكن تحديد الأنماط للنقاط أو الخطوط أو الأشرطة تحديدًا (راجع صف "الرجل العنكبوت")، أو بشكل عام، ما سيؤدي إلى تطبيق الأنماط على جميع النقاط والخطوط والأشرطة، حسب نوع الرسم البياني.

ملاحظة: تم توثيق المزيد من التفاصيل في مكان آخر حول كيفية تخصيص نمط النقاط والخطوط والأشرطة. يمكنك أيضًا الاطّلاع على خيارات لكل نوع من المخططات حيث يمكن تحديد الأنماط لأنواع أخرى من الكيانات، مثل المناطق والنص والمربعات.

تلميح

النص المطلوب عرضه عندما يمرر المستخدم مؤشر الماوس فوق نقطة البيانات المرتبطة بهذا الصف.

ملاحظة: هذه الميزة غير متاحة في التمثيل البصري لفقاعة تفسيرية. محتوى تلميحات 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 على أقرب عمود تعليق توضيحي إلى يمينه، وسيتم تطبيق تعليق توضيحي على أقرب عمود بيانات أو نطاق إلى يمينه.

تعيين دور

يتم تعيين الأدوار كخاصية للعمود في كائن 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'});

الترميز الحرفي لجافا سكريبت

في ملف 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.setColumn

عند إنشاء ملف شخصي، يمكنك تعيين دور العمود بشكل صريح. وهذا مفيد عند إنشاء عمود مَحسوب جديد. لمزيد من المعلومات، يُرجى الاطّلاع على DataView.setColumns().