תרשים הארגון

סקירה כללית

תרשימים ארגוניים הם דיאגרמות של היררכיית צמתים, שמשמשות בדרך כלל להצגת קשרי גומלין ראשיים/תחתונים בארגון. עץ משפחה הוא סוג של תרשים ארגוני.

דוגמה

 
<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 בשורה אחרת. משאירים את הערך לא מוגדר לצומת הרמה הבסיסית (root).
  • עמודה 2 - [אופציונלי] תיאור כלי להצגה כשהמשתמשים מעבירים את העכבר מעל הצומת הזה.

כל צומת יכול להכיל אפס צומת הורה או צומת הורה אחד, או אפס צומתי צאצא או יותר.

נכסים מותאמים אישית

אפשר להקצות את המאפיינים המותאמים אישית הבאים לרכיבים בטבלת נתונים באמצעות ה-method 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

אם המדיניות מוגדרת כ-True, שמות שכוללים תגי HTML יוצגו כ-HTML.

סוג: boolean
ברירת המחדל: false
color [צבע]

הוצא משימוש. במקום זאת, יש להשתמש ב-NodeClass. צבע הרקע של רכיבי התרשים הארגוני.

סוג: string
ברירת המחדל: '#edf7ff'
compactRows

אם המדיניות מוגדרת כ-True, עצי המשנה ימוקמו קרוב ככל האפשר, כל עוד אין חפיפה בין הצמתים. אפשר להשתמש באפשרות הזו כדי להקטין את הרוחב הכולל של השרטוט ואת אורך הקצה.

סוג: boolean
ברירת המחדל: false
nodeClass

שם מחלקה שצריך להקצות לרכיבי צומת. צריך להחיל CSS על שם המחלקה הזו כדי לציין צבעים או סגנונות עבור רכיבי התרשים.

סוג: string
ברירת המחדל: default class name
selectedNodeClass

שם מחלקה שאפשר להקצות לרכיבי הצומת שנבחרו. צריך להחיל CSS על שם הכיתה כדי לציין צבעים או סגנונות של רכיבי התרשים שנבחרו.

סוג: string
ברירת המחדל: default class name
selectionColor

הוצא משימוש. במקומו צריך להשתמש ב- selectedNodeClass. צבע הרקע של רכיבי התרשים הארגוני שנבחרו.

סוג: 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 - האינדקס מבוסס האפס של השורה בטבלת הנתונים, התואם לצומת שעליו לוחצים.
onmouseover

מופעל כשמשתמש מעביר את העכבר מעל שורה ספציפית.

נכסים:
row - האינדקס מבוסס האפס של השורה בטבלת הנתונים, התואם לצומת שממנו מעבירים את העכבר.
onmouseout

מופעל כשמשתמש מעביר את העכבר מעל שורה.

נכסים:
row - האינדקס מבוסס האפס של השורה בטבלת הנתונים, התואם לצומת שממנו יוצא העכבר.
בחירה

אירוע רגיל מסוג 'בחירה רגילה'

נכסים:
אין
למקומות

התרשים מוכן לקריאות method חיצוניות. אם רוצים להשתמש בתרשים, ולהוסיף שיטות קריאה אחרי שרטוט, צריך להגדיר האזנה לאירוע הזה לפני שמפעילים את השיטה draw, ולקרוא לשיטות רק אחרי שהאירוע מופעל.

נכסים:
אין

המדיניות בנושא נתונים

כל הקוד והנתונים מעובדים ומעובדים בדפדפן. לא נשלחים נתונים לאף שרת.