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 conteggia i mesi a partire da zero: gennaio è 0, febbraio è 1 e dicembre 11. Se il grafico del calendario sembra ritardare di un mese, ecco perché.

Un grafico di calendario è una visualizzazione utilizzata per mostrare l'attività nel corso di un lungo periodo di tempo, ad esempio mesi o anni. Sono più utili quando vuoi illustrare come varia la quantità in base al giorno della settimana o all'andamento nel tempo.

Le prossime versioni del grafico di Google Calendar potrebbero essere oggetto di revisioni sostanziali.

I grafici di calendario vengono visualizzati nel browser utilizzando SVG o VML, a seconda di quale sia appropriato per il browser dell'utente. Come per tutti i grafici di Google, i grafici del calendario mostrano le descrizioni comando quando l'utente passa il mouse sopra i dati. E merito del merito: il nostro grafico del calendario si è ispirato alla visualizzazione del calendario D3.

Esempio semplice

Poniamo che tu voglia mostrare in che modo la partecipazione di una squadra sportiva è cambiata durante la stagione. Con un grafico del calendario, possiamo utilizzare la luminosità per indicare i valori e consentire agli utenti di vedere a colpo d'occhio le tendenze:

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

Per creare un grafico del calendario, carica il pacchetto calendar, quindi crea due colonne, una per le date e una per i valori. (Una terza colonna facoltativa per lo stile personalizzato sarà disponibile in una futura versione di Google Classifiche).

Quindi, compila le righe con coppie data-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, ma questo colore verrà modificato nella release successiva di grafici Google.

Se i valori dei dati sono tutti positivi, i colori vanno dal bianco al blu, mentre il blu più intenso indica i valori più alti. Se sono presenti valori di dati negativi, questi verranno visualizzati in arancione, come mostrato di seguito.

Il codice per questo calendario è simile al primo, ma le righe hanno il seguente 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 le dimensioni dei giorni ("celle") con l'opzione calendar.cellSize:

In questo caso, il valore di calendar.cellSize è passato a 10, riducendo i giorni e, di conseguenza, il grafico nel suo complesso. 

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

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

In questo caso, abbiamo impostato color in blu chiaro e backgroundColor in tonalità più scura: 

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

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

Devi fare attenzione a scegliere un colore del tratto che si distingua dall'monthOutlineColor o che scelga un'opacità bassa. Ecco le opzioni per il grafico 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 nel grafico sopra, il bordo viene evidenziato in rosso. Puoi controllare questo comportamento tramite le opzioni calendar.focusedCellColor: 

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

Settimane

Per impostazione predefinita, ai giorni della settimana vengono assegnate le prime lettere della domenica fino al 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 delle settimane, inserendo una spaziatura interna di 10 pixel tra le etichette e i dati del grafico, quindi 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:

Impostiamo il carattere dell'etichetta su un corsivo rosso intenso a 12 punti in grassetto e romano, impostiamo i contorni sullo stesso colore e inserisciamo una spaziatura interna di 16 pixel. Le strutture dei mesi non utilizzate sono impostate 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 su un corsivo verde grassetto di 32 pt in stile romanico e aggiungiamo 10 pixel tra le etichette dell'anno 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

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 nella tabella rappresenta una data.

Colonne:

  Colonna 0 Colonna 1 … Colonna N (facoltativa)
Finalità: Date Valori … Ruoli facoltativi
Tipo di dati: data, data/ora o ora del giorno number …
Ruolo: dominio dati …
Ruoli colonna facoltativi:

Assente

Assente

 …

 

Opzioni di configurazione

Nome
calendar.cellColor

L'opzione calendar.cellColor consente di personalizzare il bordo dei quadrati del 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
Predefinito: { stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 }
calendar.cellSize

Le dimensioni dei quadrati del giorno di calendario:

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

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

var options = {
  calendar: {
    dayOfWeekLabel: {
      fontName: 'Times-Roman',
      fontSize: 12,
      color: 'black',
      bold: false,
      italic: false
    }
  }
};
Tipo: oggetto
Predefinito: { 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 del giorno del grafico.

Tipo: numero intero
Predefinito: 4
calendar.daysOfWeek

Le etichette con una sola lettera da utilizzare da domenica a sabato.

Tipo: stringa
Predefinito: 'SMTWTFS'
calendario.incentratoCellColor

Quando l'utente si concentra, ad esempio, passando il mouse sopra un quadrato giornaliero, i grafici del calendario lo evidenziano. 

var options = {
  calendar:
    focusedCellColor: {
      stroke: 'red',
      strokeOpacity: 0.8,
      strokeWidth: 3
    }
  }
};
Tipo: oggetto
Predefinito: { 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
Predefinito: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.monthOutlineColor

I mesi con valori di dati sono definiti da altri che utilizzano un bordo in questo stile.

var options = {
  calendar: {
    monthOutlineColor: {
      stroke: 'blue',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
(Vedi anche calendar.unusedMonthOutlineColor.)
Tipo: oggetto
Predefinito: { 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 più in basso nell'anno e quella in basso nel grafico:

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

I mesi senza valori dei dati vengono distinti da altri utilizzando un bordo in questo stile. 

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

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

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

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

Tipo: array di stringhe di colore
Predefinito: null
coloreAxis.ValoreValore max

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

Tipo: numero
Predefinito: valore massimo della colonna colore nei dati del grafico
coloreAxi.ValoreValore

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

Tipo: numero
Predefinito: valore minimo della colonna 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 sul colore del grafico. La colorazione viene eseguita secondo un gradiente dei valori specificati qui. Non specificare un valore per questa opzione equivale a specificare [minValue, maxValue].

Tipo: matrice di numeri
Predefinito: null
forceIFrame

Disegna il grafico all'interno di un frame in linea. Tieni presente che su IE8, questa opzione viene ignorata, mentre tutti i grafici IE8 vengono disegnati negli i-frame.

Tipo: booleano
Predefinito: falso
height

Altezza del grafico in pixel.

Tipo: numero
Predefinito: altezza dell'elemento contenitore
Modello DatiNo

I grafici del calendario utilizzano un pattern 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 della scala di grigi, ad esempio: 

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
Tipo: oggetto
Predefinito: null
descrizione comando.isHTML

Imposta questo criterio su false per usare le descrizioni comando visualizzate con SVG (anziché l'HTML). Per ulteriori dettagli, consulta Personalizzazione dei contenuti della descrizione comando .

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

Tipo: booleano
Predefinito: true
width

La larghezza del grafico in pixel.

Tipo: numero
Predefinito: larghezza dell'elemento che la contiene

Metodi

Metodo
draw(data, options)

Disegna il grafico. Il grafico accetta ulteriori chiamate ai metodi solo dopo l'attivazione dell'evento ready. Extended description.

Tipo di reso: nessuno
getBoundingBox(id)

Restituisce un oggetto contenente i valori sinistro, superiore, larghezza e altezza dell'elemento del grafico id. Il formato per id non è ancora documentato (sono i valori di ritorno 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 cuneo di un grafico a torta
cli.getBoundingBox('slice#4')
Casella di delimitazione dei dati di un grafico verticale (ad es. a colonne):
cli.getBoundingBox('vAxis#0#gridline')
Riquadro di delimitazione dei dati del grafico orizzontale (ad es. a barre):
cli.getBoundingBox('hAxis#0#gridline')

I valori sono relativi al contenitore del grafico. Chiamalo dopo il disegno del grafico.

Tipo di reso: oggetto
getSelection()

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

Tipo di reso: array di elementi di selezione
setSelection()

Seleziona le entità del grafico specificate. Annulla qualsiasi selezione precedente. Le entità selezionabili sono barre, legende e categorie. Una barra corrisponde a una cella della tabella dati, una voce di legenda a una colonna (l'indice della riga è null) e una categoria a una riga (l'indice della colonna è null). 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. Rimanda l'indice della riga e il valore della data dell'entità. Se non è presente alcun elemento della tabella dati per l'entità, il valore restituito per l'indice della riga è undefined.

Proprietà: riga, data
onmouseout

Attivato quando l'utente allontana il puntatore del mouse da un'entità visiva. Rimanda l'indice della riga e il valore della data dell'entità. Se non è presente alcun elemento della tabella dati per l'entità, il valore restituito per l'indice della riga è undefined.

Riga Proprietà, data
ready

Il grafico è pronto per le chiamate ai metodi esterni. Se vuoi interagire con il grafico e chiamare i metodi dopo averlo disegnato, devi configurare un listener per questo evento prima di chiamare il metodo draw e di chiamarlo solo dopo che è stato attivato l'evento.

Proprietà: nessuna
select

Attivato quando l'utente fa clic su un'entità visiva. Per sapere cosa è stato selezionato, chiama il numero getSelection().

Proprietà: nessuna

Norme sui dati

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