בדף הזה נסביר את המושג תפקידים בטבלאות הנתונים של תרשימים ואת השימוש בהם.
מהם תפקידים?
באובייקטים של Google DataTable ו-DataView יש עכשיו תמיכה בתפקידי עמודה שהוקצו באופן מפורש. תפקיד עמודה מתאר את מטרת הנתונים בעמודה: לדוגמה, עמודה יכולה להכיל נתונים שמתארים טקסט של הסבר קצר, הערות בנקודות על נתונים או מדדי אי-ודאות. רוב התפקידים של העמודות חלים על העמודה data שלפניה, בין אם היא נמצאת ממש לפניה ובין אם לפניה הראשונה מתוך קבוצה רציפה של עמודות תפקידים. לדוגמה, אפשר להוסיף שתי עמודות אחרי העמודה data, אחת להסבר קצר ואחת להערה. אבל אחרי העמודה domain (דומיין), בדרך כלל אנחנו מאפשרים גם להשתמש בתפקידים בעמודה annotation ו-annotationText.
הערה: בטיפים לכלים מוסבר איך לשלוט בתוכן של ההסברים הקצרים שמופיעים כשהמשתמש מעביר את העכבר מעל התרשים.
במקור, היו רק שני תפקידים זמינים לעמודה: 'דומיין' שמציין את ערכי הציר הראשי, ו-'נתונים' שמציין את גובה העמודות, את הרוחב של פרוסות העוגה וכן הלאה. התפקידים האלה הוקצו באופן מרומז, לפי הסדר והסוג של העמודות בטבלה. עם זאת, באמצעות האפשרות להקצות באופן מפורש תפקידים לעמודות, עכשיו אפשר להוסיף לתרשים עמודות אופציונליות שמספקות תכונות מעניינות חדשות, כמו תוויות שרירותיות של הערות, טקסט מרחף ועמודות אי ודאות.
אם לא מקצים באופן מפורש תפקיד לעמודה, המערכת תקבע את התפקיד שלה לפי סדר העמודה בטבלה, בהתאם למפרט פורמט הנתונים של התרשים. בדף הזה אפשר לראות אילו תפקידים זמינים לך להקצות באופן מפורש ואיך להקצות אותם.
בהמשך מוצגת השוואה בין הפעולות שאפשר לבצע בתרשים קו שכולל רק את התפקידים המוגדרים כברירת מחדל כפי שהם, בהשוואה לתפקידים נוספים שהוקצו באופן מפורש.
פורמט טבלת הנתונים של תרשים הקו:
| עמודה 0 | עמודה 1 | ... | עמודה N | |
|---|---|---|---|---|
| מטרה | ערכים של שורה 1 | ... | ערכים של שורה N | |
| סוג הנתונים | number | ... | number | |
| תפקיד | דומיין | נתונים | ... | נתונים |
| תפקידים אופציונליים של עמודות שנתמכים |
|
|
... |
|
| תרשים ללא תפקידים מפורשים בעמודות | תרשים עם תפקידים מפורשים בעמודות |
|---|---|
|
|
|
התרשים הזה לא מחיל תפקידים באופן מפורש, לכן ניתן להשתמש רק בנתונים הבסיסיים ובפריסת העמודות של הדומיין שמוצגת למעלה. DataTable: var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addRows([
['April',1000],
['May', 1170],
['June', 660],
['July', 1030]
]); |
התרשים הזה מקצה תפקידים באופן מפורש, כך שאפשר להוסיף לו עמודות אופציונליות. התרשים הזה כולל עמודות אופציונליות ל-הערות, הערות טקסט, מרווח זמן ותפקידי ודאות.
DataTable: var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({type:'number', role:'interval'}); // interval role col.
data.addColumn({type:'number', role:'interval'}); // interval role col.
data.addColumn({type:'string', role:'annotation'}); // annotation role col.
data.addColumn({type:'string', role:'annotationText'}); // annotationText col.
data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
data.addRows([
['April',1000, 900, 1100, 'A','Stolen data', true],
['May', 1170, 1000, 1200, 'B','Coffee spill', true],
['June', 660, 550, 800, 'C','Wumpus attack', true],
['July', 1030, null, null, null, null, false]
]); |
אילו תפקידים זמינים?
בטבלה הבאה מפורטים כל התפקידים ב-Google Charts. חלק מסוגי התרשימים לא תומכים בכל התפקידים. במסמכי התיעוד של כל תרשים מפורט אילו תפקידים זמינים ובאילו מקומות הם זמינים. התפקידים מוצגים באופן שונה בהתאם לסוגי התרשימים השונים.
| תפקיד | תיאור | דוגמה |
|---|---|---|
| הערה | טקסט שיוצג בתרשים ליד הנקודה על הגרף. הטקסט מוצג ללא אינטראקציה של המשתמש. אפשר להקצות הערות וטקסט של הערות גם לנקודות נתונים וגם לקטגוריות (תוויות צירים). קיימים שני סגנונות של הערות: נקודה (ברירת מחדל), לציור
של טקסט ההערה ליד הנקודה שצוינה, וקו שמשרטט את טקסט ההערה על קו שחוצה את אזור התרשים. אפשר לבחור את סגנון הקו על ידי הגדרת אפשרות התרשים הבאה: סוג הנתונים: מחרוזת ברירת המחדל: מחרוזת ריקה |
נתונים: Year' : 'Year', 'Sales', null, null, 'Expenses', null, null
role: domain, data, notes, NoteText, data, סרט, notesText
'2004', 1000, null, null, 400, null, null
'2005', 117
הסימנים 'A' ו-'B' בתרשים הזה הם הערות. כדי לראות את טקסט ההערה, מעבירים את העכבר מעל ההערה. כדי להציג את הערך של NoteText, צריך להעביר את העכבר מעל להערה ולא מעל לנקודת הנתונים שעליה היא חלה. אפשר להזין ערכי null בתאים של notes וגם ב-noteText, אבל אם יש לך ערך noteText, עליך לשייך אליו ערך הערה. |
| annotationText | טקסט מורחב שיוצג כשהמשתמש מעביר את העכבר מעל ההערה המשויכת. אפשר להקצות הערות וטקסט של הערות גם לנקודות נתונים וגם לקטגוריות (תוויות צירים). אם יש עמודת noteText, צריכה להיות גם עמודת הערות. לעומת זאת, טקסט של הסבר קצר מוצג כשהמשתמש מעביר את העכבר מעל נקודת הנתונים המשויכת בתרשים. סוג הנתונים: מחרוזת ברירת המחדל: מחרוזת ריקה |
|
| ודאות | מציין אם נקודה על הגרף היא בטוחה או לא. האופן שבו המידע מוצג תלוי בסוג התרשים - לדוגמה, קווים מקווקווים או מילוי מפוספס. בתרשימי קו ובתרשים שטח, הפלח בין שתי נקודות על הגרף הוא בטוח, אם ורק אם שתי נקודות הנתונים בטוחות. סוג הנתונים: בוליאני. אם הערך הוא True, הערך False הוא לא ודאי. ברירת מחדל: True |
|
| הדגשה | הדגשת נקודות נתונים ספציפיות בתרשים. מוצג כקו עבה ו/או נקודה גדולה. בתרשימי קו ובתרשימי שטח, הקטע שבין שתי נקודות נתונים יודגש אך ורק אם שתי נקודות הנתונים יודגשו. סוג הנתונים: בוליאני ברירת המחדל: false |
נתונים: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, emphasis, data, emphasis
'2004', 1000, true, 400, false
'2005', 1170, true, 460, true
'2006', 660, false, 1120, true
'2007', 1030, false, 540, true
בתרשים הזה, הסדרה 'מכירות' כוללת פלח מודגש אחד, שמוגדר לפי עמודה שלוש, שורה אחת ושתיים. הסדרה 'הוצאות' כוללת שני מקטעים מודגשים, שמסווגים לפי העמודה החמישית, שורות שתיים, שלוש וארבע. שימו לב איך ניתן להדגיש את שתי הנקודות הגבולות. |
| מרווח | מציין טווח נתונים פוטנציאלי לנקודה ספציפית. המרווחים מוצגים בדרך כלל כאינדיקטורים של טווח סגנון I-bar. עמודות המרווח הן עמודות מספריות. אפשר להוסיף עמודות מרווחים בזוגות כדי לסמן את הערך הנמוך והגבוה של העמודה. יש להוסיף ערכי אינטרוולים להגדיל את הערך, משמאל לימין. סוג הנתונים: מספר ברירת מחדל: ללא מרווח |
נתונים: label: 'Day', 'Stock value', null, null
role: domain, data, interval, interval
'Mon', 38, 20, 45
'Tue', 55, 31, 66
'Wed', 77, 50, 80
'Thurs', 66, 50, 77
בתרשים הזה, ערכי ההפוגות מגדירים סרגל I שמקיף את הנקודות. הערכים עולים משמאל לימין. מרווחי הזמן הגבוהים והנמוכים ביותר סביב נקודה מסמנים את החלק העליון והתחתון של הסרגל. הערה: כל הפרטים על האינטרוולים מופיעים בקטע מרווחי זמן. |
| היקף | מציין אם נקודה נמצאת בטווח או לא נכללת בה. אם נקודה מסוימת לא נכללת בטווחים, היא מודגשת מבחינה חזותית. בתרשימי קו ובתרשים שטח, הפלח בין שתי נקודות נתונים נכלל בהיקף אם נקודת הקצה אחת נכללת בהיקף כזה. סוג הנתונים: בוליאני, כאשר המשמעות של True היא בהיקף. ברירת מחדל: True |
נתונים: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, scope, data, scope
'2004', 1000, false, 400, true
'2005', 1170, false, 460, false
'2006', 660, true, 1120, false
'2007', 1030, true, 540, false
עמודת ההיקף הראשונה חלה על העמודה של נתוני המכירות שמימין לה. הקטע הראשון לא נכלל בהיקף ההרשאות כי שתי נקודות הגבולות לא כלולות בהיקף. עמודת ההיקף השנייה חלה על עמודת הנתונים 'הוצאות' שמימין לה. הקטע הראשון מסומן ברמת ההיקף כי אחת מנקודות הגבול שלו נמצאת בהיקף החשיפה. שאר הקו לא נכלל בהיקף ההרשאות כי כל שאר הנקודות מסומנות מחוץ לתחום. |
| הסגנון |
מגדיר מאפיינים מסוימים של היבטים שונים של הנתונים. הערכים האלה הם:
סוג נתונים: מחרוזת, שבו אפשר להחיל מספר סגנונות באמצעות התחביר ברירת מחדל: null |
נתונים:
label: 'Character', 'Popularity', 'Style',
role: domain, data, style,
'Hulk', 50, 'color: green',
'Captain America', 75, 'color: #0000cf;' +
'stroke-color: #cf001d',
'Wolverine', 90, 'opacity: 0.5;' +
'stroke-width: 5;' +
'stroke-color: #01a0ff;' +
'fill-color: #fff600',
'Iron Man', 60, 'color: #db9500;' +
'stroke-width: 10;' +
'stroke-color: #a30300',
'Spider Man', 100, 'bar {' +
'fill-color: #c8001d;' +
'stroke-width: 3;' +
'stroke-color: #1800c8}'
בתרשים הזה, כל אחת מהעמודות מסודרת בנפרד מהשאר באמצעות התפקיד הערה: יש פרטים נוספים במקומות אחרים שבהם מוסבר איך להתאים אישית את הסגנון של נקודות, קווים ועמודות. מופיעות גם אפשרויות לכל סוג תרשים שבו אפשר לציין סגנונות עבור סוגים אחרים של ישויות, כמו אזורים, טקסט ותיבות. |
| הסבר קצר |
טקסט שמוצג כשהמשתמש מעביר את העכבר מעל הנקודה על הגרף שמשויכת לשורה הזו. הערה: האפשרות הזו לא נתמכת בהמחשה החזותית של תרשים הבועות. אי אפשר להתאים אישית את תוכן ההסברים הקצרים ב-HTML של 'תרשים בועות'. סוג הנתונים: מחרוזת ברירת מחדל: ערך של נקודות על הגרף |
נתונים: label: 'Year', 'Sales', null, 'Expenses', null
role: domain, data, tooltip, data, tooltip
'2004', 1000, '1M$ sales, 400, '$0.4M expenses
in 2004' in 2004'
'2005', 1170, '1.17M$ sales, 460, '$0.46M expenses
in 2005' in 2005'
'2006', 660, '.66$ sales, 1120, '$1.12M expenses
in 2006' in 2006'
'2007', 1030, '1.03M$ sales, 540, '$0.54M expenses
in 2007' in 2007'
כדי להציג טקסט של הסבר קצר, מעבירים את העכבר מעל הנקודות על הגרף. הנתונים של הסבר קצר מוקצים לכל הנקודות בשתי השורות, בעמודות 3 ו-5. הערה: בטיפים לשימוש בכלים יש פרטים נוספים על התאמה אישית של הסברים קצרים. |
| דומיין | לא צריך להקצות את התפקיד הזה באופן מפורש, אלא אם מעצבים תרשים מרובה-דומיינים (מוצג כאן). הפורמט הבסיסי של טבלת הנתונים מאפשר למנוע שמפעיל תרשימים כדי להסיק אילו עמודות הן עמודות הדומיין. עם זאת, חשוב לדעת אילו עמודות הן עמודות של הדומיין, כדי שתדעו אילו עמודות אחרות יכולות לשנות אותה. בעמודות הדומיין מפורטות תוויות לאורך הציר הראשי של התרשים. לפעמים אפשר להשתמש בכמה עמודות של דומיינים כדי לתמוך בכמה סולמות באותו תרשים. סוג הנתונים: בדרך כלל מחרוזת, אבל לפעמים מספר או תאריך |
נתונים:
label: '2009, '2009, '2009, '2008, '2008 '2008
Quarter', Sales', Expenses', Quarter', Sales', Expenses'
role: domain, data, data, domain, data, data
'Q1/09', 1000, 400, 'Q1/08', 800, 300
'Q2/09', 1170, 460, 'Q2/08', 750, 400
'Q3/09', 660, 1120, 'Q3/08', 700, 540
'Q4/09', 1030, 540, 'Q4/08', 820, 620
בדוגמה הזו מוצג תרשים מרובה-דומיינים. שתי עמודות הנתונים הראשונות משנות את הדומיין הראשון ("רבעון 2009"), ושתי עמודות הנתונים האחרונות משנות את הדומיין השני ("רבעון 2008"). שני הדומיינים מופיעים כשכבת-על באותו קנה מידה של צירים. |
| נתונים | לא צריך להקצות את התפקיד הזה באופן מפורש. הפורמט הבסיסי של טבלת הנתונים מאפשר למנוע של התרשימים להסיק אילו עמודות הן עמודות הדומיין. עם זאת, חשוב לדעת אילו עמודות הן עמודות נתונים, כדי לדעת אילו עמודות אחרות יכולות לשנות אותן. עמודות של תפקיד נתונים מציינות את נתוני הסדרה שיש לעבד בתרשים. ברוב התרשימים, עמודה אחת = סדרה אחת, אבל הדבר עשוי להשתנות לפי סוג התרשים (לדוגמה, בתרשימי פיזור נדרשות שתי עמודות נתונים לסדרה הראשונה ועמודה נוספת לכל סדרה נוספת; בתרשימי פמוט נדרשים ארבע עמודות נתונים לכל סדרה). סוג הנתונים: מספר |
היררכיית תפקידים ושיוך
בתרשים הבא אפשר לראות אילו עמודות תפקידים יכולות לחול על אילו עמודות תפקידים אחרות. כל העמודות חוץ מעמודות של דומיין חלות על השכן הקרוב ביותר שעליו אפשר להחיל אותה.
לדוגמה, העמודה היקף חלה על העמודה data (נתונים) הקרובה ביותר משמאל; עמודת annotationText תחול על העמודה annotationText הקרובה ביותר משמאל, והעמודה annotation תחול על העמודה data או domain הקרובה ביותר שמימין.
הקצאת תפקיד
תפקידים מוקצים כמאפיין של העמודה באובייקט DataTable. יש כמה דרכים ליצור עמודות של תפקידים, אבל אלה הנפוצות ביותר:
שתי הטכניקות הראשונות משרטטות את התרשים הבא:
השיטה DataTable.addColumn
בדוגמה הבאה נוצר תרשים עמודות עם סמן מרווחים בשלוש העמודות. סמני המרווח מוגדרים על ידי העמודה השלישית והרביעית באמצעות המתודה DataTable.addColumn().
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain column.
data.addColumn('number', 'Sales'); // Implicit data column.
data.addColumn({type:'number', role:'interval'});
data.addColumn({type:'number', role:'interval'});
data.addColumn('number', 'Expenses');
data.addRows([
['April',1000, 900, 1100, 400],
['May', 1170, 1000, 1200, 460],
['June', 660, 550, 800, 1120],
['July', 1030, , , 540]
]);
var chart = new google.visualization.BarChart(
document.getElementById('visualization'));
chart.draw(data,
{width: 800, height: 600, title: 'Company Performance'});
סימון JavaScript ליטראלי
בליטרל JSON, צריך לציין את המאפיין p של העמודה עם הערך "role":"role-type".
הדוגמה הבאה ממחישה איך לציין תפקידים באמצעות סימון מילולי של JavaScript. אפשר לעשות את זה רק בזמן יצירת הטבלה.
{"cols":[
{"id":"","label":"Month","pattern":"","type":"string"},
{"id":"","label":"Sales","pattern":"","type":"number"},
{"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
{"id":"","label":"","pattern":"","type":"number","p":{"role":"interval"}},
{"id":"","label":"Expenses","pattern":"","type":"number"}],
"rows":[
{"c":[
{"v":"April","f":null},
{"v":1000,"f":null},
{"v":900,"f":null},
{"v":1100,"f":null},
{"v":400,"f":null}]},
{"c":[
{"v":"May","f":null},
{"v":1170,"f":null},
{"v":1000,"f":null},
{"v":1200,"f":null},
{"v":460,"f":null}]},
{"c":[{"v":"June","f":null},
{"v":660,"f":null},
{"v":550,"f":null},
{"v":800,"f":null},
{"v":1120,"f":null}]},
{"c":[
{"v":"July","f":null},
{"v":1030,"f":null},
{"v":null,"f":null},
{"v":null,"f":null},
{"v":540,"f":null}]}],
"p":null
}
השיטה DataView.setColumns
כשיוצרים תצוגה, אפשר להגדיר במפורש את התפקיד של עמודה. האפשרות הזו שימושית כשיוצרים עמודה מחושבת חדשה. מידע נוסף זמין בכתובת DataView.setColumns().