Date e ore

Panoramica

I tipi di dati della colonna date e datetime DataTable utilizzano la classe di date JavaScript integrata.

Importante: negli oggetti Data JavaScript, i mesi vengono indicizzati a partire da zero e aumentano fino a undici, mentre gennaio è il mese 0 e il mese 11 è il mese 11.

Date e ore con Data Builder

Date che utilizzano il generatore di date

Per creare un nuovo oggetto Date, chiama il costruttore Date() con la parola chiave new, con argomenti per specificare i componenti della data. Questi argomenti si presentano sotto forma di più numeri corrispondenti alle diverse proprietà della data.

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

Quando utilizzi il costruttore della data con il tipo di dati date, devi specificare solo Anno, Mese e Giorno.

Il costruttore della data può anche utilizzare il seguente formato: new Date(Milliseconds), dove Millisecondi è la distanza in millisecondi della data desiderata dal 1° gennaio 1970 alle 00:00:00 UTC. Per date e ore precedenti a questa data, verrà fornito un numero negativo di millisecondi.

L'utilizzo del costruttore Data è utile durante la creazione manuale della DataTable con i metodi addColumn(), addRow() e addRows(), nonché con il metodo arrayToDataTable(). Tuttavia, se usi JSON per specificare i dati, devi utilizzare la rappresentazione stringa.

Il costruttore della data JavaScript può anche accettare una rappresentazione stringa della data come argomento. Questa stringa può assumere diverse forme. I moduli più affidabili sono conformi alla specifica RFC 2822 o alla specifica ISO 8601. Ecco i formati disponibili:

  • RFC 2822-'MMM DD, YYYY' o 'DD MMM, YYYY' (esempio: new Date('Jan 1, 2015') o new Date('1 Jan, 2015'))
  • ISO 8601 - 'YYYY-MM-DD' (Esempio: new Date('2015-01-01'))

Avviso: la rappresentazione della stringa nel costruttore di date potrebbe essere analizzata in modo diverso da browser diversi e da versioni di browser differenti, restituendo date diverse per la stessa stringa. Pertanto, non è consigliabile passare le stringhe al costruttore della data. È invece consigliabile utilizzare solo numeri per gli argomenti del costruttore della data.

La sequenza temporale di seguito mostra il campione del Super Bowl di ogni stagione della NFL dall'anno 2000.


Di seguito è riportato il codice per la creazione di questa sequenza temporale. Nota l'uso dei costruttori new Date() e dei numeri specificati per ogni data, utilizzando i mesi in base a 0, come indicato in precedenza.

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

Datetimes utilizzando Data Builder

Il tipo di dati della colonna DataTable datetime utilizza lo stesso costruttore della data del tipo di dati date, ma ora utilizza tutti gli argomenti per compilare l'ora.

In alternativa, è possibile trasmettere una rappresentazione stringa di datetime nel costruttore della data. Una rappresentazione stringa di datetime consiste nell'aggiungere le ore, i minuti e i secondi, oltre allo sfasamento del fuso orario a 4 cifre (ad esempio, PST). -0800. Per la specifica RFC 2822, l'ora e il fuso orario vengono aggiunti con spazi tra la data e l'ora, nonché l'ora e il fuso orario. Nella specifica ISO 8601 non sono presenti spazi, ma la data è seguita da una "T" maiuscola per indicare un componente temporale. Inoltre, non vi è spazio tra l'ora e l'offset del fuso orario. La stringa di data datetime completa per il 6 dicembre 2014 alle 10:30 PST sarebbe:

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

Avviso: anche in questo caso, la rappresentazione della stringa può essere analizzata in modo diverso a seconda del browser o della versione. In particolare, quando si tratta di fuso orario e fuso orario, esistono differenze tra la data e l'ora: il fuso orario viene restituito con un fuso orario UTC (GMT). Questo è un altro motivo per cui l'utilizzo delle stringhe data/ora non è consigliato.

La sequenza temporale di seguito suddivide un giorno in media utilizzando il tipo di dati data/ora.

    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, ore e fusi orari

Se utilizzi il costruttore della data, per date o datetime, verrà restituita la data o l'ora desiderata nel fuso orario impostato dal browser dell'utente. Puoi impostare l'oggetto Date su un fuso orario specifico in diversi modi. La prima cosa da fare è fornire un formattatore di data in cui Google può specificare un timeZone. Questo fornirà un valore formattato per ogni valore date e datetime nella tabella Data. Puoi anche passare una stringa come argomento al costruttore new Date() oppure puoi eseguire il wrapping degli argomenti nel metodo Date.UTC(), ad esempio:

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

Verrà impostato un oggetto Date con la data e l'ora specificate nel fuso orario UTC (GMT). Da qui puoi calcolare l'offset desiderato per il fuso orario e impostare date e ore come preferisci.

Date e ore con la rappresentazione della stringa data

Quando si serializzano i dati utilizzando la notazione letterale dell'oggetto DataTable di JavaScript per creare la tabella DataTable, non è possibile utilizzare il costruttore new Date(). Invece, Google Tables fornisce una rappresentazione di tipo stringa di data che consente a date o datetime di essere serializzati e analizzati correttamente durante la creazione di una DataTable. Questo formato di stringa della data semplicemente rilascia la parola chiave new e aggiunge l'espressione rimanente tra virgolette:

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

Importante: quando utilizzi questa rappresentazione della stringa di data, come quando utilizzi il costruttore new Date(), i mesi vengono indicizzati a partire da zero (gennaio è il mese 0, dicembre è il mese 11).

Di seguito viene mostrata la stessa sequenza temporale del Super Bowl, ma che ora utilizza la notazione letterale dell'oggetto JavaScript e il formato della stringa data.

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

Questo formato può essere utilizzato anche nel metodo arrayToDataTable(), a condizione che nella prima matrice, in cui sono specificate le etichette della colonna, dichiari la colonna necessaria come type: 'date' o 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)"]
]);
  

Lavorare con l'ora del giorno

Il tipo di dati della colonna DataTable timeofday accetta una matrice di 3 o 4 numeri, che rappresenta rispettivamente ore, minuti, secondi e facoltativamente millisecondi. L'uso di timeofday è diverso dall'uso di date e datetime in quanto i valori non sono specifici per una data, mentre date e datetime specificano sempre una data.

Ad esempio, le 8:30 corrispondono a [8, 30, 0, 0], mentre il quarto valore è facoltativo ([8, 30, 0] restituisce il medesimo valore del giorno).

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

Formattazione di assi, griglia ed etichette tick

Quando si lavora con date, data/ora e ora del giorno, è consigliabile formattare le etichette dell'asse e/o della griglia oppure selezionare le etichette in un certo modo. Puoi farlo in diversi modi.

Innanzitutto, puoi utilizzare l'opzione hAxis.format o vAxis.format. Questa opzione si applica quando l'opzione gridlines.count viene omessa, nel qual caso il grafico mostra per impostazione predefinita un conteggio pari a 5 e quando è impostato su un valore diverso da -1. Questo ti consente di specificare una stringa di formato, in cui utilizzi lettere segnaposto per parti diverse della data/ora/ora del giorno. Per ulteriori informazioni sui segnaposto e sul loro funzionamento, consulta il riferimento al formatore di date, in particolare la sezione 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);
        };
      }
  

Puoi anche fornire regole di formattazione per unità di valori di data e ora specifiche includendo un'opzione units in gridlines e minorGridlines per entrambi gli assi. Questa opzione verrà utilizzata solo se l'opzione gridlines.count è impostata su -1.

L'opzione gridlines.units è un oggetto in cui specifichi il formato per i diversi aspetti della data/ora/ora del giorno per la linea della griglia calcolata e il grafico calcolerà le linee della griglia in base al primo formato che si adatta allo spazio per l'etichetta della griglia. Puoi impostare i formati per anni, mesi, giorni, ore, minuti, secondi e millisecondi.

L'opzione di formato accetta un array di formati stringa e li utilizzerà in ordine finché un formato non rientra nell'area dell'etichetta. Per questo motivo, è consigliabile elencare i formati in ordine dal più lungo al più breve. I formati di stringa utilizzano gli stessi pattern del formatore di date menzionato in precedenza.


Tieni presente che nel grafico sopra, quando modifichi la finestra di visualizzazione, il formato dell'unità hours cambia, dato che gli orari passano da linee della griglia secondarie a quelle principali e il formato nelle opzioni cambia. Inoltre, tenete presente che i valori griglia minori utilizzano il secondo formato più corto, poiché i primi formati non rientrano nello spazio di ogni istanza.

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

Scopri di più sulle date di JavaScript

Se vuoi saperne di più sull'oggetto JavaScript Date(), la rete di sviluppatori Mozilla è un'ottima risorsa. Qui puoi scoprire tutto ciò che c'è da sapere sugli oggetti JavaScript Date.