תאריכים ושעות

  1. סקירה כללית
  2. תאריכים ושעות באמצעות בונה התאריכים
  3. תאריכים, שעות ואזורי זמן
  4. תאריכים ושעות שבהם נעשה שימוש בייצוג של מחרוזת התאריך
  5. עבודה עם Timeofday
  6. תוויות של צירים, קו רשת וסימונים
  7. מידע נוסף על תאריכי JavaScript

סקירה כללית

סוגי הנתונים date ו-datetime של DataTable בעמודה 'DataTable' משתמשים בסיווג התאריך המובנה של JavaScript.

חשוב: באובייקטים של תאריך ב-JavaScript, החודשים נוספים לאינדקס החל מאפס ועולים עד אחת-עשרה, כאשר ינואר הוא חודש 0 ודצמבר הוא חודש 11.

תאריכים ושעות באמצעות בונה התאריכים

תאריכים שבהם משתמשים בבונה התאריכים

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

new Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)

כשמשתמשים ב-constructor של התאריך date, צריך לציין רק את השנה, החודש והיום.

ה-constructor של התאריך יכול גם להיות בפורמט: new Date(Milliseconds), שבו אלפיות השנייה הן המרחק באלפיות השנייה של התאריך הרצוי מ-1 בינואר 1970 בשעה 00:00:00 (שעון UTC). לתאריכים ושעות לפני התאריך הזה, יופיע מספר שלילי של אלפיות שנייה.

כדאי להשתמש ב-constructor של התאריך כשבונים את ה-DataTable באופן ידני באמצעות השיטות addColumn(), addRow() ו-addRows(), וגם באמצעות השיטה arrayToDataTable(). עם זאת, אם משתמשים ב-JSON כדי לציין נתונים, צריך להשתמש בייצוג מחרוזת.

constructor של תאריך JavaScript יכול גם לקבל ייצוג מחרוזת של התאריך כארגומנט. המחרוזת הזו יכולה להופיע בכמה צורות. הטפסים המהימנים ביותר תואמים למפרט RFC 2822 או למפרט ISO 8601. הפורמטים שלהם הם:

  • RFC 2822 — 'MMM DD, YYYY' או 'DD MMM, YYYY' (לדוגמה: new Date('Jan 1, 2015') או new Date('1 Jan, 2015'))
  • ISO 8601 — 'YYYY-MM-DD' (לדוגמה: new Date('2015-01-01'))

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

בציר הזמן למטה אפשר לראות את אלופת הסופרבול בכל עונה ב-NFL מאז שנת 2000.


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

    google.charts.load('current', {'packages':['timeline']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Team');
      data.addColumn('date', 'Season Start Date');
      data.addColumn('date', 'Season End Date');

      data.addRows([
        ['Baltimore Ravens',     new Date(2000, 8, 5), new Date(2001, 1, 5)],
        ['New England Patriots', new Date(2001, 8, 5), new Date(2002, 1, 5)],
        ['Tampa Bay Buccaneers', new Date(2002, 8, 5), new Date(2003, 1, 5)],
        ['New England Patriots', new Date(2003, 8, 5), new Date(2004, 1, 5)],
        ['New England Patriots', new Date(2004, 8, 5), new Date(2005, 1, 5)],
        ['Pittsburgh Steelers',  new Date(2005, 8, 5), new Date(2006, 1, 5)],
        ['Indianapolis Colts',   new Date(2006, 8, 5), new Date(2007, 1, 5)],
        ['New York Giants',      new Date(2007, 8, 5), new Date(2008, 1, 5)],
        ['Pittsburgh Steelers',  new Date(2008, 8, 5), new Date(2009, 1, 5)],
        ['New Orleans Saints',   new Date(2009, 8, 5), new Date(2010, 1, 5)],
        ['Green Bay Packers',    new Date(2010, 8, 5), new Date(2011, 1, 5)],
        ['New York Giants',      new Date(2011, 8, 5), new Date(2012, 1, 5)],
        ['Baltimore Ravens',     new Date(2012, 8, 5), new Date(2013, 1, 5)],
        ['Seattle Seahawks',     new Date(2013, 8, 5), new Date(2014, 1, 5)],
      ]);

      var options = {
        height: 450,
        timeline: {
          groupByRowLabel: true
        }
      };

      var chart = new google.visualization.Timeline(document.getElementById('chart_div'));

      chart.draw(data, options);
    }

תאריכים באמצעות הכלי להגדרת תאריכים

סוג הנתונים בעמודה datetime של DataTable משתמש באותו constructor של תאריך כמו סוג הנתונים date, אבל עכשיו נעשה שימוש בכל הארגומנטים כדי למלא את השעה.

לחלופין, אפשר להעביר גם ייצוג של datetime למחרוזת התאריך. ייצוג במחרוזת של datetime כולל את הוספת השעות, הדקות והשניות, בנוסף להיסט בן 4 ספרות של אזור הזמן (למשל, שעון החוף המערבי של ארה"ב (PST) הוא -0800). במפרט RFC 2822, השעה ואזור הזמן מתווספים עם רווחים בין התאריך והשעה, לבין השעה ואזור הזמן. במפרט ISO 8601 אין רווחים. במקום זאת, אחרי התאריך מופיעה האות T באותיות רישיות לציון רכיב זמן. בנוסף, אין רווח בין השעה לבין ההיסט של אזור הזמן. מחרוזת התאריך המלאה של datetime ל-6 בדצמבר 2014 בשעה 10:30 לפי שעון החוף המערבי של ארה"ב תהיה:

  • RFC 2822 — Dec 6, 2014 10:30:00 -0800.
  • ISO 8601 – 2014-12-06T10:30:00-0800.

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

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

    google.charts.load('current', {'packages':['timeline']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Activity', 'Start Time', 'End Time'],
        ['Sleep',
         new Date(2014, 10, 15, 0, 30),
         new Date(2014, 10, 15, 6, 30)],
        ['Eat Breakfast',
         new Date(2014, 10, 15, 6, 45),
         new Date(2014, 10, 15, 7)],
        ['Get Ready',
         new Date(2014, 10, 15, 7, 4),
         new Date(2014, 10, 15, 7, 30)],
        ['Commute To Work',
         new Date(2014, 10, 15, 7, 30),
         new Date(2014, 10, 15, 8, 30)],
        ['Work',
         new Date(2014, 10, 15, 8, 30),
         new Date(2014, 10, 15, 17)],
        ['Commute Home',
         new Date(2014, 10,  15, 17),
         new Date(2014, 10,  15, 18)],
        ['Gym',
         new Date(2014, 10, 15, 18),
         new Date(2014, 10,  15, 18, 45)],
        ['Eat Dinner',
         new Date(2014, 10,  15, 19),
         new Date(2014, 10,  15, 20)],
        ['Get Ready For Bed',
         new Date(2014, 10,  15, 21),
         new Date(2014, 10,  15, 22)]
      ]);

      var options = {
        height: 450,
      };

      var chart = new google.visualization.Timeline(document.getElementById('chart_div'));

      chart.draw(data, options);
    }

תאריכים, שעות ואזורי זמן

שימוש בבונה התאריך, עבור date או עבור datetime, יחזיר את התאריך או התאריך והשעה הרצויים באזור הזמן שהוגדר על ידי הדפדפן של המשתמש. יש כמה דרכים להגדיר את האובייקט Date (תאריך) לאזור זמן ספציפי. קודם כל, Google Charts מספק פורמט תאריכים שבו אפשר לציין timeZone. מזינים ערך בפורמט לכל אחד מהערכים date ו-datetime ב-DataTable. אפשר גם להעביר ב-string את הארגומנט ל-constructor של new Date(). לחלופין, אפשר לתחום את הארגומנטים בשיטה Date.UTC(), למשל: 

new Date(Date.UTC(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds))

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

תאריכים ושעות שמשתמשים בייצוג מחרוזת התאריך

כשעושים סריאליזציה של נתונים באמצעות הסימון המילולי של אובייקט DataTable ב-JavaScript כדי לבנות את ה-DataTable, אי אפשר להשתמש ב-constructor של new Date(). במקום זאת, Google Charts מספק ייצוג של מחרוזת תאריך שמאפשר לסדר את ה-date או datetime ולנתח אותם כראוי כשיוצרים DataTable. פורמט מחרוזת התאריך הזה פשוט מסיר את מילת המפתח new ועוטף את הביטוי הנותר במירכאות: 

"Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)"

חשוב: כשמשתמשים בייצוג הזה של מחרוזת התאריך, למשל כשמשתמשים ב-constructor new Date(), החודשים נוספים לאינדקס מתחילים מאפס (ינואר הוא חודש 0, דצמבר הוא חודש 11).

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

    google.charts.load('current', {'packages':['timeline']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = new google.visualization.DataTable({

        cols: [
          {id: 'team', label: 'Team', type: 'string'},
          {id: 'start', label: 'Season Start Date', type: 'date'},
          {id: 'end', label: 'Season End Date', type: 'date'}
        ],

        rows: [
          {c: [{v: 'Baltimore Ravens'},     {v: 'Date(2000, 8, 5)'}, {v: 'Date(2001, 1, 5)'}]},
          {c: [{v: 'New England Patriots'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]},
          {c: [{v: 'Tampa Bay Buccaneers'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]},
          {c: [{v: 'New England Patriots'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]},
          {c: [{v: 'New England Patriots'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]},
          {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]},
          {c: [{v: 'Indianapolis Colts'},   {v: 'Date(2006, 8, 5)'}, {v: 'Date(2007, 1, 5)'}]},
          {c: [{v: 'New York Giants'},      {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]},
          {c: [{v: 'Pittsburgh Steelers'},  {v: 'Date(2008, 8, 5)'}, {v: 'Date(2009, 1, 5)'}]},
          {c: [{v: 'New Orleans Saints'},   {v: 'Date(2009, 8, 5)'}, {v: 'Date(2010, 1, 5)'}]},
          {c: [{v: 'Green Bay Packers'},    {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]},
          {c: [{v: 'New York Giants'},      {v: 'Date(2011, 8, 5)'}, {v: 'Date(2012, 1, 5)'}]},
          {c: [{v: 'Baltimore Ravens'},     {v: 'Date(2012, 8, 5)'}, {v: 'Date(2013, 1, 5)'}]},
          {c: [{v: 'Seattle Seahawks'},     {v: 'Date(2013, 8, 5)'}, {v: 'Date(2014, 1, 5)'}]}
        ]
      });

      var options = {
        height: 450,
        timeline: {
          groupByRowLabel: true
        }
      };

      var chart = new google.visualization.Timeline(document.getElementById('chart_div'));

      chart.draw(data, options);
    }

אפשר להשתמש בפורמט הזה גם בשיטה arrayToDataTable(), בתנאי שבמערך הראשון, שבו צוינו תוויות העמודות, מצהירים שהעמודה הנדרשת היא type: 'date' או type: 'datetime'. 

var data = google.visualization.arrayToDataTable([
  ["Team", {type: 'date', label: 'Season Start Date'}, {type: 'date', label: 'Season End Date'}],
  ["Baltimore Ravens",     "Date(2000, 8, 5)", "Date(2001, 1, 5)"],
  ["New England Patriots", "Date(2001, 8, 5)", "Date(2002, 1, 5)"],
  ["Tampa Bay Buccaneers", "Date(2002, 8, 5)", "Date(2003, 1, 5)"],
  ["New England Patriots", "Date(2003, 8, 5)", "Date(2004, 1, 5)"],
  ["New England Patriots", "Date(2004, 8, 5)", "Date(2005, 1, 5)"],
  ["Pittsburgh Steelers",  "Date(2005, 8, 5)", "Date(2006, 1, 5)"],
  ["Indianapolis Colts",   "Date(2006, 8, 5)", "Date(2007, 1, 5)"],
  ["New York Giants",      "Date(2007, 8, 5)", "Date(2008, 1, 5)"],
  ["Pittsburgh Steelers",  "Date(2008, 8, 5)", "Date(2009, 1, 5)"],
  ["New Orleans Saints",   "Date(2009, 8, 5)", "Date(2010, 1, 5)"],
  ["Green Bay Packers",    "Date(2010, 8, 5)", "Date(2011, 1, 5)"],
  ["New York Giants",      "Date(2011, 8, 5)", "Date(2012, 1, 5)"],
  ["Baltimore Ravens",     "Date(2012, 8, 5)", "Date(2013, 1, 5)"],
  ["Seattle Seahawks",     "Date(2013, 8, 5)", "Date(2014, 1, 5)"]
]);

איך לעבוד עם Timeofday

סוג הנתונים בעמודה timeofday של DataTable הוא מערך של 3 או 4 מספרים, שמייצג שעות, דקות, שניות ואלפיות שנייה (אופציונלי) בהתאמה. השימוש ב-timeofday שונה מהשימוש ב-date וב-datetime בכך שהערכים לא ספציפיים לתאריך, ואילו date ו-datetime תמיד מציינים תאריך.

לדוגמה, השעה 8:30 היא: [8, 30, 0, 0], והערך הרביעי הוא אופציונלי (הפלט של [8, 30, 0] יהיה את אותו הערך של השעה ביום). 

    google.charts.load('current', {'packages':['bar']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Emails Received');

      data.addRows([
        [[8, 30, 45], 5],
        [[9, 0, 0], 10],
        [[10, 0, 0, 0], 12],
        [[10, 45, 0, 0], 13],
        [[11, 0, 0, 0], 15],
        [[12, 15, 45, 0], 20],
        [[13, 0, 0, 0], 22],
        [[14, 30, 0, 0], 25],
        [[15, 12, 0, 0], 30],
        [[16, 45, 0], 32],
        [[16, 59, 0], 42]
      ]);

      var options = {
        title: 'Total Emails Received Throughout the Day',
        height: 450
      };

      var chart = new google.charts.Bar(document.getElementById('chart_div'));

      chart.draw(data, google.charts.Bar.convertOptions(options));
    }

עיצוב תוויות של ציר, קו רשת וסימון

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

קודם כול, צריך להשתמש באפשרות hAxis.format או vAxis.format. האפשרות הזו רלוונטית אם לא משמיטים את האפשרות gridlines.count. במקרה כזה, ברירת המחדל של התרשים תהיה ספירה של 5, וכן כאשר הוא מוגדר למספר שאינו 1-. כך אפשר לציין מחרוזת פורמט, שבה משתמשים באותיות placeholder לחלקים שונים של התאריך/השעה/השעה. לקבלת מידע נוסף על ה-placeholders ועל אופן הפעולה שלהם, אפשר לעיין בחומר העזר בנושא מעצב תאריכים, באופן ספציפי בקטע pattern. 

      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Time of Day');
        data.addColumn('number', 'Rating');

        data.addRows([
          [new Date(2015, 0, 1), 5],  [new Date(2015, 0, 2), 7],  [new Date(2015, 0, 3), 3],
          [new Date(2015, 0, 4), 1],  [new Date(2015, 0, 5), 3],  [new Date(2015, 0, 6), 4],
          [new Date(2015, 0, 7), 3],  [new Date(2015, 0, 8), 4],  [new Date(2015, 0, 9), 2],
          [new Date(2015, 0, 10), 5], [new Date(2015, 0, 11), 8], [new Date(2015, 0, 12), 6],
          [new Date(2015, 0, 13), 3], [new Date(2015, 0, 14), 3], [new Date(2015, 0, 15), 5],
          [new Date(2015, 0, 16), 7], [new Date(2015, 0, 17), 6], [new Date(2015, 0, 18), 6],
          [new Date(2015, 0, 19), 3], [new Date(2015, 0, 20), 1], [new Date(2015, 0, 21), 2],
          [new Date(2015, 0, 22), 4], [new Date(2015, 0, 23), 6], [new Date(2015, 0, 24), 5],
          [new Date(2015, 0, 25), 9], [new Date(2015, 0, 26), 4], [new Date(2015, 0, 27), 9],
          [new Date(2015, 0, 28), 8], [new Date(2015, 0, 29), 6], [new Date(2015, 0, 30), 4],
          [new Date(2015, 0, 31), 6], [new Date(2015, 1, 1), 7],  [new Date(2015, 1, 2), 9]
        ]);


        var options = {
          title: 'Rate the Day on a Scale of 1 to 10',
          width: 900,
          height: 500,
          hAxis: {
            format: 'M/d/yy',
            gridlines: {count: 15}
          },
          vAxis: {
            gridlines: {color: 'none'},
            minValue: 0
          }
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

        chart.draw(data, options);

        var button = document.getElementById('change');

        button.onclick = function () {

          // If the format option matches, change it to the new option,
          // if not, reset it to the original format.
          options.hAxis.format === 'M/d/yy' ?
          options.hAxis.format = 'MMM dd, yyyy' :
          options.hAxis.format = 'M/d/yy';

          chart.draw(data, options);
        };
      }

אפשר גם לספק כללי עיצוב ליחידות ספציפיות של ערכים של תאריך ושעה. לשם כך, מוסיפים את האפשרות units בקטע gridlines ו-minorGridlines בשני הצירים. ייעשה שימוש באפשרות הזו רק אם האפשרות gridlines.count מוגדרת לערך 1-.

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

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


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

        hAxis: {
          viewWindow: {
            min: new Date(2014, 11, 31, 18),
            max: new Date(2015, 0, 3, 1)
          },
          gridlines: {
            count: -1,
            units: {
              days: {format: ['MMM dd']},
              hours: {format: ['HH:mm', 'ha']},
            }
          },
          minorGridlines: {
            units: {
              hours: {format: ['hh:mm:ss a', 'ha']},
              minutes: {format: ['HH:mm a Z', ':mm']}
            }
          }
        }

מידע נוסף על תאריכי JavaScript

אם ברצונך לקבל מידע נוסף על אובייקט ה-JavaScript Date(), רשת המפתחים של Mozilla היא משאב מצוין. שם ניתן ללמוד הכול על אובייקטים של תאריך ב-JavaScript.