תפקידים בעמודות

בדף הזה מתוארים הקונספט והשימוש בתפקידים בטבלאות של נתוני תרשימים.

  1. מהם תפקידים?
  2. אילו תפקידים זמינים?
  3. היררכיה של תפקידים ואסוציאציות
  4. הקצאת תפקיד

מהם תפקידים?

אובייקטים של DataTable ו-DataView של Google תומכים עכשיו בתפקידי עמודות שהוקצו באופן מפורש. תפקיד העמודה מתאר את מטרת הנתונים בעמודה הזו: לדוגמה, עמודה מסוימת יכולה להכיל נתונים שמתארים טקסט של הסברים, הערות לגבי נקודות נתונים או אינדיקטורים של אי-ודאות. רוב תפקידי העמודות חלים על עמודת 'data' שלפניה, בין שהיא מופיעה לפניה ובין לפני הקבוצה הראשונה של רצף עמודות של תפקידים. לדוגמה, 2 עמודות יכולות להופיע אחרי עמודת 'data', אחת עבור 'Description' ואחת עבור 'note'. אבל אחרי העמודה 'domain', בדרך כלל אנחנו מאפשרים גם את תפקיד העמודה 'annoteation' ו-'annotationText'.

הערה: אם רוצים לשלוט בתוכן של ההסברים הקצרים שמוצגים כשמעבירים את העכבר מעל לתרשים, אפשר לעיין בטיפים לשימוש בכלים.

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

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

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

פורמט טבלת הנתונים של תרשים הקו:

  עמודה 0 עמודה 1 ... עמודה N
מטרה
  • תוויות של קבוצות ציר X (נפרד)
  • ערכי ציר X (רציף)
 ערכים של שורה 1 ... ערכי N בשורה
סוג הנתונים
  • מחרוזת (נפרד)
  • מספר, תאריך, תאריך ושעה או
    שעה ביום (רציף)
 number ... number
תפקיד דומיין נתונים ... נתונים
תפקידים אופציונליים של
בעמודות
  • אנוטציה
  • טקסט של הערה
  • אנוטציה
  • טקסט של הערה
  • ודאות
  • הדגשה
  • interval
  • היקף
  • style
  • הסבר קצר
 ...
  • אנוטציה
  • טקסט של הערה
  • ודאות
  • הדגשה
  • interval
  • היקף
  • style
  • הסבר קצר

 

תרשים ללא תפקידים מפורשים בעמודות תרשים עם תפקידי עמודות מפורשים

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

טבלת נתונים:

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

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

  • הערות מציינות תוויות סטטיות בתרשים. כאן 'A' , 'B' , 'C' הן הערות.
  • העמודות annotationText מציינות טקסט מרחף בעת העברת העכבר מעל להערה (לא נקודת הנתונים).
  • מרווחים מציינים את הנקודות העליונות והתחתונות של סרגלי I בתרשים. יש שלושה פסים של I בתרשים.
  • ודאות יציינו אם הנתונים בנקודה זו בטוחים. נקודת הנתונים האחרונה אינה בטוחה, ולכן הקו שמוביל אליה מקווקו.

טבלת נתונים:

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

תפקיד תיאור דוגמה
הערה

טקסט להצגה בתרשים ליד נקודת הנתונים המשויכת. הטקסט מוצג ללא כל אינטראקציה מצד המשתמש. אפשר להקצות הערות וטקסט של הערות גם לנקודות נתונים וגם לקטגוריות (תוויות של צירים).

יש שני סגנונות של הערות: נקודה (ברירת מחדל), שמציירת את טקסט ההערה ליד הנקודה שצוינה, ושורה שמציירת את טקסט ההערה על קו שחוצה את אזור התרשים. ניתן לציין את סגנון הקו על ידי הגדרת אפשרות התרשים הזו: annotations: {'column_id': {style: 'line'}}

סוג הנתונים: מחרוזת

ברירת מחדל: מחרוזת ריקה

נתונים:

label: 'Year', 'Sales', null, null, 'Expenses', null, null role: domain, data, annotation, annotationText, data, annotation, annotationText '2004', 1000, null, null, 400, null, null '2005', 1170, null, null, 460, 'A', 'Develop new model' '2006', 660, 'B', 'New model launched', 1120, null, null '2007', 1030, null, null, 540, null, null

הערכים 'A' ו-'B' בתרשים זה הם הערות. מעבירים את העכבר מעל להערה כדי לראות את טקסט ההערה. הערה: כדי להציג את ערך האנוטציה, יש להעביר את העכבר מעל להערה ולא מעל הנקודה על הגרף.

ניתן להזין ערכי null בתאים של הערות וב-TextText. עם זאת, אם יש לכם ערך NoteText, צריך להקצות לו ערך הערה.
טקסט הערה

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

סוג הנתונים: מחרוזת

ברירת מחדל: מחרוזת ריקה
וודאות

מציין אם נקודת נתונים היא ספציפית או לא. האופן שבו הנתונים מוצגים תלוי בסוג התרשים. לדוגמה, אפשר לציין קווים מקווקווים או מילוי מפוספס.

בתרשימי קו ובשטח, הפלח בין שתי נקודות נתונים הוא ודאי אם ורק אם שתי נקודות הנתונים הן ודאיות.

סוג הנתונים: בוליאני, כאשר TRUE הוא בטוח, False אינו בטוח.

ברירת מחדל: נכון
הדגשה

מדגישה את הנקודות שצוינו בנתוני התרשים. מוצג כקו עבה ו/או כנקודה גדולה.

בתרשימי קו ושטח, הפלח בין שתי נקודות נתונים מודגש אם ורק אם שתי הנקודות מודגשות.

סוג נתונים: בוליאני

ברירת מחדל: 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

בתרשים הזה, הסדרה 'Sales' כוללת פלח מודגש אחד, המוגדר לפי עמודה שלישית, שורות 1 ו-2. בסדרה 'הוצאות' יש שני קטעים מודגשים, שהוגדרו לפי העמודה החמישית, השורות 2, 3 ו-4. שימו לב שכדי להדגיש, יש להדגיש את שתי הנקודות המגבילות.
מרווח

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

סוג הנתונים: מספר

ברירת מחדל: ללא מרווח

נתונים:

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 מייצג את ההיקף.

ברירת מחדל: נכון

נתונים:

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

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

שינוי הסגנון של מאפיינים מסוימים בהיבטים שונים של הנתונים. הערכים האלה הם:

  • color
  • opacity
  • stroke-width
  • stroke-color
  • stroke-opacity
  • fill-color
  • fill-opacity

Data type: string – כאן אפשר להחיל מספר סגנונות באמצעות תחביר 'firstProperty: value; secondProperty: value', או להגדיר סגנונות ספציפיים ל-bar, line, ול-point. לשם כך, מציינים את הסוג ועוטפים את מאפייני הסגנון בתוך סוגריים מסולסלים (למשל bar { //properties go here }).

ברירת מחדל: 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}'

בתרשים הזה, כל עמודה מעוצבת בסגנון שלא תלוי בעמודות האחרות עם תפקיד העמודה style. ניתן להגדיר סגנונות עבור נקודה, קו או עמודה ספציפית (יש לעיין בשורה של 'עכביש'), או באופן כללי, להחיל את הסגנונות על כל הנקודות, הקווים והעמודות, בהתאם לסוג התרשים.

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

הסבר קצר

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

הערה: המאפיין הזה לא נתמך בתצוגה החזותית של תרשים בועות. אי אפשר להתאים אישית את התוכן של תיאורי ה-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"). שני הדומיינים מופיעים בשכבת-על באותו צירים.
נתונים

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

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

סוג הנתונים: מספר

  

היררכיה של תפקידים והשתייכות

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

לדוגמה, עמודת scope תחול על העמודה הקרובה ביותר data שמימין לה, והעמודה annoteationText תחול על העמודה הקרובה ביותר annoteation משמאל לה, והערה תופיע על העמודה הקרובה ביותר 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().