Datum und Uhrzeit

  1. Overview
  2. Datums- und Uhrzeitwerte mit dem Datumskonstruktor
  3. Datum, Uhrzeit und Zeitzonen
  4. Datums- und Uhrzeitwerte in Verwendung des Datumsstrings
  5. Mit der Tageszeit arbeiten
  6. Achsen-, Gitternetz- und Teilstrichlabels formatieren
  7. Weitere Informationen zu JavaScript-Daten

Übersicht

Die Datentypen der DataTable-Spalten date und datetime verwenden die integrierte JavaScript-Datumsklasse.

Wichtig:In JavaScript-Datumsobjekten werden Monate bei null beginnen und bis elf indexiert, wobei Januar der Monat 0 und Dezember der Monat 11 ist.

Datums- und Uhrzeitangaben mit dem Datumskonstruktor

Datumskonstruktoren verwenden

Zum Erstellen eines neuen Datumsobjekts rufen Sie den Date()-Konstruktor mit dem Schlüsselwort new auf. Dabei geben Sie die Komponenten des Datums mit Argumenten an. Diese Argumente haben die Form mehrerer Zahlen, die den verschiedenen Eigenschaften Ihres Datums entsprechen. 

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

Wenn Sie den Datumskonstruktor mit dem Datentyp date verwenden, müssen Sie nur das Jahr, den Monat und den Tag angeben.

Der Datumskonstruktor kann auch die Form new Date(Milliseconds) haben, wobei Milliseconds die Entfernung in Millisekunden des gewünschten Datums ab dem 1. Januar 1970 um 00:00:00 UTC darstellt. Für Datumsangaben und Uhrzeiten vor diesem Datum wird eine negative Anzahl von Millisekunden angegeben.

Die Verwendung des Datumskonstruktors ist nützlich, wenn Sie die DataTable manuell mit den Methoden addColumn(), addRow() und addRows() sowie mit der Methode arrayToDataTable() erstellen. Wenn Sie jedoch JSON zur Datenspezifikation verwenden, muss die Stringdarstellung verwendet werden.

Der JavaScript-Datumskonstruktor kann auch eine Stringdarstellung des Datums als Argument akzeptieren. Dieser String kann verschiedene Formen annehmen. Die zuverlässigsten Formulare entsprechen entweder der Spezifikation RFC 2822 oder der Spezifikation nach ISO 8601. Folgende Formate sind verfügbar:

  • RFC 2822 – 'MMM DD, YYYY' oder 'DD MMM, YYYY' (Beispiel: new Date('Jan 1, 2015') oder new Date('1 Jan, 2015'))
  • ISO 8601 – 'YYYY-MM-DD' (Beispiel: new Date('2015-01-01'))

Warnung:Die Stringdarstellung im Datumskonstruktor wird möglicherweise von verschiedenen Browsern und Browserversionen unterschiedlich geparst. Daher werden für denselben String unterschiedliche Daten zurückgegeben. Daher ist es nicht empfehlenswert, Strings an den Datumskonstruktor zu übergeben. Stattdessen wird empfohlen, für die Argumente des Datumskonstruktors nur Zahlen zu verwenden.

Die folgende Zeitachse zeigt die Super-Bowl-Champions jeder NFL-Saison seit dem Jahr 2000.


Unten sehen Sie den Code zum Erstellen dieser Zeitachse. Beachten Sie die Verwendung der new Date()-Konstruktoren und der für jedes Datum angegebenen Zahlen, wobei die Monate auf null basieren, wie bereits erwähnt. 

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

Datum/Uhrzeit mit dem Datumskonstruktor verwenden

Der Datentyp datetime der DataTable verwendet denselben Datumskonstruktor wie der Datentyp date, nutzt jetzt aber alle Argumente zum Ausfüllen der Uhrzeit.

Alternativ kann auch eine Stringdarstellung von datetime an den Datumskonstruktor übergeben werden. Bei einer Stringdarstellung von datetime werden zusätzlich zur vierstelligen Zeitzonenverschiebung die Stunden, Minuten und Sekunden addiert. Beispiel: Pacific Standard Time (PST) ist -0800. Bei der RFC 2822-Spezifikation werden die Uhrzeit und die Zeitzone mit Leerzeichen zwischen Datum und Uhrzeit sowie Uhrzeit und Zeitzone hinzugefügt. In der ISO 8601-Spezifikation gibt es keine Leerzeichen. Stattdessen folgt auf das Datum ein großes „T“, um eine Zeitkomponente zu kennzeichnen. Es gibt auch kein Leerzeichen zwischen Zeit- und Zeitzonenversatz. Der vollständige Datumsstring datetime für den 6. Dezember 2014 um 10:30 Uhr PST lautet:

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

Warnung:Auch hier kann die Stringdarstellung von verschiedenen Browsern und Versionen unterschiedlich geparst werden. Besonders bei der Verarbeitung von Uhrzeit und Zeitzonen gibt es Unterschiede darin, ob das Datum und die Uhrzeit mit einer UTC-Zeitzone (GMT) zurückgegeben oder verschoben und in der Ortszeit zurückgegeben werden. Dies ist ein weiterer Grund, warum die Verwendung von Strings für Datum und Uhrzeit nicht empfohlen wird.

In der folgenden Zeitachse wird ein durchschnittlicher Tag anhand des Datentyps „datetime“ aufgeschlüsselt. 

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

Datums-, Uhrzeit- und Zeitzonendaten

Wenn Sie den Datumskonstruktor für date oder datetime verwenden, wird das gewünschte Datum oder die gewünschte Uhrzeit in der vom Browser des Nutzers festgelegten Zeitzone zurückgegeben. Es gibt mehrere Möglichkeiten, für ein Datumsobjekt eine bestimmte Zeitzone festzulegen. Zunächst bietet Google Charts einen Datumsformater, in dem Sie einen timeZone angeben können. Dadurch wird für jeden Ihrer Werte für date und datetime in der DataTable ein formatierter Wert angegeben. Sie können auch einen String als Argument an den Konstruktor new Date() übergeben oder Ihre Argumente in der Methode Date.UTC() zusammenfassen: 

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

Dadurch wird ein Datumsobjekt auf das angegebene Datum und die angegebene Uhrzeit in der UTC-Zeitzone festgelegt. Hier können Sie den gewünschten Offset für die Zeitzone berechnen und Datum und Uhrzeit wie gewünscht festlegen.

Datums- und Uhrzeitangaben mit der Darstellung des Datumsstrings

Wenn Sie Daten mit der JavaScript-Notation für DataTable-Objektliterale serialisieren, um eine DataTable zu erstellen, kann der new Date()-Konstruktor nicht verwendet werden. Stattdessen bietet Google Charts eine Datumsstringdarstellung, mit der Ihre date oder datetime beim Erstellen einer DataTable ordnungsgemäß serialisiert und geparst werden kann. Bei diesem Datumsstringformat wird einfach das Keyword new gelöscht und der verbleibende Ausdruck in Anführungszeichen gesetzt: 

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

Wichtig:Wenn Sie diese Datumsstringdarstellung verwenden und den Konstruktor new Date() verwenden, beginnen die Monate bei null (Januar ist Monat 0, Dezember ist Monat 11).

Unten sehen Sie die gleiche Super Bowl-Zeitachse wie zuvor, nur dass jetzt die JavaScript-Objektliteralschreibweise und das Datumsstringformat verwendet werden. 

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

Dieses Format kann auch in der arrayToDataTable()-Methode verwendet werden, sofern im ersten Array, in dem Spaltenlabels angegeben sind, die erforderliche Spalte als type: 'date' oder type: 'datetime' deklariert wird. 

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

Mit der Tageszeit arbeiten

Für den Datentyp der DataTable-Spalte timeofday ist ein Array aus 3 oder 4 Ziffern angegeben, die Stunden, Minuten, Sekunden und optional Millisekunden darstellen. Die Verwendung von timeofday unterscheidet sich von der Verwendung von date und datetime insofern, als die Werte nicht datumsspezifisch sind, während date und datetime immer ein Datum angeben.

Die Uhrzeit 8:30 Uhr wäre beispielsweise [8, 30, 0, 0], wobei der vierte Wert optional wäre ([8, 30, 0] würde denselben Wert für die Tageszeit ausgeben). 

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

Achsen-, Gitternetz- und Teilstrichlabels formatieren

Wenn Sie mit Datum, Datum und Uhrzeit sowie mit Datum und Uhrzeit arbeiten, kann es sinnvoll sein, die Achsen- und Gitternetzlabels sowie die Label für die Markierung auf eine bestimmte Weise zu formatieren. Dazu gibt es mehrere Möglichkeiten.

Zuerst können Sie die Option hAxis.format oder vAxis.format verwenden. Diese Option wird angewendet, wenn die Option gridlines.count weggelassen wird und das Diagramm standardmäßig auf „5“ gezählt oder auf eine andere Zahl als -1 festgelegt ist. Dadurch können Sie einen Formatstring angeben, in dem Sie Platzhalterbuchstaben für verschiedene Teile von Datum/Uhrzeit/Uhrzeit verwenden. Weitere Informationen zu den Platzhaltern und ihrer Funktionsweise finden Sie in der Referenz zur Datumsformatierung, insbesondere im Abschnitt 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);
        };
      }

Sie können auch Formatierungsregeln für bestimmte Einheiten von Datums- und Uhrzeitwerten angeben, indem Sie für beide Achsen die Option units unter gridlines und minorGridlines einfügen. Diese Option wird nur verwendet, wenn die Option gridlines.count auf -1 festgelegt ist.

Die Option gridlines.units ist ein Objekt, mit dem Sie das Format für die verschiedenen Aspekte von Datum/Uhrzeit/Uhrzeit für die berechnete Gitternetzlinie angeben. In Ihrem Diagramm werden die Gitternetzlinien dann anhand des ersten Formats berechnet, das in den Bereich des Gitternetzlabels passt. Sie können das Format für Jahre, Monate, Tage, Stunden, Minuten, Sekunden und Millisekunden festlegen.

Die Formatoption akzeptiert ein Array von Stringformaten und verwendet sie der Reihe nach, bis das Format in den Labelbereich passt. Aus diesem Grund wird empfohlen, die Formate in absteigender Reihenfolge zu sortieren. Für die Stringformate werden die gleichen Muster verwendet wie in der oben erwähnten Referenz zur Datumsformatierung.


Wenn Sie im obigen Diagramm das Ansichtsfenster ändern, ändert sich das Format für die Einheit hours, da die Stunden von kleinen zu großen Gitternetzlinien wechseln und das Format in den Optionen entsprechend angepasst wird. Beachten Sie außerdem, dass für MinorGridlines die zweiten, kürzeren Formate verwendet werden, da die ersten Formate nicht in den Platz in den einzelnen Instanzen passen. 

        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']}
            }
          }
        }

Weitere Informationen zu JavaScript-Daten

Wenn Sie mehr über das JavaScript-Objekt Date() erfahren möchten, ist das Mozilla Developer Network eine hervorragende Ressource. Dort finden Sie weitere Informationen zu JavaScript-Datumsobjekten.