Panoramica
I grafici delle annotazioni sono grafici a linee interattivi delle serie temporali che supportano le annotazioni. Tieni presente che ora la sequenza temporale annotata utilizza automaticamente il grafico delle annotazioni.
Avviso di confusione:al momento, il grafico delle annotazioni Google è distinto dalle annotazioni supportate da altri grafici di Google (attualmente ad area, a barre, a colonne, combinati, a linee e a dispersione). In questi grafici, le annotazioni vengono specificate in una colonna separata della tabella dati e visualizzate come brevi frammenti di testo su cui gli utenti possono passare il mouse per visualizzare il testo completo dell'annotazione. Al contrario, il grafico delle annotazioni mostra le annotazioni complete sul lato destro, come mostrato di seguito.
Esempio
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type='text/javascript'>
google.charts.load('current', {'packages':['annotationchart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Kepler-22b mission');
data.addColumn('string', 'Kepler title');
data.addColumn('string', 'Kepler text');
data.addColumn('number', 'Gliese 163 mission');
data.addColumn('string', 'Gliese title');
data.addColumn('string', 'Gliese text');
data.addRows([
[new Date(2314, 2, 15), 12400, undefined, undefined,
10645, undefined, undefined],
[new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
12374, undefined, undefined],
[new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
15766, 'Gallantors', 'First Encounter'],
[new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
34334, 'Gallantors', 'Statement of shared principles'],
[new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
66467, 'Gallantors', 'Mysteries revealed'],
[new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
79463, 'Gallantors', 'Omniscience achieved']
]);
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
displayAnnotations: true
};
chart.draw(data, options);
}
</script>
</head>
<body>
<div id='chart_div' style='width: 900px; height: 600px;'></div>
</body>
</html>
Caricamento in corso...
Il nome del pacchetto google.charts.load è "annotationchart".
google.charts.load("current", {packages: ['annotationchart']});
Il nome della classe della visualizzazione è google.visualization.AnnotationChart.
var visualization = new google.visualization.AnnotationChart(container);
Formato dei dati
Nel grafico puoi visualizzare una o più linee. Ogni riga rappresenta una posizione X nel grafico, ovvero un intervallo di tempo specifico; ogni linea è descritta da un insieme di una o tre colonne.
- La prima colonna è di tipo
dateodatetimee specifica il valore X del punto sul grafico. Se questa colonna è di tipodate(e nondatetime), la risoluzione temporale minima sull'asse X sarà di un giorno. - Ogni riga di dati è quindi descritta da un insieme di una o tre colonne aggiuntive, come descritto qui:
- Valore Y - [obbligatorio, numero] La prima colonna di ogni insieme descrive il valore della riga al momento corrispondente della prima colonna. L'etichetta della colonna viene visualizzata nel grafico come titolo della riga.
- Titolo annotazione - [Facoltativo, stringa] Se una colonna stringa
segue la colonna del valore e l'opzione
displayAnnotationsè true, questa colonna contiene un breve titolo che descrive questo punto. Ad esempio, se questa linea rappresenta la temperatura in Brasile e questo punto è un numero molto alto, il titolo potrebbe essere "Giorno più caldo mai registrato". - Testo dell'annotazione - [Stringa facoltativa] Se esiste una seconda colonna di
stringa per questa serie, il valore della cella verrà utilizzato come testo descrittivo aggiuntivo per questo punto. Per utilizzare questa colonna, devi impostare l'opzione
displayAnnotationssu true. Puoi utilizzare i tag HTML se impostiallowHtmlsutrue. Praticamente non esiste un limite di dimensioni, ma tieni presente che le voci troppo lunghe potrebbero superare la sezione di visualizzazione. Non è necessario avere questa colonna anche se disponi di una colonna per il titolo dell'annotazione per questo punto. L'etichetta della colonna non è utilizzata dal grafico. Ad esempio, se questo fosse il giorno più caldo mai registrato, potresti dire, ad esempio, "Il giorno successivo più vicino è stato di 10 gradi più fresco!".
Opzioni di configurazione
| Nome | |
|---|---|
| allowHtml |
Se impostato su true, qualsiasi testo dell'annotazione che include tag HTML verrà visualizzato come HTML. Tipo: booleano
Predefinito:false
|
| allValuesSuffix |
Un suffisso da aggiungere a tutti i valori nella legenda e le etichette di spunta sugli assi verticali. Tipo:stringa
Predefinito:nessuno
|
| annotationsWidth |
La larghezza (in percentuale) dell'area delle annotazioni rispetto all'intera area del grafico. Deve essere un numero compreso tra 5 e 80. Tipo:numero
Predefinito:25
|
| colori |
I colori da utilizzare per le linee e le etichette del grafico. Un array di stringhe. Ogni elemento è una stringa in un formato di colore HTML valido. Ad esempio "red" o "#00cc00". Tipo: array di stringhe
Predefinito:colori predefiniti
|
| dateFormat |
Il formato utilizzato per visualizzare le informazioni sulla data nell'angolo in alto a destra. Il formato di questo campo è specificato dalla classe java SimpleDateFormat. Tipo:stringa
Predefinito:
"MMMM gg, yyyy" o "HH:mm MMMM dd, yyyy", a seconda del tipo di prima colonna
(rispettivamente data o data/ora).
|
| displayAnnotations |
Se il criterio viene impostato su false, il grafico nasconderà la tabella delle annotazioni, che non sarà visibile e le annotazioni e pubblicitarieText non saranno visibili (nemmeno la tabella delle annotazioni verrà visualizzata se nei dati non sono presenti annotazioni, indipendentemente da questa opzione). Se questa opzione è impostata su true, dopo ogni colonna numerica è possibile aggiungere due colonne facoltative per la stringa di annotazione, una per il titolo dell'annotazione e una per il testo dell'annotazione. Tipo: booleano
Predefinito:true
|
| displayAnnotationsFilter |
Se il valore è impostato su true, il grafico mostrerà un controllo filtro per filtrare le annotazioni. Utilizza questa opzione quando sono presenti molte annotazioni. Tipo: booleano
Predefinito:false
|
| displayDateBarSeparator |
Indica se visualizzare un piccolo separatore a barre ( | ) tra i valori della serie e la data nella legenda, dove true significa sì. Tipo: booleano
Predefinito:true
|
| displayExactValues |
Indica se visualizzare una versione arrotondata e abbreviata dei valori nella parte superiore del grafico per risparmiare spazio; false indica che potrebbe farlo. Ad esempio, se impostato su false, 56123.45 potrebbe essere visualizzato come 56.12k. Tipo: booleano
Predefinito:false
|
| displayLegendDots |
Indica se visualizzare dei punti accanto ai valori nel testo della legenda, dove vero significa sì. Tipo: booleano
Predefinito:true
|
| displayLegendValues |
Indica se visualizzare i valori evidenziati nella legenda, dove true significa sì. Tipo: booleano
Predefinito:true
|
| displayRangeSelector |
Indica se mostrare l'area di selezione dell'intervallo di zoom (l'area nella parte inferiore del grafico), dove false indica no. Il contorno nel selettore di zoom è una versione in scala logaritmica della prima serie del grafico, ridimensionata per adattarsi all'altezza del selettore di zoom. Tipo: booleano
Predefinito:true
|
| displayZoomButtons |
Indica se mostrare i pulsanti di zoom ("1d 5d 1m" e così via), dove false significa no. Tipo: booleano
Predefinito:true
|
| fill |
Un numero compreso tra 0 e 100 (incluso) che specifica l'alfa del riempimento sotto ogni riga del grafico a linee. 100 indica un opaco al 100% e 0 indica nessun riempimento. Il colore di riempimento è lo stesso della linea sopra. Tipo:numero
Predefinito:0
|
| legendPosition |
Indica se inserire la legenda colorata nella stessa riga con i pulsanti di zoom e la data ("sameRow") o in una nuova riga ("newRow"). Tipo:stringa
Predefinito: "sameRow"
|
| max |
Il valore massimo da mostrare sull'asse Y. Se il punto dati massimo supera questo valore, questa
impostazione verrà ignorata e il grafico verrà modificato in modo da mostrare il segno di spunta principale successivo
sopra il punto dati massimo. Questo valore avrà la precedenza sul valore massimo dell'asse Y determinato
da Questo valore è simile a Tipo:numero
Predefinito:automatico
|
| min |
Il valore minimo da mostrare sull'asse Y. Se il punto dati minimo è inferiore a questo valore, questa impostazione verrà ignorata e il grafico verrà modificato in modo da mostrare il segno di spunta principale successivo al di sotto del punto dati minimo. Questo avrà la precedenza sul minimo dell'asse Y determinato da Questo valore è simile a Tipo:numero
Predefinito:automatico
|
| numberFormats |
Specifica i pattern del formato numerico da utilizzare per formattare i valori nella parte superiore del grafico. I pattern devono essere nel formato specificato dalla classe java DecimalFormat.
Se questa opzione viene specificata, l'opzione Tipo:stringa o mappa di coppie di numeri:Stringa.
Predefinito:automatico
|
| scaleColumns |
Specifica i valori da mostrare sui segni di graduazione dell'asse Y nel grafico. Per impostazione predefinita, è presente un'unica scala sul lato destro che si applica a entrambe le serie; è possibile, tuttavia, che lati del grafico vengano scalati in base a valori di serie diversi. Questa opzione prende un array da zero a tre numeri che specificano l'indice (in base zero) della serie da utilizzare come valore di scala. La posizione in cui vengono mostrati questi valori dipende da quanti valori includi nell'array:
Quando visualizzi più di una scala, è consigliabile impostare l'opzione Tipo: array di numeri
Predefinito:automatico
|
| scaleFormat |
Formato numerico da utilizzare per le etichette di selezione degli assi. Il valore predefinito Tipo:stringa
Predefinito: "#"
|
| scaleType |
Imposta i valori massimo e minimo visualizzati sull'asse Y. Sono disponibili le seguenti opzioni:
Se specifichi le opzioni minimo e/o massimo, queste avranno la precedenza sui valori minimo e massimo determinati dal tuo tipo di scala. Tipo:stringa
Predefinito: "fisso"
|
| tavolo |
Contiene opzioni relative alla tabella delle annotazioni. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale oggetto:
var options: {
table: {
sortAscending: true,
sortColumn: 1
}
};
Tipo:oggetto
Predefinito:null
|
| table.sortAscending |
Se impostato su Tipo: booleano
Predefinito:false
|
| table.sortColumn |
L'indice di colonna della tabella delle annotazioni per cui verranno ordinate le annotazioni. L'indice deve essere 0 per la colonna dell'etichetta dell'annotazione o 1 per la colonna del testo dell'annotazione. Tipo:numero
Predefinito:0
|
| spessore |
Un numero compreso tra 0 e 10 (incluso) che specifica lo spessore delle linee, dove 0 è il valore più sottile. Tipo:numero
Predefinito:0
|
| zoomEndTime |
Imposta la data e l'ora di fine dell'intervallo zoom selezionato. Tipo:Data
Predefinito:nessuno
|
| zoomStartTime |
Imposta la data e l'ora di inizio dell'intervallo di zoom selezionato. Tipo:Data
Predefinito:nessuno
|
Metodi
| Metodo | |
|---|---|
clearChart() |
Cancella il grafico e rilascia tutte le risorse allocate. Tipo di reso: nessuno
|
draw(data, options, state) |
Disegna il grafico. Tipo di reso: nessuno
|
getContainer() |
Recupera un handle per l'elemento container contenente il grafico di annotazione. Tipo restituito: handle a un elemento DOM
|
getSelection() |
Implementazione standard di Tipo restituito: array di elementi di selezione
|
getVisibleChartRange() |
Restituisce un oggetto con proprietà
Tipo restituito:
un oggetto con le proprietà
start e end.
|
hideDataColumns(columnIndexes) |
Nasconde la serie di dati specificata dal grafico. Accetta un parametro che può essere un numero o un array di numeri, in cui 0 si riferisce alla prima serie di dati e così via. Tipo di reso: nessuno
|
setVisibleChartRange(start, end) |
Imposta l'intervallo visibile (zoom) sull'intervallo specificato. Accetta due parametri di tipo
Tipo di reso: nessuno
|
showDataColumns(columnIndexes) |
Mostra le serie di dati specificate dal grafico, dopo che sono state nascoste utilizzando il metodo Tipo di reso: nessuno
|
Eventi
| Nome | |
|---|---|
rangechange |
Attivato quando l'utente modifica il cursore dell'intervallo. I nuovi endpoint di intervallo saranno disponibili come
google.visualization.events.addListener(chart, 'rangechange', rangechange_handler);
function rangechange_handler(e) {
console.log('You changed the range to ', e['start'], ' and ', e['end']);
}
Proprietà:inizio, fine
|
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.