Date e ore

  1. Panoramica
  2. Date e ore utilizzando il costruttore Date
  3. Date, ore e fusi orari
  4. Date e ore che utilizzano la rappresentazione di stringa della data
  5. Lavorare con Timeofday
  6. Formattazione delle etichette di asse, griglia e segni di graduazione
  7. Ulteriori informazioni sulle date JavaScript

Panoramica

I tipi di dati delle colonne DataTable date e datetime utilizzano la classe JavaScript Date integrata.

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

Date e ore che utilizzano il costruttore Date

Date che utilizzano il costruttore 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 assumono la forma di diversi numeri corrispondenti alle diverse proprietà della data. 

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

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

Il costruttore Date può anche assumere il seguente formato: new Date(Milliseconds), dove i millisecondi sono la distanza in millisecondi della data desiderata dal 1° gennaio 1970 00:00:00 UTC. Per le date e gli orari precedenti a questa data, verrà indicato un numero negativo di millisecondi.

L'utilizzo del costruttore Date è utile quando si crea manualmente la tabella DataTable utilizzando i metodi addColumn(), addRow() e addRows(), oltre al metodo arrayToDataTable(). Tuttavia, se utilizzi JSON per specificare i dati, è necessario 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. I formati disponibili sono:

  • 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 stringa nel costruttore Date potrebbe essere analizzata in modo diverso da browser e versioni diverse di browser, restituendo così date diverse per la stessa stringa. Di conseguenza, non è consigliabile passare stringhe al costruttore Date. Consigliamo invece di utilizzare solo numeri per gli argomenti del costruttore Date.

La sequenza temporale di seguito mostra il campione del Super Bowl di ogni stagione della NFL a partire dal 2000.


Di seguito è riportato il codice per creare questa sequenza temporale. Nota l'utilizzo dei costruttori new Date() e i numeri forniti per ogni data, usando i mesi basati su 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 con il costruttore Date

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

In alternativa, è possibile passare anche una rappresentazione in formato stringa di datetime al costruttore Date. Una rappresentazione stringa di datetime consiste nell'aggiungere ore, minuti e secondi, oltre alla differenza di fuso orario a quattro cifre (ad es. il fuso orario PST (Pacific Standard Time) è -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 ci sono spazi, ma la data è seguita da una "T" maiuscola per indicare un componente temporale. Inoltre, non c'è spazio tra l'ora e la differenza del fuso orario. La stringa completa per la data datetime 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 stringa potrebbe essere analizzata in modo diverso da browser/versioni differenti. In particolare, quando si ha a che fare con l'ora e i fusi orari, esistono differenze se la data/ora viene restituita con un fuso orario UTC (GMT) o essere sfalsata e restituita nell'ora locale. Questo è un altro motivo per cui l'uso di stringhe data/ora non è consigliato.

La sequenza temporale di seguito suddivide un giorno medio, 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 Date, per date o datetime, viene restituita la data o la data/ora desiderate nel fuso orario impostato dal browser dell'utente. Puoi impostare l'oggetto Date su un fuso orario specifico in diversi modi. In primo luogo, GoogleChart fornisce un formatore della data in cui è possibile specificare un timeZone. In questo modo verrà fornito un valore formattato per ciascuno dei valori date e datetime nella tabella di dati. Puoi anche passare in una stringa come argomento al costruttore new Date() oppure puoi racchiudere gli argomenti nel metodo Date.UTC(), ad esempio: 

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

In questo modo, l'oggetto Date verrà impostato sulla data e sull'ora specificate nel fuso orario UTC (GMT). Da qui puoi calcolare l'offset desiderato per il fuso orario e impostare le date e gli orari come preferisci.

Date e ore che utilizzano la rappresentazione di stringa della data

Durante la serializzazione dei dati utilizzando la notazione letterale oggetto DataTable JavaScript per creare la tabella DataTable, non è possibile utilizzare il costruttore new Date(). Google Graphic fornisce invece una rappresentazione stringa per la data che consente di serializzare e analizzare correttamente date o datetime durante la creazione di una tabella di dati. Questo formato stringa per la data elimina semplicemente la parola chiave new e aggrega l'espressione rimanente tra virgolette: 

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

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

Di seguito è riportata la stessa sequenza temporale del Super Bowl di prima, ma ora in uso la notazione letterale dell'oggetto JavaScript e il formato stringa Date. 

    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 nel primo array, in cui vengono specificate le etichette di colonna, dichiari che la colonna necessaria sia 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 timeofday DataTable utilizza un array di 3 o 4 numeri, che rappresentano rispettivamente ore, minuti, secondi e, facoltativamente, millisecondi. L'utilizzo di timeofday è diverso dall'utilizzo di date e datetime in quanto i valori non sono specifici di una data, mentre date e datetime specificano sempre una data.

Ad esempio, l'orario 8:30 sarebbe: [8, 30, 0, 0], con il quarto valore facoltativo ([8, 30, 0] restituirà lo stesso valore dell'ora). 

    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 delle etichette di asse, linea della griglia e segni di graduazione

Quando lavori con date, data/ora e ora del giorno, potrebbe essere opportuno formattare le etichette dell'asse, delle etichette della griglia o del segno di spunta in un determinato modo. Ci sono vari modi per farlo.

Innanzitutto, puoi utilizzare l'opzione hAxis.format o vAxis.format. Questa opzione si applica se l'opzione gridlines.count viene omessa. In questo caso, il grafico viene impostato in modo predefinito su un conteggio pari a 5, nonché quando è impostato su un numero diverso da -1. Ciò ti consente di specificare una stringa di formato in cui utilizzare lettere segnaposto per parti diverse di data/ora/ora del giorno. Consulta il riferimento per il formatter della data, in particolare la sezione pattern, per ulteriori informazioni sui segnaposto e sul loro funzionamento. 

      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 specifici di data e ora 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 di data/ora/ora del giorno per la linea di 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 relativi ad anni, mesi, giorni, ore, minuti, secondi e millisecondi.

L'opzione di formato accetta un array di formati stringa e li utilizza in ordine fino a quando un formato non si adatta all'area dell'etichetta. Per questo motivo, consigliamo di elencare i formati ordinati dal più lungo al più corto. I formati stringa utilizzano gli stessi pattern del riferimento al formattatore della data menzionato in precedenza.


Tieni presente che nel grafico in alto, quando modifichi la finestra di visualizzazione, il formato dell'unità hours cambia, dato che gli orari passano da linee della griglia minori a principali e il formato delle opzioni cambia di conseguenza. Inoltre, tieni presente che le linee minori della griglia utilizzano il secondo formato, quello più corto, poiché i primi non si adattano allo spazio in 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']}
            }
          }
        }

Ulteriori informazioni sulle date JavaScript

Se vuoi saperne di più sull'oggetto JavaScript Date(), Mozilla Developer Network è un'ottima risorsa. Qui puoi scoprire tutto ciò che riguarda gli oggetti Data JavaScript.