תרשים שימוש ביומן

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

סקירה כללית

הערה: 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

האפשרות 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. לדוגמה: colorAxis: {colors:['red','#004411']}. חייבים להיות לפחות שני ערכים. ההדרגה תכלול את כל הערכים שלך, וכן ערכי מתווך מחושבים עם הצבע הראשון בתור הערך הקטן ביותר, והצבע האחרון שיוצג הגבוה ביותר.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

שיטות

שיטה
draw(data, options)

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

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

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

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')

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

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

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

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

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

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

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

סוג החזרה: אין

אירועים

שם
error

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

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

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

מאפיינים: שורה, תאריך
onmouseout

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

שורה, תאריך של מאפיינים
ready

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

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

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

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

מדיניות נתונים

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