Grafico di Calendar

  1. Panoramica
  2. Esempio semplice
  3. Giorni
  4. Settimane
  5. Mesi
  6. Anni
  7. Caricamento in corso…
  8. Formato dei dati
  9. Opzioni di configurazione
  10. Metodi
  11. Eventi
  12. Norme sui dati

Panoramica

Nota: JavaScript conta i mesi a partire da zero: gennaio è 0, febbraio è 1 e dicembre è 11. Ecco il motivo per cui il grafico del tuo calendario ti sembra sbiadito di un mese.

Un grafico del calendario è una visualizzazione utilizzata per mostrare l'attività nel corso di un lungo periodo di tempo, ad esempio mesi o anni. Sono ideali per illustrare le variazioni di una quantità in base al giorno della settimana o alle tendenze nel tempo.

Il grafico del calendario potrebbe essere sottoposto a revisioni sostanziali nelle versioni future di Google Classifiche.

Il rendering dei grafici di calendario viene eseguito nel browser utilizzando SVG o VML, a seconda di quale sia appropriato per il browser dell'utente. Come tutti i grafici Google, anche i grafici del calendario mostrano descrizioni comando quando l'utente passa il mouse sopra i dati. E il merito a cui è dovuto: il nostro grafico del calendario si è ispirato alla visualizzazione del calendario D3.

Esempio semplice

Supponiamo di voler mostrare le variazioni tra le presenze di una squadra sportiva durante la stagione. Con un grafico di calendario, possiamo utilizzare la luminosità per indicare i valori e consentire alle persone di vedere le tendenze a colpo d'occhio:

Puoi passare il mouse sopra i singoli giorni per visualizzare i valori dei dati sottostanti.

Per creare un grafico del calendario, carica il pacchetto calendar e crea due colonne, una per le date e una per i valori. Una terza colonna facoltativa per gli stili personalizzati sarà disponibile in una versione futura di Google Classifiche.

Quindi compila le righe con coppie di date-valore, come mostrato di seguito.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["calendar"]});
      google.charts.setOnLoadCallback(drawChart);

   function drawChart() {
       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn({ type: 'date', id: 'Date' });
       dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
       dataTable.addRows([
          [ new Date(2012, 3, 13), 37032 ],
          [ new Date(2012, 3, 14), 38024 ],
          [ new Date(2012, 3, 15), 38024 ],
          [ new Date(2012, 3, 16), 38108 ],
          [ new Date(2012, 3, 17), 38229 ],
          // Many rows omitted for brevity.
          [ new Date(2013, 9, 4), 38177 ],
          [ new Date(2013, 9, 5), 38705 ],
          [ new Date(2013, 9, 12), 38210 ],
          [ new Date(2013, 9, 13), 38029 ],
          [ new Date(2013, 9, 19), 38823 ],
          [ new Date(2013, 9, 23), 38345 ],
          [ new Date(2013, 9, 24), 38436 ],
          [ new Date(2013, 9, 30), 38447 ]
        ]);

       var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

       var options = {
         title: "Red Sox Attendance",
         height: 350,
       };

       chart.draw(dataTable, options);
   }
    </script>
  </head>
  <body>
    <div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
  </body>
</html>

Giorni

Ogni quadrato in un grafico di calendario rappresenta un giorno. Al momento, il colore delle celle di dati non può essere personalizzato, anche se cambierà nella prossima versione di Google Graph.

Se i valori dei dati sono tutti positivi, i colori vanno dal bianco al blu, con il blu più profondo che indica i valori più alti. Se sono presenti valori di dati negativi, questi diventano arancioni, come mostrato di seguito.

Il codice di questo calendario è simile al primo, ad eccezione del fatto che le righe hanno questo aspetto:

          [ new Date(2013, 9, 4), 10 ],
          [ new Date(2013, 9, 5), 3 ],
          [ new Date(2013, 9, 7), -1 ],
          [ new Date(2013, 9, 8), 2 ],
          [ new Date(2013, 9, 12), -1 ],
          [ new Date(2013, 9, 13), 1 ],
          [ new Date(2013, 9, 15), 1 ],
          [ new Date(2013, 9, 16), -4 ],

Puoi modificare la dimensione dei giorni ("celle") con l'opzione calendar.cellSize:

In questo caso, abbiamo modificato calendar.cellSize impostandolo su 10, diminuendo i giorni e, di conseguenza, il grafico nel suo complesso. 

       var options = {
         title: 'Red Sox Attendance',
         calendar: { cellSize: 10 },
       };

I giorni senza valori di dati possono essere personalizzati con l'opzione noDataPattern:

Qui, impostiamo color su un blu chiaro e backgroundColor su una tonalità leggermente più scura: 

       var options = {
         title: "Red Sox Attendance",
         height: 350,
         noDataPattern: {
           backgroundColor: '#76a7fa',
           color: '#a0c3ff'
         }
       };

Puoi controllare il colore del bordo delle celle, la larghezza e l'opacità del bordo con calendar.cellColor:

Fai attenzione a scegliere un colore del tratto che sia distinto da monthOutlineColor oppure a un'opacità bassa. Ecco le opzioni per il grafico riportato sopra: 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      cellColor: {
        stroke: '#76a7fa',
        strokeOpacity: 0.5,
        strokeWidth: 1,
      }
    }
  };

Se imposti lo stato attivo su un giorno del grafico in alto, il bordo viene evidenziato in rosso. Puoi controllare questo comportamento con le opzioni calendar.focusedCellColor: 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      focusedCellColor: {
        stroke: '#d3362d',
        strokeOpacity: 1,
        strokeWidth: 1,
      }
    }
  };

Settimane

Per impostazione predefinita, i giorni della settimana sono contrassegnati con la prima lettera da domenica a sabato. Non puoi modificare l'ordine dei giorni, ma puoi cambiare le lettere utilizzate con l'opzione calendar.daysOfWeek. Inoltre, puoi controllare la spaziatura interna tra i giorni della settimana e il grafico con calendar.dayOfWeekRightSpace e puoi personalizzare lo stile del testo con calendar.dayOfWeekLabel:

Qui modifichiamo il carattere delle etichette della settimana, inseriamo una spaziatura interna di 10 pixel tra le etichette e i dati del grafico e iniziamo le settimane di lunedì. 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      dayOfWeekLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#1a8763',
        bold: true,
        italic: true,
      },
      dayOfWeekRightSpace: 10,
      daysOfWeek: 'DLMMJVS',
    }
  };

Mesi

Per impostazione predefinita, i mesi sono identificati da linee di colore grigio scuro. Puoi utilizzare l'opzione calendar.monthOutlineColor per controllare i bordi, calendar.monthLabel per personalizzare il carattere dell'etichetta e calendar.underMonthSpace per regolare la spaziatura interna delle etichette:

Abbiamo impostato il carattere dell'etichetta su un grassetto rosso scuro con 12 pt Times-Roman in grassetto, abbiamo impostato i contorni sullo stesso colore e abbiamo inserito una spaziatura interna di 16 pixel. I contorni del mese inutilizzati sono impostati su un colore più debole della stessa tonalità. 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      monthLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#981b48',
        bold: true,
        italic: true
      },
      monthOutlineColor: {
        stroke: '#981b48',
        strokeOpacity: 0.8,
        strokeWidth: 2
      },
      unusedMonthOutlineColor: {
        stroke: '#bc5679',
        strokeOpacity: 0.8,
        strokeWidth: 1
      },
      underMonthSpace: 16,
    }
  };

Anni

Gli anni nei grafici del calendario sono sempre sul bordo sinistro del grafico e possono essere personalizzati con calendar.yearLabel e calendar.underYearSpace:

Impostiamo il carattere dell'anno in grassetto verde scuro da 32 pt e abbiamo aggiunto dieci pixel tra le etichette degli anni e la parte inferiore del grafico: 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      underYearSpace: 10, // Bottom padding for the year labels.
      yearLabel: {
        fontName: 'Times-Roman',
        fontSize: 32,
        color: '#1A8763',
        bold: true,
        italic: true
      }
    }
  };

Caricamento in corso...

Il nome del pacchetto google.charts.load è "calendar": 

  google.charts.load("current", {packages: ["calendar"]});

Il nome della classe della visualizzazione è google.visualization.Calendar: 

  var visualization = new google.visualization.Calendar(container);

Formato dei dati

Righe:ogni riga della tabella rappresenta una data.

Colonne:

  Colonna 0 Colonna 1 ... Colonna N (facoltativa)
Scopo: Date Valori ... Ruoli facoltativi
Tipo di dati: data, ora o data/ora numero ...
Ruolo: dominio dati ...
Ruoli colonna facoltativi:

Assente

Assente

 ...

 

Opzioni di configurazione

Nome
calendar.cellColor

L'opzione calendar.cellColor ti consente di personalizzare il bordo dei quadrati dei giorni di calendario: 

var options = {
  calendar: {
    cellColor: {
      stroke: 'red',      // Color the border of the squares.
      strokeOpacity: 0.5, // Make the borders half transparent.
      strokeWidth: 2      // ...and two pixels thick.
    }
  }
};
Tipo:oggetto
Predefinita: { stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 }
calendar.cellSize

Le dimensioni dei giorni di calendario vengono quadrate:

var options = { calendar: { cellSize: 10 } };
Tipo: numero intero
Predefinito:16
calendar.dayOfWeekLabel

Controlla lo stile del carattere delle etichette della settimana nella parte superiore del grafico:

var options = {
  calendar: {
    dayOfWeekLabel: {
      fontName: 'Times-Roman',
      fontSize: 12,
      color: 'black',
      bold: false,
      italic: false
    }
  }
};
Tipo:oggetto
Predefinita: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.dayOfWeekRightSpace

La distanza tra il bordo destro delle etichette della settimana e il bordo sinistro dei quadrati dei giorni del grafico.

Tipo: numero intero
Predefinito:4
calendar.daysOfWeek

Le etichette a lettera singola da utilizzare da domenica a sabato.

Tipo:stringa
Predefinita: 'SMTWTFS'
calendar.focusedCellColor

Quando l'utente si concentra (ad esempio passando il mouse) sul quadrato di un giorno, i grafici del calendario lo evidenzieranno. 

var options = {
  calendar:
    focusedCellColor: {
      stroke: 'red',
      strokeOpacity: 0.8,
      strokeWidth: 3
    }
  }
};
Tipo:oggetto
Predefinita: { stroke: '#000', strokeOpacity: 1, strokeWidth: 2 }
calendar.monthLabel

Stile per le etichette del mese, ad esempio:

      var options = {
        calendar: {
          monthLabel: {
            fontName: 'Times-Roman',
            fontSize: 16,
            color: 'green',
            bold: true,
            italic: false
          }
        }
      };
Tipo:oggetto
Predefinita: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.monthOutlineColor

I mesi con valori dei dati sono definiti dagli altri utilizzando un bordo in questo stile.

var options = {
  calendar: {
    monthOutlineColor: {
      stroke: 'blue',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
Vedi anche calendar.unusedMonthOutlineColor.
Tipo:oggetto
Predefinita: { stroke: '#000', strokeOpacity: 1, strokeWidth: 1 }
calendar.underMonthSpace

Il numero di pixel tra la parte inferiore delle etichette del mese e la parte superiore dei quadrati del giorno: 

var options = { calendar: { underMonthSpace: 12 } };
Tipo: numero intero
Predefinito:6
calendar.underYearSpace

Il numero di pixel tra l'etichetta dell'anno più in basso e la parte inferiore del grafico:

var options = { calendar: { underYearSpace: 2 } };
Tipo: numero intero
Predefinito:0
calendar.unusedMonthOutlineColor

I mesi senza valori di dati sono definiti dagli altri utilizzando un bordo in questo stile. 

var options = {
  calendar: {
    unusedMonthOutlineColor: {
      stroke: 'yellow',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
Vedi anche calendar.monthOutlineColor.
Tipo:oggetto
Predefinita: { stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
colorAxis

Un oggetto che specifica una mappatura tra i valori e i colori delle colonne di colori o una scala di gradienti. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale oggetto, come mostrato qui: 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
Tipo:oggetto
Predefinito:null
colorAxis.colors

Colori da assegnare ai valori nella visualizzazione. Un array di stringhe, in cui ogni elemento è una stringa di colore HTML, ad esempio: colorAxis: {colors:['red','#004411']}. Devi avere almeno due valori. Il gradiente includerà tutti i valori, oltre ai valori intermedi calcolati, con il primo colore come valore più piccolo e l'ultimo colore come il più alto.

Tipo: array di stringhe di colore
Predefinito:null
colorAxis.maxValue

Se presente, specifica un valore massimo per i dati del colore del grafico. I valori dei dati sui colori di questo valore e superiori verranno visualizzati come ultimo colore nell'intervallo colorAxis.colors.

Tipo:numero
Predefinito:valore massimo della colonna del colore nei dati del grafico
colorAxis.minValue

Se presente, specifica un valore minimo per i dati del colore del grafico. I valori dei dati relativi ai colori di questo valore e inferiori verranno visualizzati come primo colore nell'intervallo colorAxis.colors.

Tipo:numero
Predefinito:valore minimo della colonna del colore nei dati del grafico
colorAxis.values

Se presente, controlla in che modo i valori vengono associati ai colori. Ogni valore è associato al colore corrispondente nell'array colorAxis.colors. Questi valori si applicano ai dati relativi ai colori del grafico. La colorazione viene eseguita in base a un gradiente dei valori specificati qui. Non specificare un valore per questa opzione equivale a specificare [minValue, maxValue].

Tipo: array di numeri
Predefinito:null
forceIFrame

Disegna il grafico all'interno di un frame in linea. Tieni presente che in IE8 questa opzione viene ignorata; tutti i grafici di IE8 vengono tracciati in i-frame.

Tipo: booleano
Predefinito:false
altezza

Altezza del grafico, in pixel.

Tipo:numero
Predefinita: altezza dell'elemento contenitore
noDataPattern

I grafici di calendario utilizzano un motivo diagonale a strisce per indicare che non sono disponibili dati per un determinato giorno. Utilizza le opzioni noDataPattern.backgroundColor e noDataPattern.color per eseguire l'override dei valori predefiniti in scala di grigi, ad esempio: 

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
Tipo:oggetto
Predefinito:null
tooltip.isHtml

Imposta su false per utilizzare le descrizioni comando sottoposte a rendering SVG (anziché tramite HTML). Per ulteriori dettagli, consulta Personalizzazione dei contenuti della descrizione comando .

Nota: la personalizzazione dei contenuti della descrizione comando HTML tramite il ruolo dei dati della colonna della descrizione comando non è supportata dalle visualizzazioni Grafico a torta e Grafico a bolle.

Tipo: booleano
Predefinito:true
larghezza

Larghezza del grafico, in pixel.

Tipo:numero
Predefinita: larghezza dell'elemento contenitore

Metodi

Metodo
draw(data, options)

Disegna il grafico. Il grafico accetta ulteriori chiamate di metodo solo dopo che è stato attivato l'evento ready. Extended description.

Tipo di reso: nessuno
getBoundingBox(id)

Restituisce un oggetto contenente i valori sinistra, superiore, larghezza e altezza dell'elemento del grafico id. Il formato per id non è ancora documentato (sono i valori restituiti dei gestori di eventi), ma ecco alcuni esempi:

var cli = chart.getChartLayoutInterface();

Altezza dell'area del grafico
cli.getBoundingBox('chartarea').height
Larghezza della terza barra nella prima serie di un grafico a barre o a colonne
cli.getBoundingBox('bar#0#2').width
Riquadro di delimitazione del quinto segmento di un grafico a torta
cli.getBoundingBox('slice#4')
Riquadro di delimitazione dei dati di un grafico verticale (ad es. a colonne):
cli.getBoundingBox('vAxis#0#gridline')
Riquadro di delimitazione dei dati di un grafico orizzontale (ad es. a barre):
cli.getBoundingBox('hAxis#0#gridline')

I valori sono relativi al contenitore del grafico. Viene chiamato dopo che il grafico è stato disegnato.

Tipo restituito: oggetto
getSelection()

Restituisce un array delle entità del grafico selezionate. Le entità selezionabili sono barre, voci di legenda e categorie. Una barra corrisponde a una cella nella tabella di dati, una voce di legenda a una colonna (l'indice di riga è nullo) e una categoria a una riga (l'indice di colonna è nullo). Per questo grafico, è possibile selezionare una sola entità alla volta. Extended description

Tipo restituito: array di elementi di selezione
setSelection()

Seleziona le entità del grafico specificate. Annulla la selezione precedente. Le entità selezionabili sono barre, voci di legenda e categorie. Una barra corrisponde a una cella nella tabella di dati, una voce di legenda a una colonna (l'indice di riga è nullo) e una categoria a una riga (l'indice di colonna è nullo). Per questo grafico è possibile selezionare una sola entità alla volta. Extended description

Tipo di reso: nessuno
clearChart()

Cancella il grafico e rilascia tutte le risorse allocate.

Tipo di reso: nessuno

Eventi

Nome
error

Attivato quando si verifica un errore durante il tentativo di rendering del grafico.

Proprietà: id, messaggio
onmouseover

Attivato quando l'utente passa il mouse sopra un'entità visiva. Restituisce l'indice della riga e il valore della data dell'entità. Se non è presente alcun elemento della tabella di dati per l'entità, il valore restituito per l'indice della riga è undefined.

Proprietà:riga, data
onmouseout

Attivato quando l'utente allontana il mouse dall'entità visiva. Restituisce l'indice della riga e il valore della data dell'entità. Se non è presente alcun elemento della tabella di dati per l'entità, il valore restituito per l'indice della riga è undefined.

Riga Proprietà, data
ready

Il grafico è pronto per le chiamate di metodi esterne. Se vuoi interagire con il grafico e richiamare i metodi dopo averlo tracciato, devi impostare un listener per questo evento prima di chiamare il metodo draw e richiamarli solo dopo l'attivazione dell'evento.

Proprietà:nessuna
select

Attivato quando l'utente fa clic su un'entità visiva. Per sapere quali elementi sono stati selezionati, chiama getSelection().

Proprietà:nessuna

Norme sui dati

Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato a nessun server.