תרשים הארגון

סקירה כללית

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

דוגמה

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

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

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

הוצאה משימוש. במקום זאת, אפשר להשתמש ב-צומתClass. צבע הרקע של רכיבי orgorget.

סוג: string
ברירת מחדל: '#edf7ff'
שורות קומפקטיות

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

סוג: boolean
ברירת מחדל: false
מחלקת צמתים

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

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

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

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

הוצאה משימוש. במקומה, צריך להשתמש במדיניות NoNoClass שנבחרה. צבע הרקע של רכיבי ה-orgchart שנבחרו.

סוג: string
ברירת מחדל: '#d6e9f8'
size [מידה]

'small' , 'medium' או 'large'

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

אירוע בחירה רגיל

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

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

נכסים:
ללא

מדיניות נתונים

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