- Panoramica
- Esempio semplice
- Etichettatura delle barre
- Esempio avanzato
- Mettere le barre su una riga
- Modificare i caratteri
- Controllo dei colori
- Linee della griglia sovrapposte
- Personalizzazione delle descrizioni comando
- Caricamento in corso…
- Formato dei dati
- Opzioni di configurazione
- Metodi
- Eventi
- Norme sui dati
Panoramica
Una sequenza temporale è un grafico che mostra il modo in cui un insieme di risorse viene utilizzato nel tempo. Se gestisci un progetto software e vuoi illustrare chi sta facendo cosa e quando oppure se stai organizzando una conferenza e devi pianificare le sale riunioni, una sequenza temporale è spesso una scelta di visualizzazione ragionevole. Un tipo molto diffuso di sequenze temporali è il grafico di Gantt.
Nota: negli oggetti Data JavaScript, i mesi vengono indicizzati da zero e fino a undici, dove gennaio è il mese 0 e dicembre è il mese 11. Se la sequenza temporale sembra sfasata di un mese, è molto probabile che questo sia il motivo. Per maggiori informazioni, consulta la pagina Date e ore.
Esempio semplice
Supponiamo che tu voglia tracciare una trama del momento in cui i presidenti americani hanno scontato il loro mandato. Qui, le "risorse" sono i presidenti e possiamo tracciare il mandato di ciascun presidente come barra:
Se passi il mouse sopra una barra, viene visualizzata una descrizione comando con informazioni più dettagliate.
Dopo aver caricato il pacchetto timeline
e definito un
callback per disegnare il grafico quando viene visualizzata la pagina,
il metodo drawChart()
crea un'istanza
di google.visualization.Timeline()
e poi compila
un dataTable
con una riga per ogni presidente.
All'interno di dataTable
, la prima colonna contiene il
nome del presidente, mentre la seconda e la terza colonna indicano l'ora di inizio e
l'ora di fine. Questi hanno il tipo JavaScript Date
, ma potrebbero essere anche numeri normali.
Infine, richiamiamo il metodo draw()
del grafico,
che lo visualizza all'interno di un elemento div
con lo stesso identificatore
(timeline
) utilizzato quando container
è stato dichiarato
nella prima riga di drawChart()
.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['timeline']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('timeline'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'President' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); chart.draw(dataTable); } </script> </head> <body> <div id="timeline" style="height: 180px;"></div> </body> </html>
Le sequenze temporali dei grafici Google sono personalizzabili. Negli esempi che seguono ti mostreremo alcuni dei modi più comuni per personalizzare l'aspetto delle sequenze temporali.
Etichettatura delle barre
Oltre alle etichette di riga ("Washington", "Adams", "Jefferson" sopra) puoi etichettare singole barre. Qui cambiamo le etichette delle righe in semplici numeri e inseriamo il nome di ciascun presidente sulla sua barra.
In questo codice, abbiamo inserito una nuova colonna nei nostri dati in cui inserire
le etichette delle barre: il nome completo di ciascun presidente. Se in una sequenza temporale dataTable
sono presenti quattro colonne, la prima viene interpretata come etichetta di riga, la seconda come etichetta a barre e la terza e la quarta come inizio e fine.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example2.1'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Term' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ '2', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ '3', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); chart.draw(dataTable); } </script> <div id="example2.1" style="height: 200px;"></div>
Le nuove etichette di riga riportate sopra non sono molto informative, quindi rimuoviamole
con l'opzione showRowLabels
della sequenza temporale.
Per impostazione predefinita, showRowLabels
è true
. Se viene impostato su false
, le etichette delle righe vengono rimosse:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example2.2'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Term' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ '2', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ '3', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); var options = { timeline: { showRowLabels: false } }; chart.draw(dataTable, options); } </script> <div id="example2.2" style="height: 180px;"></div>
Esempio avanzato
Per rendere le tempistiche più complesse, aggiungiamo vicepresidenti e segretari di stato al grafico. John Adams era vicepresidente prima di diventare presidente e Thomas Jefferson era segretario di stato, poi vicepresidente e infine presidente.
Nelle sequenze temporali, una risorsa avrà lo stesso colore anche quando è presente su più righe, per cui nel grafico seguente ogni persona è rappresentata con un colore coerente.
Alcuni segretari di stato sono stati serviti per tempi molto brevi, quindi questo grafico è un buon test per l'etichettatura. Quando un'etichetta è troppo grande per la barra, viene abbreviata o eliminata a seconda delle sue dimensioni. Gli utenti possono sempre passare il mouse sopra la barra per visualizzare informazioni della descrizione comando.
La sequenza temporale mostrerà le righe in ordine (presidente sopra
il vicepresidente e sopra il segretario di stato),
perché questo è l'ordine in cui appaiono nel codice seguente. Tuttavia, il layout delle barre è determinato esclusivamente dall'ora di inizio e di fine, quindi lo scambio di due segretari di stato o due presidenti nel dataTable
non ha alcun effetto sul grafico.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example3.1'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Position' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ], [ 'Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)], [ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)], [ 'Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)], [ 'Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)], [ 'Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 22)], [ 'Secretary of State', 'Thomas Jefferson', new Date(1790, 2, 22), new Date(1793, 11, 31)], [ 'Secretary of State', 'Edmund Randolph', new Date(1794, 0, 2), new Date(1795, 7, 20)], [ 'Secretary of State', 'Timothy Pickering', new Date(1795, 7, 20), new Date(1800, 4, 12)], [ 'Secretary of State', 'Charles Lee', new Date(1800, 4, 13), new Date(1800, 5, 5)], [ 'Secretary of State', 'John Marshall', new Date(1800, 5, 13), new Date(1801, 2, 4)], [ 'Secretary of State', 'Levi Lincoln', new Date(1801, 2, 5), new Date(1801, 4, 1)], [ 'Secretary of State', 'James Madison', new Date(1801, 4, 2), new Date(1809, 2, 3)] ]); chart.draw(dataTable); } </script> <div id="example3.1" style="height: 200px;"></div>
Mettere le barre su una riga
A differenza dei papi, può esserci un solo presidente degli Stati Uniti alla volta, quindi se etichettiamo tutte le nostre righe come "Presidente", la sequenza temporale unirà le tre righe del nostro primo grafico in un'unica riga per una presentazione più pulita. Puoi controllare questo comportamento con
l'opzione groupByRowLabel
.
Ecco il comportamento predefinito:
Ora impostiamo groupByRowLabel
su false
e
suddiviso la riga in tre:
Il codice per disattivare il raggruppamento:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example4.2'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Role' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); var options = { timeline: { groupByRowLabel: false } }; chart.draw(dataTable, options); } </script> <div id="example4.2" style="height: 200px;"></div>
Controllo dei colori
Per impostazione predefinita, Google Grafici sceglie colori ottimizzati per estetica e leggibilità (inclusi gli utenti con disabilità visive). Puoi
personalizzare il comportamento predefinito con le opzioni colorByRowLabel
,
singleColor
, backgroundColor
e colors
.
L'opzione colorByRowLabel
colora allo stesso modo tutte le barre sulla stessa riga. Può essere una buona scelta in caso
di spazi vuoti tra le barre.
Il valore predefinito di colorByRowLabel
è false
, quindi
qui lo sostituiamo e lo impostiamo su true
.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example5.1'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Room' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Magnolia Room', 'Beginning JavaScript', new Date(0,0,0,12,0,0), new Date(0,0,0,13,30,0) ], [ 'Magnolia Room', 'Intermediate JavaScript', new Date(0,0,0,14,0,0), new Date(0,0,0,15,30,0) ], [ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,0,0), new Date(0,0,0,17,30,0) ], [ 'Willow Room', 'Beginning Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Willow Room', 'Intermediate Google Charts', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Willow Room', 'Advanced Google Charts', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ]]); var options = { timeline: { colorByRowLabel: true } }; chart.draw(dataTable, options); } </script> <div id="example5.1" style="height: 100px;"></div>
Se vuoi che tutte le barre siano dello stesso colore, indipendentemente dalla riga in cui si trovano, utilizza l'opzione singleColor
:
Nel codice seguente, singleColor
è impostato su un valore esadecimale
per colorare tutte le barre di verde chiaro:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example5.2'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Room' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ], [ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ], [ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ], [ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]); var options = { timeline: { singleColor: '#8d8' }, }; chart.draw(dataTable, options); } </script> <div id="example5.2" style="height: 150px;"></div>
Puoi controllare il colore di sfondo delle righe
con l'opzione backgroundColor
:
Il valore backgroundColor
è specificato come valore esadecimale. Qui, lo accoppiamo con colorByRowLabel
per mostrare le tracce in una conferenza:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example5.3'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Room' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ], [ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ], [ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ], [ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]); var options = { timeline: { colorByRowLabel: true }, backgroundColor: '#ffd' }; chart.draw(dataTable, options); } </script> <div id="example5.3" style="height: 150px;"></div>
Quindi, per impostare il colore di sfondo alternato o non alternato in base all'indice di riga,
utilizza l'opzione alternatingRowStyle
(v51+ attivo):
<script src="https://www.gstatic.com/charts/loader.js"></script> <script> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example5.4'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Room' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Magnolia Room', 'CSS Fundamentals', new Date(0,0,0,12,0,0), new Date(0,0,0,14,0,0) ], [ 'Magnolia Room', 'Intro JavaScript', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Magnolia Room', 'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ], [ 'Gladiolus Room', 'Intermediate Perl', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Gladiolus Room', 'Advanced Perl', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Gladiolus Room', 'Applied Perl', new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ], [ 'Petunia Room', 'Google Charts', new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ], [ 'Petunia Room', 'Closure', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ], [ 'Petunia Room', 'App Engine', new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]); var options = { timeline: { colorByRowLabel: true }, alternatingRowStyle: false }; chart.draw(dataTable, options); } </script> <div id="example5.4" style="height: 150px;"></div>
Se vuoi controllare i colori delle singole barre, utilizza
l'opzione colors
:
colors
accetta un array di valori esadecimali, che vengono applicati alle barre in ordine:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example5.5'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Role' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); var options = { colors: ['#cbb69d', '#603913', '#c69c6e'], }; chart.draw(dataTable, options); } </script> <div id="example5.5" style="height: 150px;"></div>
Se il grafico richiede più colori rispetto a quelli elencati, il grafico si comporterà come se singleColor
fosse impostato sul primo colore dell'elenco. Questo vale per tutti i grafici di Google, non solo per le tempistiche.
Un altro modo per controllare i colori delle singole barre è utilizzare una colonna con il ruolo Stile.
Il codice da aggiungere e compilare una colonna di stile:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example5.6'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Role' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'string', id: 'style', role: 'style' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'President', 'George Washington', '#cbb69d', new Date(1789, 3, 30), new Date(1797, 2, 4)], [ 'President', 'John Adams', '#603913', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ 'President', 'Thomas Jefferson', '#c69c6e', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); chart.draw(dataTable); } </script> <div id="example5.6" style="height: 150px;"></div>
Modificare i caratteri
Puoi scegliere il carattere tipografico e il carattere per le etichette di ogni riga
con rowLabelStyle
e per le etichette in ogni barra
con barLabelStyle
. Entrambe sono mostrate di seguito.
Nota: assicurati di scegliere i caratteri tipografici che il browser degli utenti sarà in grado di visualizzare.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example6.1'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Role' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Washington', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ], [ 'Adams', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ], [ 'Jefferson', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]); var options = { colors: ['#cbb69d', '#603913', '#c69c6e'], timeline: { rowLabelStyle: {fontName: 'Helvetica', fontSize: 24, color: '#603913' }, barLabelStyle: { fontName: 'Garamond', fontSize: 14 } } }; chart.draw(dataTable, options); } </script> <div id="example6.1" style="height: 200px;"></div>
Non puoi impostare il colore del testo barLabel
.
Linee della griglia sovrapposte
I grafici di Google apportano piccole modifiche agli endpoint
delle barre per evitare di nascondere le linee della griglia della sequenza temporale. Per evitare questo comportamento, imposta l'opzione avoidOverlappingGridLines
su false
.
Per spiegare l'effetto, ecco due esempi, il primo con una griglia sovrapposta e il secondo senza.
Ecco il codice che si sovrappone alle linee della griglia:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:["timeline"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('example7.1'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'Room' }); dataTable.addColumn({ type: 'string', id: 'Name' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Magnolia Room', 'Google Charts', new Date(0,0,0,14,0,0), new Date(0,0,0,15,0,0)], [ 'Magnolia Room', 'App Engine', new Date(0,0,0,15,0,0), new Date(0,0,0,16,0,0)]]); var options = { timeline: { showRowLabels: false }, avoidOverlappingGridLines: false }; chart.draw(dataTable, options); } </script> <div id="example7.1" style="height: 200px;"></div>
Personalizzazione delle descrizioni comando
Puoi personalizzare ciò che gli utenti visualizzano quando passano il mouse sopra le barre di una cronologia aggiungendo una colonna per la descrizione comando in una tabella dati a cinque colonne. Per fornire descrizioni comando non predefinite, ogni riga della tabella dati deve avere tutte e cinque le colonne (etichetta riga, etichetta a barre, descrizione comando, inizio e fine):
Se passi il mouse sopra una barra, viene visualizzata una descrizione comando con il testo definito nella terza colonna. In questo grafico, dobbiamo impostare la seconda colonna su
valori fittizi (qui, null
) in modo che le nostre descrizioni comando possano esistere
nella terza colonna.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['timeline']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var container = document.getElementById('timeline-tooltip'); var chart = new google.visualization.Timeline(container); var dataTable = new google.visualization.DataTable(); dataTable.addColumn({ type: 'string', id: 'President' }); dataTable.addColumn({ type: 'string', id: 'dummy bar label' }); dataTable.addColumn({ type: 'string', role: 'tooltip' }); dataTable.addColumn({ type: 'date', id: 'Start' }); dataTable.addColumn({ type: 'date', id: 'End' }); dataTable.addRows([ [ 'Washington', null, 'George', new Date(1789, 3, 29), new Date(1797, 2, 3) ], [ 'Adams', null, 'John', new Date(1797, 2, 3), new Date(1801, 2, 3) ], [ 'Jefferson', null, 'Thomas', new Date(1801, 2, 3), new Date(1809, 2, 3) ]]); chart.draw(dataTable); } </script> </head> <body> <div id="timeline-tooltip" style="height: 180px;"></div> </body> </html>
Caricamento in corso...
Il nome del pacchetto google.charts.load
è timeline
:
google.charts.load("current", {packages: ["timeline"]});
Il nome della classe della visualizzazione è google.visualization.Timeline
:
var visualization = new google.visualization.Timeline(container);
Formato dei dati
Righe:ogni riga della tabella rappresenta una barra della cronologia.
Colonne:
Colonna 0 | Colonna 1 | Colonna 2 | Colonna 3 | Colonna 4 | |
---|---|---|---|---|---|
Scopo: | Etichetta riga | Etichetta a barre (facoltativa) | Descrizione comando (facoltativa) | Inizia | Termina |
Tipo di dati: | stringa | stringa | stringa | numero o data | numero o data |
Ruolo: | dati | dati | descrizione comando | dati | dati |
Opzioni di configurazione
Nome | |
---|---|
alternatingRowStyle |
Indica se il colore di sfondo del grafico deve essere alternato in base all'indice delle righe (ad esempio, colore di sfondo delle righe indicizzate uniformemente più scuro). Se il valore è false, lo sfondo del grafico sarà di un colore uniforme. Se impostato su true, lo sfondo del grafico verrà alternato in base all'indice di riga. (Nota: attiva v51 e versioni successive) Tipo: booleano
Predefinito:true
|
avoidOverlappingGridLines |
Indica se gli elementi di visualizzazione (ad es. le barre in una sequenza temporale) devono oscurare le linee della griglia. Se il valore è false, le linee della griglia potrebbero essere coperte completamente dagli elementi di visualizzazione. Se true, gli elementi di visualizzazione possono essere modificati per mantenere visibili le linee della griglia. Tipo: booleano
Predefinito:true
|
backgroundColor |
Il colore di sfondo per l'area principale del grafico. Può essere una semplice stringa di colore HTML,
ad esempio Tipo: stringa o oggetto
Predefinito: "bianco"
|
colori |
I colori da utilizzare per gli elementi del grafico. Un array di stringhe, in cui ogni elemento è una stringa di colore HTML, ad esempio: Tipo: array di stringhe
Predefinito:colori predefiniti
|
enableInteractivity |
Indica se il grafico genera eventi basati sugli utenti o reagisce all'interazione dell'utente. Se il valore è false, il grafico non genera eventi di tipo "select" o altri eventi basati sull'interazione (ma genera eventi pronti o di errore) e non mostra il testo del passaggio del mouse o altri eventi basati sull'input dell'utente. Tipo: booleano
Predefinito:true
|
fontName |
Il tipo di carattere predefinito per tutto il testo del grafico. Puoi eseguire l'override di questa preferenza utilizzando le proprietà per elementi specifici del grafico. Tipo:stringa
Predefinito: 'Arial'
|
fontSize |
La dimensione predefinita dei caratteri, in pixel, di tutto il testo nel grafico. Puoi eseguire l'override di questa preferenza utilizzando le proprietà per elementi specifici del grafico. Tipo:numero
Predefinito:automatico
|
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
|
timeline.barLabelStyle |
Un oggetto che specifica lo stile di testo dell'etichetta a barre. Ha questo formato: {fontName: <string>, fontSize: <string>}
Vedi anche Tipo:oggetto
Predefinito:null
|
timeline.colorByRowLabel |
Se impostato su true, applica lo stesso colore a ogni barra della riga. L'impostazione predefinita prevede l'utilizzo di un colore per etichetta a barre. Tipo: booleano
Predefinito:false
|
timeline.groupByRowLabel |
Se impostato su false, crea una riga per ogni voce Tipo: booleano
Predefinito:true
|
timeline.rowLabelStyle |
Un oggetto che specifica lo stile di testo dell'etichetta della riga. Ha questo formato: {color: <string>, fontName: <string>, fontSize: <string>}
Tipo:oggetto
Predefinito:null
|
timeline.showBarLabels |
Se impostato su false, le etichette delle barre vengono omesse. Per impostazione predefinita, vengono mostrati. Tipo: booleano
Predefinito:true
|
timeline.showRowLabels |
Se impostato su false, vengono omesse le etichette di riga. Per impostazione predefinita, vengono mostrati. Tipo: booleano
Predefinito:true
|
timeline.singleColor |
Applica lo stesso colore a tutte le barre. Viene specificato come valore esadecimale (ad es. "#8d8"). Tipo:stringa
Predefinito:null
|
tooltip.isHtml |
Imposta su Nota: la personalizzazione dei contenuti della descrizione comando HTML tramite il ruolo dei dati della colonna della descrizione comando non è supportata dalla visualizzazione Grafico a bolle. Tipo: booleano
Predefinito:true
|
tooltip.trigger |
L'interazione dell'utente che determina la visualizzazione della descrizione comando:
Tipo:stringa
Predefinito: "focus"
|
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 Tipo di reso: nessuno
|
clearChart() |
Cancella il grafico e rilascia tutte le risorse allocate. Tipo di reso: nessuno
|
getSelection() |
Restituisce un array delle entità del grafico selezionate.
Le entità selezionabili sono barre, voci di legenda e categorie.
Per questo grafico, è possibile selezionare una sola entità alla volta.
Tipo restituito: array di elementi di selezione
|
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 gli indici di righe e colonne dell'elemento della tabella di dati corrispondente. Una barra è correlata a una cella nella tabella dati, a una voce di legenda a una colonna (l'indice di riga è nullo) e a una categoria a una riga (l'indice di colonna è nullo). Proprietà:riga, colonna
|
onmouseout |
Attivato quando l'utente allontana il mouse dall'entità visiva. Restituisce gli indici di righe e colonne dell'elemento della tabella di dati corrispondente. Una barra è correlata a una cella nella tabella dati, a una voce di legenda a una colonna (l'indice di riga è nullo) e a una categoria a una riga (l'indice di colonna è nullo). Proprietà:riga, colonna
|
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 Proprietà:nessuna
|
select |
Attivato quando l'utente fa clic su un'entità visiva. Per sapere quali elementi sono stati selezionati, chiama
Proprietà:nessuna
|
Norme sui dati
Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato a nessun server.