چارت سازمانی

بررسی اجمالی

نمودارهای سازمانی نمودارهای سلسله مراتبی از گره ها هستند که معمولاً برای به تصویر کشیدن روابط برتر/فرد در یک سازمان استفاده می شوند. شجره نامه نوعی نمودار سازمانی است.

مثال 

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

فرمت داده ها

جدولی با سه ستون رشته، که در آن هر ردیف نشان دهنده یک گره در orgchart است. این سه ستون است:

  • ستون 0 - شناسه گره. باید در بین تمام گره ها منحصر به فرد باشد و می تواند شامل هر کاراکتری از جمله فاصله باشد. این روی گره نشان داده شده است. به جای آن می‌توانید یک مقدار قالب‌بندی شده برای نمایش در نمودار مشخص کنید، اما مقدار قالب‌بندی نشده همچنان به عنوان شناسه استفاده می‌شود.
  • ستون 1 - [ اختیاری ] شناسه گره والد. این باید مقدار فرمت نشده از ستون 0 سطر دیگر باشد. برای یک گره ریشه نامشخص بگذارید.
  • ستون 2 - [ اختیاری ] متن نکته ابزار برای نمایش، زمانی که کاربر روی این گره قرار می گیرد.

هر گره می تواند صفر یا یک گره والد و صفر یا چند گره فرزند داشته باشد.

ویژگی های سفارشی

با استفاده از متد setProperty() DataTable می توانید ویژگی های سفارشی زیر را به عناصر جدول داده اختصاص دهید:

نام ملک
انتخاب سبک

برای: ردیف DataTable اعمال می شود

یک رشته سبک درون خطی برای اختصاص دادن به یک گره خاص در صورت انتخاب. برای این کار باید گزینه allowHtml=true را تنظیم کنید، و باید قبل از فراخوانی draw() در تصویرسازی تنظیم شود. این گزینه selectionColor برای گره مشخص شده لغو می کند.

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

سبک

برای: ردیف DataTable اعمال می شود

یک رشته سبک درون خطی برای اختصاص دادن به یک گره خاص. این توسط ویژگی selectedStyle لغو می شود. برای این کار باید گزینه allowHtml=true را تنظیم کنید، و باید قبل از فراخوانی draw() در تصویرسازی تنظیم شود. این گزینه color برای گره مشخص شده لغو می کند.

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

گزینه های پیکربندی

نام
allowCollapse

تعیین می کند که آیا دوبار کلیک کردن یک گره را جمع می کند یا خیر.

نوع: boolean
پیش فرض: false
allowHtml

اگر روی true تنظیم شود، نام هایی که شامل تگ های HTML هستند به صورت HTML ارائه می شوند.

نوع: boolean
پیش فرض: false
رنگ

منسوخ. به جای آن از nodeClass استفاده کنید. رنگ پس زمینه عناصر orgchart.

نوع: string
پیش‌فرض: '#edf7ff'
ردیف های فشرده

اگر روی true تنظیم شود، تا زمانی که گره‌ها روی هم قرار نگیرند، زیردرخت‌ها تا حد ممکن نزدیک قرار می‌گیرند. از این گزینه برای کاهش عرض کلی طراحی و طول لبه استفاده کنید.

نوع: boolean
پیش فرض: false
nodeClass

یک نام کلاس برای اختصاص دادن به عناصر گره. CSS را به نام این کلاس اعمال کنید تا رنگ ها یا سبک ها را برای عناصر نمودار مشخص کنید.

نوع: string
پیش‌فرض: default class name
SelectNodeClass

یک نام کلاس برای اختصاص دادن به عناصر گره انتخاب شده. CSS را به نام این کلاس اعمال کنید تا رنگ ها یا سبک ها را برای عناصر نمودار انتخاب شده مشخص کنید.

نوع: string
پیش‌فرض: default class name
انتخاب رنگ

منسوخ. به جای آن از selectedNodeClass استفاده کنید. رنگ پس زمینه عناصر منتخب orgchart.

نوع: string
پیش‌فرض: '#d6e9f8'
اندازه

"کوچک"، "متوسط" یا "بزرگ"

نوع: 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 - یک Boolean که نشان می‌دهد این یک رویداد "جمع کردن" یا "گسترش" است.
row - شاخص مبتنی بر صفر ردیف در جدول داده ها، مربوط به گره ای است که روی آن کلیک می شود.
روی موشواره

وقتی کاربر روی یک ردیف خاص حرکت می‌کند.

خواص:
row - شاخص مبتنی بر صفر ردیف در جدول داده ها، مربوط به گره ای است که ماوس روی آن قرار می گیرد.
سوار کردن

زمانی فعال می شود که کاربر از یک ردیف خارج می شود.

خواص:
row - شاخص مبتنی بر صفر ردیف در جدول داده ها، مربوط به گره ای است که از آن موس خارج می شود.
انتخاب کنید

رویداد انتخاب استاندارد

خواص:
هیچ یک
آماده

نمودار برای تماس های متد خارجی آماده است. اگر می‌خواهید با نمودار تعامل داشته باشید و بعد از ترسیم آن متدها را فراخوانی کنید، باید قبل از فراخوانی روش draw یک شنونده برای این رویداد تنظیم کنید و تنها پس از فعال شدن رویداد، متدها را فراخوانی کنید.

خواص:
هیچ یک

سیاست داده

تمام کدها و داده ها در مرورگر پردازش و ارائه می شوند. هیچ داده ای به هیچ سروری ارسال نمی شود.