التواريخ والأوقات

  1. Overview
  2. التواريخ والأوقات باستخدام أداة إنشاء التاريخ
  3. التواريخ والأوقات والمناطق الزمنية
  4. التواريخ والأوقات باستخدام تمثيل سلسلة التاريخ
  5. العمل باستخدام Timeofday
  6. تصنيفات محاور التنسيق، وخطوط الشبكة، وتصنيفات التأشير
  7. مزيد من المعلومات حول التواريخ بلغة JavaScript

نظرة عامة

يستخدم نوعا بيانات عمودَي date وdatetime DataTable الفئة المُدمَجة "تاريخ JavaScript".

ملاحظة مهمة: في عناصر "تاريخ JavaScript"، تتم فهرسة الأشهر بدءًا من صفر وتصل إلى أحد عشر، ويكون كانون الثاني (يناير) هو الشهر 0 والشهر 11 كانون الأول (ديسمبر).

التواريخ والأوقات باستخدام أداة إنشاء التاريخ

التواريخ باستخدام أداة إنشاء التاريخ

لإنشاء عنصر تاريخ جديد، يمكنك استدعاء الدالة الإنشائية Date() مع الكلمة الرئيسية new، مع إضافة الوسيطات لتحديد مكوّنات التاريخ. وتكون هذه الوسيطات على شكل عدة أرقام تتوافق مع السمات المختلفة للتاريخ. 

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

عند استخدام الدالة الإنشائية للتاريخ مع نوع البيانات date، ستحتاج فقط إلى تحديد السنة والشهر واليوم.

يمكن أن تتخذ دالة إنشاء التاريخ أيضًا الشكل التالي: new Date(Milliseconds)، حيث بالمللي ثانية هي المسافة بالمللي ثانية من التاريخ المطلوب بدءًا من 1 كانون الثاني (يناير) 1970 الساعة 00:00:00 بالتوقيت العالمي المنسّق. وبالنسبة إلى التواريخ والأوقات التي تسبق ذلك التاريخ، سيتم ضبط عدد سالب من بالمللي ثانية.

يُعدّ استخدام "دالة إنشاء التاريخ" مفيدًا عند إنشاء جدول البيانات يدويًا باستخدام الطرق addColumn() وaddRow() وaddRows() بالإضافة إلى الطريقة arrayToDataTable(). ومع ذلك، إذا كنت تستخدم JSON لتحديد البيانات، يجب استخدام تمثيل السلسلة.

ويمكن أيضًا أن تقبل دالة إنشاء تاريخ 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'))

تحذير: قد يتم تحليل تمثيل السلسلة في "دالة إنشاء التاريخ" بشكل مختلف حسب المتصفحات المختلفة وإصدارات المتصفحات المختلفة، ما يؤدي إلى عرض تواريخ مختلفة للسلسلة نفسها. وبالتالي، لا يُنصح بتمرير السلاسل إلى الدالة الإنشائية للتاريخ. وبدلاً من ذلك، يُستحسن استخدام الأرقام فقط لوسيطات الدالة الإنشائية للتاريخ.

يعرض الجدول الزمني أدناه بطل سوبر بول في كل موسم من مباريات دوري كرة القدم الأمريكية (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);
    }

التواريخ والأوقات باستخدام أداة إنشاء التاريخ

يستخدم نوع بيانات العمود "DataTable" datetime "أداة إنشاء التاريخ" نفسها لنوع البيانات 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)، أو ما إذا كان يتم اقتطاعه وعرضه بالتوقيت المحلي. هذا سبب آخر لا يُنصح باستخدام سلاسل التاريخ والوقت.

يفصّل المخطط الزمني أدناه متوسط يوم، باستخدام نوع بيانات التاريخ والوقت. 

    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، سيتم عرض التاريخ أو التاريخ المطلوبَين في المنطقة الزمنية التي حدَّدها متصفّح المستخدم. يمكن ضبط عنصر "التاريخ" على منطقة زمنية محددة بعدة طرق. أولاً، توفّر "مخططات Google" أداة تنسيق التاريخ التي يمكنك من خلالها تحديد timeZone. سيؤدي ذلك إلى توفير قيمة منسَّقة لكل من قيم date وdatetime في DataTable. يمكنك أيضًا تمرير سلسلة كوسيطة إلى الدالة الإنشائية new Date()، أو يمكنك التفاف الوسيطات بطريقة Date.UTC()، مثل: 

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

سيؤدي ذلك إلى ضبط عنصر "التاريخ" على التاريخ والوقت المحدَّدين حسب المنطقة الزمنية بالتوقيت العالمي المنسّق (GMT). من هنا، يمكنك حساب معادلة فرق المنطقة الزمنية وضبط التواريخ والأوقات على النحو المطلوب.

التواريخ والأوقات باستخدام تمثيل سلسلة التاريخ

عند إنشاء تسلسل للبيانات باستخدام الترميز الحرفي لكائن DataTable في JavaScript لإنشاء جدول البيانات، لا يمكن استخدام الدالة الإنشائية new Date(). وبدلاً من ذلك، توفّر "الرسوم البيانية من Google" تمثيلاً لسلسلة "التاريخ" يتيح إنشاء سلسلة بيانات date أو datetime وتحليلها بشكل صحيح عند إنشاء جدول بيانات. يؤدي تنسيق سلسلة التاريخ هذا ببساطة إلى إزالة الكلمة الرئيسية new وتوجيه التعبير المتبقي بين علامتَي اقتباس: 

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

ملاحظة مهمة: عند استخدام "تمثيل سلسلة التاريخ" هذا، كما هو الحال عند استخدام الدالة الإنشائية new Date()، تتم فهرسة الأشهر بدءًا من الصفر (كانون الثاني (يناير) هو الشهر 0، وكانون الأول (ديسمبر) هو الشهر 11).

يمكنك الاطّلاع أدناه على المخطط الزمني نفسه لبطولة Super Bowl من قبل، ولكن نستخدم الآن الترميز الحرفي لكائن 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)"]
]);

العمل مع الوقت

يأخذ نوع بيانات عمود DataTable timeofday مصفوفة من 3 أو 4 أرقام، تمثل الساعات والدقائق والثواني والملي ثانية، على التوالي. يختلف استخدام السمة timeofday عن استخدام السمتَين date وdatetime في أنّ القيمتين لا تتعلّقان بتاريخ محدّد، في حين أنّ السمتَين date وdatetime تحدّدان التاريخ دائمًا.

على سبيل المثال، سيكون الوقت 8:30 صباحًا على النحو التالي: [8, 30, 0, 0]، وتكون القيمة الرابعة اختيارية (ستعرض [8, 30, 0] القيمة timeofday نفسها). 

    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. ويتيح لك ذلك تحديد سلسلة تنسيق، حيث تستخدم أحرف العناصر النائبة لأجزاء مختلفة من التاريخ/التاريخ/الوقت/الوقت. اطّلِع على مرجع أداة تنسيق التاريخ، لا سيما قسم 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، إذ يتم تبديل الساعات من خطوط الشبكة الثانوية إلى الرئيسية، ويتغير التنسيق في الخيارات معها. يُرجى العِلم أيضًا أنّ miniGrids تستخدم التنسيقات الثانية والأقصر، لأنّ التنسيقات الأولى لا تتناسب مع المساحة في كل مثيل. 

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