Tarihler ve Saatler

  1. Genel Bakış
  2. Tarih Oluşturucu'yu Kullanan Tarihler ve Saatler
  3. Tarihler, Saatler ve Saat Dilimleri
  4. Tarih Dizesini Temsil Etmeyi Kullanan Tarihler ve Saatler
  5. Saat dilimiyle çalışma
  6. Eksen, Enlem ve Çizgi Etiketleri Biçimlendirme
  7. JavaScript Tarihleri Hakkında Daha Fazla Bilgi

Genel bakış

date ve datetime DataTable sütunu veri türleri yerleşik JavaScript Date sınıfını kullanır.

Önemli: JavaScript Date nesnelerinde aylar sıfırdan başlayarak dizine eklenir ve on ay boyunca artarken Ocak 0, Aralık 11'dir.

Tarihi Oluşturucu'yu Kullanan Tarihler ve Saatler

Tarih Oluşturucu'yu Kullanan Tarihler

Yeni bir Tarih nesnesi oluşturmak için tarihin bileşenlerini belirtmek üzere bağımsız değişkenlerle birlikte new anahtar kelimesini kullanarak Date() oluşturucuyu çağırırsınız. Bu bağımsız değişkenler tarihinizin farklı özelliklerine karşılık gelen birden fazla sayı biçimindedir. 

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

Tarih oluşturucuyu date veri türüyle kullanırken yalnızca Yıl, Ay ve Gün'ü belirtmeniz gerekir.

Tarih oluşturucu şu biçimde de olabilir: new Date(Milliseconds); milisaniye cinsinden, 1 Ocak 1970 00:00:00 UTC ile istenen tarihin milisaniye cinsinden mesafesi. Bu tarihten önceki tarihler ve saatler için negatif bir Milisaniyesi değeri verilir.

Tarih oluşturucuyu kullanmak, DataTable'ınızı addColumn(), addRow() ve addRows() yöntemlerinin yanı sıra arrayToDataTable() yöntemini kullanarak manuel olarak oluştururken de faydalıdır. Bununla birlikte, verileri belirtmek için JSON kullanıyorsanız dize temsilinin kullanılması gerekir.

JavaScript Tarihi oluşturucu, bağımsız değişken olarak tarihin dize gösterimini de kabul edebilir. Bu dize birkaç farklı biçimde olabilir. En güvenilir formlar, RFC 2822 spesifikasyonuna veya ISO 8601 spesifikasyonuna uygundur. Bu reklam biçimleri şu biçimlerdedir:

  • RFC 2822 - 'MMM DD, YYYY' veya 'DD MMM, YYYY' (Örnek: new Date('Jan 1, 2015') veya new Date('1 Jan, 2015'))
  • ISO 8601 - 'YYYY-MM-DD' (Örnek: new Date('2015-01-01'))

Uyarı: Tarih oluşturucudaki dize gösterimi, farklı tarayıcılar ve farklı tarayıcı sürümleri ile farklı şekilde ayrıştırılabilir. Bu nedenle, aynı dize için farklı tarihler döndürür. Dolayısıyla, dizeleri Tarih oluşturucuya iletmeniz önerilmez. Bunun yerine, yalnızca Tarih oluşturucunun bağımsız değişkenleri için sayıların kullanılması önerilir.

Aşağıdaki zaman çizelgesi, 2000 yılından beri her NFL sezonunun Super Bowl şampiyonunu göstermektedir.


Bu zaman çizelgesini oluşturmak için gereken kodu aşağıda bulabilirsiniz. Daha önce belirtildiği gibi 0 tabanlı ayları kullanarak new Date() oluşturucularını ve her tarih için verilen sayıları kullanın. 

    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);
    }

Tarih Oluşturucu'yu Kullanarak Tarih Saatleri

DataTable datetime sütununun veri türü, date veri türüyle aynı Tarih oluşturucuyu kullanır ancak artık zamanı doldurmak için tüm bağımsız değişkenleri kullanır.

Alternatif olarak, datetime öğesinin bir dize gösterimi Tarih oluşturucuya aktarılabilir. datetime dizesinin temsili, 4 haneli saat dilimi farkına ek olarak saat, dakika ve saniyenin eklenmesinden oluşur (ör. Pasifik Standart Saati (PST) -0800). RFC 2822 spesifikasyonu için, saat ve saat dilimi tarih ve saat ile saat ve saat dilimi arasındaki boşluklarla eklenir. ISO 8601 spesifikasyonunda, boşluk değildir. Bunun yerine, tarihin ardından bir zaman bileşeni belirtmek için büyük harf "T" kullanılır. Ayrıca saat ile saat dilimi farkı arasında boşluk olmamalıdır. 6 Aralık 2014 saat 10:30 (PST) için tam datetime tarih dizesi şöyle olacaktır:

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

Uyarı: Dize gösterimi farklı tarayıcılar/sürümler tarafından farklı şekilde ayrıştırılabilir. Özellikle saat ve saat dilimleri söz konusu olduğunda, tarih ve saatin UTC (GMT) saat dilimiyle mi yoksa yerel saatle mi döndürüldüğünü ve saatin mi döndürüldüğünü gösteren farklılıklar vardır. Tarih bilgisi dizelerinin kullanılmasının önerilmez olmasının başka bir nedeni de budur.

Aşağıdaki zaman çizelgesi, tarih ve saat veri türünü kullanarak ortalama bir günün dökümünü verir. 

    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);
    }

Tarihler, Saatler ve Saat Dilimleri

date veya datetime için Tarih oluşturucuyu kullanmak, kullanıcının tarayıcısı tarafından ayarlanan saat diliminde istenen tarihi veya tarih dilimini döndürür. Date nesnenizi belirli bir saat dilimine ayarlamak için birkaç yöntem vardır. Google Listeleri, ilk olarak timeZone belirtebileceğiniz bir Tarih Biçimlendirici sunar. Bu, DataTable'ınızdaki her date ve datetime değeri için biçimlendirilmiş bir değer sağlar. Bağımsız değişken olarak new Date() oluşturucuya bir dize de aktarabilir veya bağımsız değişkenlerinizi Date.UTC() yönteminde sarmalayabilirsiniz. Örneğin: 

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

Bu işlem, UTC (GMT) saat diliminde belirtilen tarih ve saate bir Tarih nesnesi ayarlar. Buradan saat dilimi için istediğiniz ofseti hesaplayabilir ve tarihlerinizi ve saatlerinizi istediğiniz gibi ayarlayabilirsiniz.

Tarih Dizesini Temsil Etmeyi Kullanan Tarihler ve Saatler

DataTable'ınızı derlemek için JavaScript DataTable nesnesi değişmez gösterimini kullanarak verileri serileştirirken new Date() oluşturucu kullanılamaz. Bunun yerine Google Grafikleri, DataTable oluştururken date veya datetime öğelerinizin serileştirilip düzgün şekilde ayrıştırılmasını sağlayan bir Tarih dizesi temsili sağlar. Bu Tarih dizesi biçimi, new anahtar kelimesini bırakıp kalan ifadeyi tırnak içine alır: 

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

Önemli: Bu Tarih Dizesi Temsili kullanılırken, new Date() oluşturucuyu kullanırken aylar sıfırdan başlar (Ocak 0, Aralık 11'dir).

Aşağıda, daha öncekiyle aynı Super Bowl zaman çizelgesi verilmiştir ancak artık JavaScript nesne değişmez gösterimi ve Tarih dizesi biçimi kullanılmaktadır. 

    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);
    }

Sütun biçiminin belirtildiği ilk dizide, gerekli sütunun type: 'date' veya type: 'datetime' olduğunu belirtmeniz şartıyla bu biçim de arrayToDataTable() yönteminde kullanılabilir. 

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)"]
]);

Günün Saatiyle Çalışma

DataTable timeofday sütununun veri türü, sırasıyla saat, dakika, saniye ve isteğe bağlı olarak milisaniye cinsinden 3 veya 4 basamaklı bir dizi alır. timeofday kullanımı date ve datetime kullanımından farklıdır. Değer değerleri ise tarihe özel değildir ancak date ve datetime her zaman tarih belirtir.

Örneğin, 08:30 değeri şu şekildedir: [8, 30, 0, 0] ve 4. değer isteğe bağlıdır ([8, 30, 0] aynı saat değerini verir). 

    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));
    }

Eksen, Enlem ve Çizgi Etiketleri Biçimlendirme

Tarihler, tarih ve saat gibi çalışırken eksen etiketlerini, kılavuz çizgi etiketlerini veya onay etiketlerini belirli bir şekilde biçimlendirmek isteyebilirsiniz. Bunu birkaç şekilde sağlayabilirsiniz.

Önce hAxis.format veya vAxis.format seçeneğini kullanabilirsiniz. Bu seçenek, gridlines.count seçeneği kullanılmadığında, grafik varsayılan olarak 5 sayıldığında ve -1 dışında bir sayıya ayarlandığında geçerli olur. Bu, tarih/tarih/saatinizin farklı bölümleri için yer tutucu harfler kullandığınız bir biçim dizesi belirtmenize olanak tanır. Yer tutucular ve bunların işleyiş şekli hakkında daha fazla bilgi için tarih biçimlendirici referansını, özellikle de pattern bölümünü inceleyin. 

      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);
        };
      }

Ayrıca, her iki eksen için de gridlines ve minorGridlines altında bir units seçeneği ekleyerek belirli tarih ve saat değerleri birimleri için biçimlendirme kuralları sağlayabilirsiniz. Bu seçenek yalnızca gridlines.count seçeneği -1 olarak ayarlanırsa kullanılır.

gridlines.units seçeneği, hesaplanan ızgara satırı için tarihin/tarihin/saatin farklı yönlerine ilişkin biçimi belirttiğiniz bir nesnedir. Grafiğiniz, kılavuz çizgisi etiketine uygun olan ilk biçime göre kılavuz çizgilerini hesaplar. Biçimleri yıl, ay, gün, saat, dakika, saniye ve milisaniye şeklinde ayarlayabilirsiniz.

Biçim seçeneği, bir dizi dize biçimini kabul eder ve bir biçim etiket alanına sığıncaya kadar bunları sırayla kullanır. Bu nedenle, biçimlerin en uzundan en kısaya doğru sıralanması önerilir. Dize biçimleri, daha önce bahsedilen tarih biçimlendirici referansıyla aynı kalıpları kullanır.


Yukarıdaki grafikte, görünüm penceresini değiştirirken hours biriminin biçiminin saatlerden küçük ana hatlara geçtiğini ve seçeneklerdeki biçimin bunlarla değiştiğini göz önünde bulundurun. Ayrıca, birinci Biçimler her örnekte alana sığmadığından ikincil ızgara satırlarının daha kısa olan ikinci biçimleri kullandığını unutmayın. 

        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 Tarihleri Hakkında Daha Fazla Bilgi

JavaScript Date() nesnesi hakkında daha fazla bilgi edinmek istiyorsanız Mozilla Geliştirici Ağı harika bir kaynaktır. Buradan JavaScript Date nesneleri hakkında her şeyi öğrenebilirsiniz.