תרשים יומן

  1. סקירה כללית
  2. דוגמה פשוטה
  3. ימים
  4. שבועות
  5. חודשים
  6. שנים
  7. בטעינה
  8. פורמט נתונים
  9. אפשרויות הגדרה
  10. שיטות
  11. אירועים
  12. המדיניות בנושא נתונים

סקירה כללית

הערה: JavaScript סופר חודשים החל מ-אפס: בינואר חל ה-0, בפברואר הוא 1 ובדצמבר הוא 11 בדצמבר. אם נראה לכם שתרשים היומן מתחלף בחודש מסוים, זו הסיבה.

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

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

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

דוגמה פשוטה

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

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

כדי ליצור תרשים יומן, טוענים את החבילה calendar ואז יוצרים שתי עמודות, אחת לתאריכים ואחת לערכים. (עמודה שלישית אופציונלית של סגנון מותאם אישית תהיה זמינה גם בגרסה עתידית של Google Charts).

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

<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 Charts.

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

הקוד של היומן הזה דומה לקוד של היומן הראשון, אבל השורות שלו נראות כך:

          [ 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

באמצעות האפשרות 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: object (סוג אובייקט)
ברירת המחדל: { stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 }
calendar.cellSize

גודל הריבועים של ימים קלנדריים:

var options = { calendar: { cellSize: 10 } };
סוג: integer
ברירת מחדל: 16
calendar.dayOfWeekLabel

המדיניות קובעת את סגנון הגופן של תוויות השבוע בחלק העליון של התרשים:

var options = {
  calendar: {
    dayOfWeekLabel: {
      fontName: 'Times-Roman',
      fontSize: 12,
      color: 'black',
      bold: false,
      italic: false
    }
  }
};
Type: object (סוג אובייקט)
ברירת המחדל: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.dayOfWeekRightSpace

המרחק בין הקצה הימני של תוויות השבוע לבין הקצה השמאלי של ריבועי הימים בתרשים.

סוג: integer
ברירת מחדל: 4
calendar.daysOfWeek

תוויות בני אות אחת לשימוש בימים ראשון עד שבת.

סוג: מחרוזת
ברירת המחדל: 'SMTWTFS'
calendar.focusedCellColor

כשהמשתמשים מתמקדים בריבוע של יום (למשל, מעבירים את העכבר מעל אותו ריבוע), בתרשימים ביומן יודגשו הריבוע. 

var options = {
  calendar:
    focusedCellColor: {
      stroke: 'red',
      strokeOpacity: 0.8,
      strokeWidth: 3
    }
  }
};
Type: object (סוג אובייקט)
ברירת המחדל: { stroke: '#000', strokeOpacity: 1, strokeWidth: 2 }
calendar.monthLabel

סגנון לתוויות החודשים, למשל:

      var options = {
        calendar: {
          monthLabel: {
            fontName: 'Times-Roman',
            fontSize: 16,
            color: 'green',
            bold: true,
            italic: false
          }
        }
      };
Type: object (סוג אובייקט)
ברירת המחדל: { 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: object (סוג אובייקט)
ברירת המחדל: { stroke: '#000', strokeOpacity: 1, strokeWidth: 1 }
calendar.underMonthSpace

מספר הפיקסלים בין החלק התחתון של תוויות החודש לבין החלק העליון של הריבועים של היום: 

var options = { calendar: { underMonthSpace: 12 } };
סוג: integer
ברירת מחדל: 6
calendar.underYearSpace

מספר הפיקסלים בין התווית של השנה התחתונה לבין החלק התחתון של התרשים:

var options = { calendar: { underYearSpace: 2 } };
סוג: integer
ברירת מחדל: 0
calendar.unusedMonthOutlineColor

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

var options = {
  calendar: {
    unusedMonthOutlineColor: {
      stroke: 'yellow',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
(ראו גם את calendar.monthOutlineColor).
Type: object (סוג אובייקט)
ברירת המחדל: { stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
colorAxis

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

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
Type: object (סוג אובייקט)
ברירת מחדל: null
colorAxis.colors

צבעים להקצאה לערכים בתצוגה החזותית. מערך מחרוזות, כאשר כל רכיב הוא מחרוזת של צבע HTML, לדוגמה: colorAxis: {colors:['red','#004411']}. חייבים להיות לפחות שני ערכים. ההדרגתיות תכלול את כל הערכים ואת ערכי הביניים המחושבים, כשהצבע הראשון יהיה הערך הקטן ביותר והצבע האחרון יהיה הגבוה ביותר.

סוג: מערך של מחרוזות צבעים
ברירת מחדל: null
colorAxis.maxValue

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

סוג: מספר
ברירת מחדל: הערך המקסימלי של עמודה של צבע בנתוני התרשים
colorAxis.minValue

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

סוג: מספר
ברירת מחדל: ערך מינימלי של עמודת צבע בנתוני התרשים
colorAxis.values

אם השדה הזה קיים, המדיניות קובעת איך הערכים ישויכו לצבעים. כל ערך משויך לצבע התואם במערך colorAxis.colors. הערכים האלה חלים על נתוני הצבעים של התרשים. שצביעה מתבצעת לפי שיפוע של הערכים שצוינו כאן. אם לא מציינים ערך לאפשרות הזו, זה מקביל לציון הערך של [minValue, maxValue].

סוג: מערך של מספרים
ברירת מחדל: null
forceIFrame

משרטטים את התרשים בתוך מסגרת בתוך מסגרת. (שימו לב שב-IE8 המערכת מתעלמת מהאפשרות הזו. כל התרשימים של IE8 משורטטים במסגרות i-frames).

סוג: בוליאני
ברירת מחדל: false
גובה

גובה התרשים, בפיקסלים.

סוג: מספר
ברירת מחדל: גובה הרכיב שמכיל
noDataPattern

בתרשימים ביומן נעשה שימוש בתבנית אלכסון של פסים כדי לציין שאין נתונים עבור יום מסוים. אפשר להשתמש באפשרויות noDataPattern.backgroundColor ו-noDataPattern.color כדי לשנות את ברירות המחדל של גווני אפור, למשל: 

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
Type: object (סוג אובייקט)
ברירת מחדל: null
tooltip.isHtml

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

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

סוג: בוליאני
ברירת מחדל: True
רוחב

רוחב התרשים, בפיקסלים.

סוג: מספר
ברירת מחדל: רוחב הרכיב שמכיל

שיטות

שיטה
draw(data, options)

מצייר את התרשים. בתרשים יתקבלו קריאות נוספות ל-method, רק אחרי שהאירוע ready מופעל. Extended description.

סוג החזרה: ללא
getBoundingBox(id)

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

var cli = chart.getChartLayoutInterface();

גובה השטח של התרשים
cli.getBoundingBox('chartarea').height
הרוחב של העמודה השלישית בסדרה הראשונה של תרשים עמודות או תרשים עמודות אנכי
cli.getBoundingBox('bar#0#2').width
תיבה תוחמת של מתקן התלייה החמישי בתרשים עוגה
cli.getBoundingBox('slice#4')
תיבת קישור של נתוני התרשים של תרשים אנכי (למשל, עמודה):
cli.getBoundingBox('vAxis#0#gridline')
תיבת קישור של נתוני התרשים של תרשים אופקי (למשל, עמודות):
cli.getBoundingBox('hAxis#0#gridline')

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

Return Type (סוג החזרה): אובייקט
getSelection()

מחזירה מערך של ישויות התרשים שנבחרו. ישויות שניתן לבחור הן עמודות, רשומות מקרא וקטגוריות. עמודה תואמת לתא בטבלת הנתונים, רשומת מקרא לעמודה (אינדקס השורות הוא null) וקטגוריה לשורה (אינדקס העמודה הוא null). עבור התרשים הזה, ניתן לבחור רק ישות אחת בכל רגע נתון. Extended description .

סוג החזרה: מערך של רכיבי בחירה
setSelection()

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

סוג החזרה: ללא
clearChart()

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

סוג החזרה: ללא

אירועים

שם
error

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

מאפיינים: מזהה, הודעה
onmouseover

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

נכסים: שורה, תאריך
onmouseout

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

שורה נכסים, תאריך
ready

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

מאפיינים:ללא
select

מופעל כשהמשתמש לוחץ על ישות חזותית. כדי לבדוק אילו קבוצות נבחרו, אפשר להתקשר למספר getSelection().

מאפיינים:ללא

המדיניות בנושא נתונים

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