مخطط هيكلي

نظرة عامة

المخططات التنظيمية هي مخطّطات بيانية لتدرج عُقدًا، وتُستخدم عادةً لتصوير العلاقات العليا/الفرعية في مؤسسة ما. شجرة العائلة هي نوع من المخططات التنظيمية.

مثال

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:["orgchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        // For each orgchart box, provide the name, manager, and tooltip to show.
        data.addRows([
          [{'v':'Mike', 'f':'Mike<div style="color:red; font-style:italic">President</div>'},
           '', 'The President'],
          [{'v':'Jim', 'f':'Jim<div style="color:red; font-style:italic">Vice President</div>'},
           'Mike', 'VP'],
          ['Alice', 'Mike', ''],
          ['Bob', 'Jim', 'Bob Sponge'],
          ['Carol', 'Bob', '']
        ]);

        // Create the chart.
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        // Draw the chart, setting the allowHtml option to true for the tooltips.
        chart.draw(data, {'allowHtml':true});
      }
   </script>
    </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

جارٍ التحميل

اسم الحزمة هو 'orgchart'.

  google.charts.load('current', {packages: ['orgchart']});

اسم فئة العرض المرئي هو google.visualization.OrgChart.

  var visualization = new google.visualization.OrgChart(container);

تنسيق البيانات

تمثّل هذه السمة جدولاً مكونًا من ثلاثة أعمدة سلاسل، ويمثّل كل صف عقدة في الرسم البياني التنظيمي. في ما يلي الأعمدة الثلاثة:

  • العمود 0 - رقم تعريف العقدة. ويجب أن يكون فريدًا بين جميع العُقد ويمكن أن يتضمّن أي أحرف، بما في ذلك المسافات. ويتم عرض هذا على العقدة. يمكنك تحديد قيمة منسَّقة لعرضها في الرسم البياني بدلاً من ذلك، ولكن تظل القيمة غير المنسَّقة تُستخدَم كرقم تعريف.
  • العمود 1 - [اختياري] رقم تعريف العُقدة الرئيسية. ويجب أن تكون هذه القيمة هي القيمة غير المنسَّقة الواردة في العمود 0 من صف آخر. يجب عدم تحديد قيمة للعقدة الجذر.
  • العمود 2 - [اختياري] نص تلميح لعرضه عندما يمرِّر المستخدم مؤشر الماوس فوق هذه العقدة.

يمكن أن تحتوي كل عقدة على صفر أو عقدة رئيسية واحدة، ولا توجد عُقد فرعية أو أكثر.

الخصائص المخصّصة

يمكنك تحديد السمات المخصّصة التالية لعناصر جدول البيانات باستخدام طريقة setProperty() للطريقة DataTable:

اسم الموقع
selectedStyle

تنطبق على: صف DataTable

سلسلة نمط مضمّنة لتخصيصها إلى عقدة معينة عند تحديدها. يجب ضبط الخيار allowHtml=true لكي يعمل هذا الخيار، ويجب ضبطه قبل استدعاء draw() في العرض المرئي. يؤدي هذا الإجراء إلى إلغاء الخيار selectionColor للعقدة المحدّدة.

مثال:   myDataTable.setRowProperty(2, 'selectedStyle', 'background-color:#00FF00');

style

تنطبق على: صف DataTable

سلسلة نمط مضمّنة لتعيينها إلى عقدة معينة. وتلغي السمة selectedStyle هذا التصنيف. يجب ضبط الخيار allowHtml=true لكي يعمل هذا الخيار، ويجب ضبطه قبل استدعاء draw() في العرض المرئي. يؤدي هذا الإجراء إلى إلغاء الخيار color للعقدة المحدّدة.

مثال:   myDataTable.setRowProperty(3, 'style', 'border: 1px solid green');

خيارات الضبط

الاسم
allowCollapse

تحدِّد هذه السياسة ما إذا كان النقر مرّتين سيؤدي إلى تصغير عقدة.

النوع: boolean
تلقائي: false
allowHtml

إذا تم ضبطها على "صحيح"، سيتم عرض الأسماء التي تحتوي على علامات HTML على أنّها HTML.

النوع: boolean
تلقائي: false
اللون

تمّت إزالة هذا العمود. يمكنك استخدام العقدة noneClass بدلاً من ذلك. لون الخلفية لعناصر المخطط التنظيمي.

النوع: string
تلقائي: '#edf7ff'
compactRows

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

النوع: boolean
تلقائي: false
nodeClass

اسم فئة لتعيينه لعناصر العقدة. طبِّق CSS على اسم الفئة هذا لتحديد الألوان أو الأنماط لعناصر الرسم البياني.

النوع: string
تلقائي: default class name
selectedNodeClass

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

النوع: string
تلقائي: default class name
selectionColor

تمّت إزالة هذا العمود. استخدِم فئة NodeClass المحدّدة بدلاً من ذلك. لون الخلفية لعناصر المخطط التنظيمي المحددة.

النوع: string
تلقائي: '#d6e9f8'
الحجم

"صغير" أو "متوسط" أو "كبير"

النوع: string
تلقائي: 'medium'

الطُرق

الطريقة
collapse(row, collapsed)
تصغير العقدة أو توسيعها
  • row: فهرس الصف المطلوب توسيعه أو تصغيره.
  • collapsed ما إذا كان سيتم تصغير الصف أو توسيعه، حيث تعني القيمة "صحيح" تصغيره.
نوع الإرجاع: none
draw(data, options)

لرسم الرسم البياني.

نوع الإرجاع: none
getChildrenIndexes(row)

تعرض صفيفًا يتضمن الفهارس الخاصة بالعناصر الثانوية للعقدة المحددة.

نوع الإرجاع Array.<number>
getCollapsedNodes

تعرض مصفوفة تتضمّن قائمة فهارس العقدة المصغّرة.

نوع الإرجاع: Array.<number>
getSelection()

تنفيذ getSelection() عادي. عناصر الاختيار هي جميع عناصر الصف. يمكن عرض أكثر من صف محدّد.

نوع الإرجاع: مصفوفة من عناصر الاختيار
setSelection(selection)

تنفيذ setSelection() عادي. تتعامل مع كل إدخال اختيار كاختيار صف. ويتيح اختيار عدة صفوف.

نوع الإرجاع: لا شيء

الأحداث

الاسم
تصغير

يتم بدء الحدث عند ضبط allowCollapse على true وينقر المستخدم مرتين على عقدة تحتوي على عناصر فرعية.

المواقع:
collapsed - قيمة منطقية تشير إلى ما إذا كان الحدث "تصغير" أو "توسيع".
row - الفهرس القائم على الصفر للصف في جدول البيانات، والمطابق للعقدة التي يتم النقر عليها.
onmouseover

يتم تشغيله عندما يمرِّر المستخدم مؤشر الماوس فوق صف معيّن.

المواقع:
row: الفهرس القائم على الصفر للصف في جدول البيانات، والمطابق للعقدة التي يتم تمرير الماوس فوقها
onmouseout

يتم تشغيله عندما يمرِّر المستخدم مؤشر الماوس خارج أحد الصفوف.

المواقع:
row - الفهرس القائم على الصفر للصف في جدول البيانات، والمطابق للعقدة التي يتم تمرير الماوس منها.
اختيار

حدث اختيار عادي

المواقع:
لا ينطبق
جاهز

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

المواقع:
لا ينطبق

سياسة البيانات

تتم معالجة جميع الرموز والبيانات وعرضها في المتصفّح. ولا يتم إرسال أي بيانات إلى أي خادم.