סקירה כללית
תרשימים ארגוניים הם דיאגרמות של היררכיה של צמתים, שמשמשים בדרך כלל להצגה של קשרים טובים או טובים בארגון. עץ משפחתי הוא סוג של תרשים ארגוני.
דוגמה
<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
מחרוזת סגנון מוטמעת להקצאה לצומת ספציפי. צריך להגדיר את האפשרות
דוגמה: |
style |
איפה הכלל מיושם? בשורת הנתונים של DataTable
מחרוזת סגנון מוטבעת לצומת מסוים. הנכס
דוגמה:
|
אפשרויות הגדרה
שם | |
---|---|
אפשר כיווץ |
קובעת אם לחיצה כפולה תכווץ צומת. סוג:
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) |
מכווץ או מרחיב את הצומת.
סוג החזרה:
none |
draw(data, options) |
משרטט את התרשים. סוג החזרה:
none |
getChildrenIndexes(row) |
מחזירה מערך עם האינדקסים של הצאצאים של הצומת הנתון. סוג החזרה
Array.<number> |
getCollapsedNodes |
מחזירה מערך עם רשימת האינדקסים של הצומת המכווץ. סוג החזרה:
Array.<number> |
getSelection() |
הטמעה רגילה של סוג החזרה: מערך של רכיבי בחירה
|
setSelection(selection) |
הטמעה רגילה של
סוג החזרה: אין
|
אירועים
שם | |
---|---|
כיווץ |
האירוע הופעל כשהמדיניות נכסים:
collapsed - ערך בוליאני שמציין אם זהו אירוע 'כיווץ' או 'הרחבה'.
row – האינדקס מבוסס-האפס של השורה בטבלת הנתונים, התואם לצומת שעליו לוחצים.
|
Onmouseover |
מופעל כשמשתמש מעביר את העכבר מעל שורה ספציפית. נכסים:
row – האינדקס מבוסס-האפס של השורה בטבלת הנתונים, התואם לצומת עם העכבר.
|
Onmouseout |
מופעל כאשר המשתמש מרחף מעל שורה. נכסים:
row – האינדקס מבוסס-האפס של השורה בטבלת הנתונים, התואם לצומת שהנתונים יועברו ממנו.
|
בחירה |
אירוע בחירה רגיל נכסים:
ללא
|
למקומות |
התרשים מוכן לקריאות חיצוניות לשיטה אם רוצים ליצור אינטראקציה עם התרשים ועם
שיטות השיחה אחרי שמשרטטים אותו, צריך להגדיר למאזינים אירוע זה לפני
שמתקשרים לשיטת נכסים:
ללא
|
מדיניות נתונים
כל הנתונים והקוד מעובדים ומעובדים בדפדפן. לא יישלחו נתונים לאף שרת.