סקירה כללית
הערה: JavaScript סופר חודשים שמתחילים באפס: ינואר הוא 0, פברואר הוא 1, ו-11 בדצמבר. אם תרשים היומן נראה כבוי לפי חודש, זו הסיבה לכך.
תרשים יומן הוא תצוגה חזותית שמראה את הפעילות לאורך פרק זמן ארוך, כמו חודשים או שנים. מומלץ להשתמש בתוספים האלה אם רוצים להסביר איך הכמות משתנה בהתאם ליום בשבוע או למגמת השינוי לאורך זמן.
יכול להיות שנבצע שינויים משמעותיים בתרשים היומן בגרסאות הבאות של Google Insights.
העיבוד של תרשימי יומן בדפדפן מתבצע באמצעות SVG או VML, המתאים לדפדפן של המשתמש. כמו בתרשימים ב-Google, התרשימים ביומן מציגים הסברים קצרים כשהמשתמש מעביר את העכבר מעל הנתונים. והקרדיט שבו מגיע הקרדיט: התרשים של היומן נוצר בהשראת הדמיית היומן ב-D3.
דוגמה פשוטה
נניח שאנחנו רוצים להראות איך משתנה הנוכחות של קבוצת ספורט במהלך העונה. באמצעות תרשים יומן, אפשר להשתמש בבהירות כדי לציין את הערכים ולאפשר לאנשים לראות מגמות במבט מהיר:
אתם יכולים להעביר את העכבר מעל הימים הספציפיים כדי לראות את ערכי הנתונים הבסיסיים.
כדי ליצור תרשים יומן, צריך לטעון את החבילה calendar
ואז ליצור שתי עמודות – אחת לערכים ואחת לערכים. (עמודה שלישית אופציונלית לסגנון מותאם אישית תהיה זמינה בגרסה עתידית של Google התרשימים).
לאחר מכן ממלאים את הזוגות לפי ערכי התאריך, כפי שמוצג בהמשך.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["calendar"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'date', id: 'Date' }); dataTable.addColumn({ type: 'number', id: 'Won/Loss' }); dataTable.addRows([ [ new Date(2012, 3, 13), 37032 ], [ new Date(2012, 3, 14), 38024 ], [ new Date(2012, 3, 15), 38024 ], [ new Date(2012, 3, 16), 38108 ], [ new Date(2012, 3, 17), 38229 ], // Many rows omitted for brevity. [ new Date(2013, 9, 4), 38177 ], [ new Date(2013, 9, 5), 38705 ], [ new Date(2013, 9, 12), 38210 ], [ new Date(2013, 9, 13), 38029 ], [ new Date(2013, 9, 19), 38823 ], [ new Date(2013, 9, 23), 38345 ], [ new Date(2013, 9, 24), 38436 ], [ new Date(2013, 9, 30), 38447 ] ]); var chart = new google.visualization.Calendar(document.getElementById('calendar_basic')); var options = { title: "Red Sox Attendance", height: 350, }; chart.draw(dataTable, options); } </script> </head> <body> <div id="calendar_basic" style="width: 1000px; height: 350px;"></div> </body> </html>
ימים
כל ריבוע בתרשים היומן מייצג יום. בשלב זה אי אפשר להתאים אישית את הצבע של תאי הנתונים, אבל הוא ישתנה בגרסה הבאה של Google Insights.
אם כל הערכים חיוביים, הצבעים יהיו לבנים עד כחולים, והבלוז העמוק ביותר מציין את הערכים הגבוהים ביותר. אם יש ערכים שליליים של נתונים, הם יופיעו בכתום כפי שמוצג בהמשך.
הקוד של היומן הזה דומה לקוד הראשון, אבל השורות נראות כך:
[ new Date(2013, 9, 4), 10 ], [ new Date(2013, 9, 5), 3 ], [ new Date(2013, 9, 7), -1 ], [ new Date(2013, 9, 8), 2 ], [ new Date(2013, 9, 12), -1 ], [ new Date(2013, 9, 13), 1 ], [ new Date(2013, 9, 15), 1 ], [ new Date(2013, 9, 16), -4 ],
אתם יכולים לשנות את גודל הימים ("תא") באמצעות האפשרות calendar.cellSize
:
במקרה כזה, שינינו את הערך calendar.cellSize
ל-10 וכתוצאה מכך צמצמנו את הימים ולכן את התרשים
באופן כולל.
var options = { title: 'Red Sox Attendance', calendar: { cellSize: 10 }, };
אפשר לבחור ימים ללא ערכי נתונים באמצעות האפשרות noDataPattern
:
כאן נגדיר את color
לכחול בהיר ואת backgroundColor
לגוון כהה יותר:
var options = { title: "Red Sox Attendance", height: 350, noDataPattern: { backgroundColor: '#76a7fa', color: '#a0c3ff' } };
אפשר לשלוט בצבע גבול התא, ברוחב הגבול ובאטימות באמצעות
calendar.cellColor
:
הקפידו לבחור צבע קווים שיהיה נבדל מ-monthOutlineColor
או בשקיפות נמוכה. אלו האפשרויות שמוצגות בתרשים שלמעלה:
var options = { title: 'Red Sox Attendance', height: 350, calendar: { cellColor: { stroke: '#76a7fa', strokeOpacity: 0.5, strokeWidth: 1, } } };
אם מתמקדים ביום בתרשים שלמעלה, הגבול יודגש באדום. אפשר לשלוט בהתנהגות הזו בעזרת האפשרויות של calendar.focusedCellColor
:
var options = { title: 'Red Sox Attendance', height: 350, calendar: { focusedCellColor: { stroke: '#d3362d', strokeOpacity: 1, strokeWidth: 1, } } };
שבועות
כברירת מחדל, הימים בשבוע מתויגים באותיות הראשונות מראשון עד שבת.
אי אפשר לשנות את סדר הימים, אבל אפשר לשנות את האותיות שבהן ייעשה שימוש באפשרות calendar.daysOfWeek
. בנוסף, ניתן לשלוט במרווח בין הימים בשבוע
לתרשים באמצעות calendar.dayOfWeekRightSpace
, וניתן להתאים אישית
את סגנון הטקסט באמצעות calendar.dayOfWeekLabel
:
כאן אנחנו משנים את הגופן של תוויות השבוע, מוסיפים מרווח פנימי של 10 פיקסלים בין התוויות לנתוני התרשים ומתחילים שבועות ביום שני.
var options = { title: 'Red Sox Attendance', height: 350, calendar: { dayOfWeekLabel: { fontName: 'Times-Roman', fontSize: 12, color: '#1a8763', bold: true, italic: true, }, dayOfWeekRightSpace: 10, daysOfWeek: 'DLMMJVS', } };
חודשים
כברירת מחדל, חודשים מזוהים על ידי קווים אפורים כהים. אפשר להשתמש באפשרות calendar.monthOutlineColor
כדי לשלוט בגבולות, ב-calendar.monthLabel
כדי להתאים אישית את גופן התווית וב-calendar.underMonthSpace
כדי לשנות את המרווח הפנימי של התוויות:
הגדרנו את גופן התווית לכתב נטוי מודגש בגופן אדום מודגש ב-12 נקודות, הגדרנו את קווי המתאר לאותו צבע והצבנו למרווח פנימי של 16 פיקסלים. קווי מתאר של חודשים שאינם בשימוש מוגדרים לצבע בהיר יותר בגוון זהה.
var options = { title: 'Red Sox Attendance', height: 350, calendar: { monthLabel: { fontName: 'Times-Roman', fontSize: 12, color: '#981b48', bold: true, italic: true }, monthOutlineColor: { stroke: '#981b48', strokeOpacity: 0.8, strokeWidth: 2 }, unusedMonthOutlineColor: { stroke: '#bc5679', strokeOpacity: 0.8, strokeWidth: 1 }, underMonthSpace: 16, } };
שנים
השנים בתרשימי יומן תמיד נמצאות בקצה השמאלי של התרשים, וניתן להתאים אותן אישית באמצעות
calendar.yearLabel
ו-calendar.underYearSpace
:
הגדרנו את גופן השנה לגופן כהה מודגש בגופן 32pt טיימס-רומאי, והוספנו עשרה פיקסלים בין תוויות השנה לסוף התרשים:
var options = { title: 'Red Sox Attendance', height: 350, calendar: { underYearSpace: 10, // Bottom padding for the year labels. yearLabel: { fontName: 'Times-Roman', fontSize: 32, color: '#1A8763', bold: true, italic: true } } };
בטעינה
שם החבילה של google.charts.load
הוא "calendar"
:
google.charts.load("current", {packages: ["calendar"]});
שם הכיתה הוא google.visualization.Calendar
:
var visualization = new google.visualization.Calendar(container);
פורמט נתונים
שורות: כל שורה בטבלה מייצגת תאריך.
עמודות:
עמודה 0 | עמודה 1 | ... | עמודה N (אופציונלי) | |
---|---|---|---|---|
מטרה: | התאריכים | ערכים | ... | תפקידים אופציונליים |
סוג הנתונים: | תאריך, תאריך ושעה או שעה | number | ... | |
תפקיד: | דומיין | נתונים | ... | |
אופציונלי תפקידי עמודות: | ללא |
ללא |
... |
אפשרויות הגדרה
שם | |
---|---|
calendar.cellColor |
האפשרות var options = { calendar: { cellColor: { stroke: 'red', // Color the border of the squares. strokeOpacity: 0.5, // Make the borders half transparent. strokeWidth: 2 // ...and two pixels thick. } } }; Type: אובייקט
ברירת מחדל:
{ stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 } |
calendar.cellSize |
גודל הריבועים של היום הקלנדרי: var options = { calendar: { cellSize: 10 } }; סוג: מספר שלם
ברירת מחדל: 16
|
calendar.dayOfWeekLabel |
עיצוב סגנון הגופן של תוויות השבוע בחלק העליון של התרשים: var options = { calendar: { dayOfWeekLabel: { fontName: 'Times-Roman', fontSize: 12, color: 'black', bold: false, italic: false } } }; Type: אובייקט
ברירת מחדל:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
calendar.dayOfWeekRightSpace |
המרחק בין הקצה השמאלי של תוויות השבוע לבין הקצה השמאלי של ריבועי הימים בתרשים. סוג: מספר שלם
ברירת מחדל: 4
|
calendar.daysOfWeek |
התוויות באות היחידה לימים ראשון עד שבת. סוג: מחרוזת
ברירת מחדל:
'SMTWTFS' |
calendar.FocusCellColor |
כשהמשתמש מתמקד (למשל, בהעברת העכבר מעל ריבוע של יום) בתרשימים, היומן ידגיש את הריבוע. var options = { calendar: focusedCellColor: { stroke: 'red', strokeOpacity: 0.8, strokeWidth: 3 } } }; Type: אובייקט
ברירת מחדל:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 2 } |
calendar.monthLabel |
סגנון לתוויות החודש, למשל: var options = { calendar: { monthLabel: { fontName: 'Times-Roman', fontSize: 16, color: 'green', bold: true, italic: false } } }; Type: אובייקט
ברירת מחדל:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
calendar.monthOutlineColor |
חודשים עם ערכי נתונים יצוינו בקווים אחרים, באמצעות גבול בסגנון הזה. var options = { calendar: { monthOutlineColor: { stroke: 'blue', strokeOpacity: 0.8, strokeWidth: 2 } } };(אפשר לעיין גם ב- calendar.unusedMonthOutlineColor .)
Type: אובייקט
ברירת מחדל:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 1 } |
calendar.underMonthSpace |
מספר הפיקסלים שבין סוף תוויות החודש לראש הריבוע של היום: var options = { calendar: { underMonthSpace: 12 } }; סוג: מספר שלם
ברירת מחדל: 6
|
calendar.underYearSpace |
מספר הפיקסלים בין התווית של השנה התחתונה ביותר לתחתית התרשים: var options = { calendar: { underYearSpace: 2 } }; סוג: מספר שלם
ברירת מחדל: 0
|
calendar.unusedMonthOutlineColor |
חודשים ללא ערכי נתונים מוקפים בקווים אחרים, באמצעות גבול בסגנון הזה. var options = { calendar: { unusedMonthOutlineColor: { stroke: 'yellow', strokeOpacity: 0.8, strokeWidth: 2 } } };(אפשר לעיין גם ב- calendar.monthOutlineColor .)
Type: אובייקט
ברירת מחדל:
{ stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
|
צבע ציר |
אובייקט שמציין מיפוי בין ערכים וצבעים של עמודת צבע או סולם הדרגתי. כדי לציין מאפיינים של אובייקט זה, ניתן להשתמש בסימון מילולי של אובייקט, כפי שמוצג כאן: {minValue: 0, colors: ['#FF0000', '#00FF00']} Type: אובייקט
ברירת מחדל: null
|
צבעAxis.colors |
הצבעים שרוצים להקצות לערכים בתצוגה החזותית. מערך של מחרוזות, כאשר כל רכיב הוא מחרוזת צבע HTML. לדוגמה: סוג: מערך של מחרוזות צבע
ברירת מחדל: null
|
colorAxis.maxValue |
אם השדה הזה קיים, הוא מציין ערך מקסימלי לנתוני צבע של תרשים. הערכים של נתוני צבעים מהערך הזה
ומעלה יוצגו כצבע האחרון בטווח סוג: מספר
ברירת מחדל: הערך המקסימלי של עמודת הצבע בנתוני התרשים
|
colorAxis.minValue |
אם השדה הזה קיים, מציין ערך מינימלי לנתוני צבע של תרשים. הערכים של נתוני צבעים מהערך הזה
ונמוכים יותר יוצגו כצבע הראשון בטווח של סוג: מספר
ברירת מחדל: הערך המינימלי של עמודת הצבע בנתוני התרשים
|
צבעAxis.values |
אם השדה הזה קיים, שולט באופן שבו הערכים משויכים לצבעים. כל ערך משויך לצבע שתואם במערך Type: מערך של מספרים
ברירת מחדל: null
|
forceIFrame |
משרטט את התרשים בתוך מסגרת מוטבעת. (שימו לב שב-IE8 המערכת מתעלמת מהאפשרות הזו. כל התרשימים של IE8 מצוירים ב-i-frames). סוג: בוליאני
ברירת מחדל: False
|
גובה |
גובה התרשים, בפיקסלים. סוג: מספר
ברירת מחדל: הגובה של הרכיב שמכיל את הסרטון
|
noDataPattern |
תרשימי היומן משתמשים בדפוס אלכסון מפוספס כדי לציין שאין נתונים עבור יום מסוים. יש להשתמש באפשרויות noDataPattern: { backgroundColor: '#76a7fa', color: '#a0c3ff' } Type: אובייקט
ברירת מחדל: null
|
overview.isHtml |
יש להגדיר את הערך הערה: ההתאמה האישית של תוכן HTML בנושא הסברים קצרים באמצעות תפקיד נתוני העמודות בעמודה 'הסבר קצר' לא נתמכת על ידי הצגת הנתונים של תרשים עוגה ותרשים בועות. סוג: בוליאני
ברירת מחדל: נכון
|
רוחב |
רוחב התרשים, בפיקסלים. סוג: מספר
ברירת מחדל: הרוחב של הרכיב שמכיל
|
שיטות
שיטה | |
---|---|
draw(data, options) |
משרטט את התרשים. התרשים מקבל קריאות נוספות לשיטה רק אחרי
האירוע סוג החזרה: אין
|
getBoundingBox(id) |
מחזירה אובייקט שמכיל את החלק השמאלי, העליון, הרוחב והגובה של רכיב התרשים
הערכים יחסיים למאגר של התרשים. כדאי לקרוא לזה אחרי שהתרשים משורטט. סוג החזרה: אובייקט
|
getSelection() |
היא מחזירה מערך של ישויות התרשים שנבחרו.
ישויות שניתן לבחור הן עמודות, ערכי אגדה וקטגוריות.
עמודה תואמת לתא בטבלת הנתונים, ערך מקרא לעמודה (אינדקס השורה הוא ריק) וקטגוריה לשורה (אינדקס העמודה הוא ריק).
בתרשים הזה אפשר לבחור רק ישות אחת בכל רגע נתון.
סוג החזרה: מערך של רכיבי בחירה
|
setSelection() |
בחירת ישויות התרשים שצוינו. ביטול כל בחירה קודמת.
ישויות שניתן לבחור הן עמודות, ערכי אגדה וקטגוריות.
עמודה תואמת לתא בטבלת הנתונים, ערך מקרא לעמודה (אינדקס השורה הוא ריק) וקטגוריה לשורה (אינדקס העמודה הוא ריק).
בתרשים הזה אפשר לבחור רק ישות אחת בכל פעם.
סוג החזרה: אין
|
clearChart() |
ניקוי התרשים ושחרור כל המשאבים שהוקצו לו. סוג החזרה: אין
|
אירועים
שם | |
---|---|
error |
מופעל כשמתרחשת שגיאה במהלך הניסיון לעבד את התרשים. מאפיינים: מזהה, הודעה
|
onmouseover |
מופעל כשהמשתמש מעביר את העכבר מעל ליישות חזותית. מחזירה את אינדקס השורה ואת ערך התאריך של הישות. אם אין אלמנט טבלת נתונים עבור הישות, הערך המוחזר עבור אינדקס השורות הוא מאפיינים: שורה, תאריך
|
onmouseout |
מופעל כשהמשתמש מעביר את העכבר מעל ליישות ויזואלית. מחזירה את ערך השורה והאינדקס של השורה
של הישות. אם אין אלמנט טבלת נתונים עבור הישות, הערך המוחזר
עבור אינדקס השורה הוא שורה, תאריך של מאפיינים
|
ready |
התרשים מוכן לקריאות חיצוניות לשיטה אם רוצים ליצור אינטראקציה עם התרשים ועם
שיטות השיחה אחרי ששרטטים אותו, צריך להגדיר למאזינים אירוע זה לפני שמתקשרים אל השיטה מאפיינים: ללא
|
select |
מופעל כשהמשתמש לוחץ על ישות חזותית. כדי לראות מה נבחר, צריך להתקשר למספר מאפיינים: ללא
|
מדיניות נתונים
כל הנתונים והקוד מעובדים ומעובדים בדפדפן. לא יישלחו נתונים לאף שרת.