مخطط هيكلي

نظرة عامة

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

مثال

 
<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:

اسم الموقع
نمط محدد

تنطبق على: صف 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');

خيارات الضبط

الاسم
السماح بتصغير

لتحديد ما إذا كان النقر المزدوج سيؤدي إلى تصغير العقدة.

النوع: boolean
تلقائي: false
سماح HTML

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

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

متوقف. يمكنك استخدام عقدة classClass بدلاً من ذلك. لون خلفية عناصر orgchart.

النوع: string
تلقائي: '#edf7ff'
صفوف مضغوطة

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

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

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

النوع: string
تلقائي: default class name
تم تحديد عقدة العقدة

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

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

متوقف. استخدِم NodeNodeClass بدلاً من ذلك. لون خلفية عناصر المخطّط التنظيمي المحدّدة

النوع: string
تلقائي: '#d6e9f8'
size

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

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

الطرق

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

لرسم المخطط.

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

لعرض صفيف يحتوي على فهارس من العقدة الفرعية المحددة.

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

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

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

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

نوع العرض: مصفوفة من عناصر التحديد
setSelection(selection)

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

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

الأحداث

الاسم
تصغير

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

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

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

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

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

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

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

الخصائص:
لا ينطبق
جاهز

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

الخصائص:
لا ينطبق

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

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