Panoramica
I grafici di 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 sulla confusione: al momento, il grafico delle annotazioni di Google è distinto dalle annotazioni supportate dagli altri grafici di Google (attualmente, barra, colonna, combinazione, linea e dispersione). In questi grafici, le annotazioni vengono specificate in una colonna separata di tabelle di dati e visualizzate come brevi frammenti di testo su cui gli utenti possono passare il mouse per vedere il testo completo delle annotazioni. 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
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
Puoi visualizzare una o più linee nel grafico. Ogni riga rappresenta una posizione X sul grafico, ovvero un'ora specifica; ogni riga è descritta da un insieme di colonne da una a tre.
- La prima colonna è di tipo
dateodatetimee specifica il valore X del punto sul grafico. Se questa colonna è di tipodate(e nondatetime), la risoluzione temporale più piccola sull'asse X sarà di un giorno. - Ogni riga di dati viene 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 sul grafico come titolo della riga.
- Titolo dell'annotazione: [Facoltativo, stringa] Se una colonna della stringa segue la colonna del valore e l'opzione
displayAnnotationsè vera, questa colonna contiene un titolo breve che descrive questo punto. Ad esempio, se questa riga rappresenta la temperatura in Brasile e questo punto è molto alto, il titolo potrebbe essere "Il 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; in sostanza non sono previsti limiti di dimensione, ma tieni presente che le voci troppo lunghe potrebbero eccedere 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 del momento, potresti dire, ad esempio, "Il giorno successivo più vicino è stato 10 gradi più freddo!".
Opzioni di configurazione
| Nome | |
|---|---|
| consentiHTML |
Se è impostato su true, il testo delle annotazioni che include i tag HTML verrà visualizzato come HTML. Tipo: booleano
Predefinito: falso
|
| Sull'Valore di tutti i valori |
Un suffisso da aggiungere a tutti i valori nella legenda e dalle etichette di graduazione negli assi verticali. Tipo: stringa
Predefinito: nessuno
|
| annotazioniLarghezza |
La larghezza (in percentuale) dell'area delle annotazioni rispetto all'intera area del grafico. Deve essere un numero compreso nell'intervallo 5-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, "rosso" o "#00cc00". Tipo: matrice di stringhe
Predefinito: colori predefiniti
|
| Formato data |
Il formato utilizzato per visualizzare le informazioni sulla data nell'angolo in alto a destra. Il formato di questo campo è specificato dalla classe SimpleDateFormat di java. Tipo: stringa
Predefinito:
"gg MMMM gg, aaaa" o "HH:mm MMMM gg, aaaa", a seconda del tipo della prima colonna
(rispettivamente data o data/ora).
|
| displayAnnotazioni |
Se viene impostato su false, il grafico nasconde la tabella delle annotazioni e le annotazioni e il testo di annotazioni non saranno visibili (anche la tabella delle annotazioni non verrà visualizzata se i dati non contengono annotazioni, a prescindere da questa opzione). Se questa opzione è impostata su true, dopo ogni colonna numerica puoi aggiungere due colonne facoltative per la stringa di annotazione, una per il titolo e un'altra per il testo dell'annotazione. Tipo: booleano
Predefinito: true
|
| Filtro annotazioni display |
Se impostato su true, nel grafico verrà visualizzato un controllo filtro per filtrare le annotazioni. Utilizza questa opzione quando sono presenti molte annotazioni. Tipo: booleano
Predefinito: falso
|
| 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
|
| valoriValori esatti |
Consente di indicare se visualizzare una versione abbreviata e arrotondata 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: falso
|
| displayLegendDots |
Indica se visualizzare punti accanto ai valori nel testo della legenda se "true" significa sì. Tipo: booleano
Predefinito: true
|
| DisplayLegendValues |
Indica se visualizzare i valori evidenziati nella legenda se "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 significa no. La struttura nel selettore dello zoom è una versione in scala di log della prima serie del grafico, in scala per adattarsi all'altezza del selettore di zoom. Tipo: booleano
Predefinito: true
|
| displayZoomButton |
Indica se mostrare i pulsanti di zoom ("1g 5g 1m" e così via), dove false significa no. Tipo: booleano
Predefinito: true
|
| fill |
Un numero compreso tra 0 e 100 (inclusivo) che indica l'alfa del riempimento sotto ogni riga del grafico. 100 significa 100% opaco e 0 significa nessun riempimento. Il colore di riempimento è lo stesso colore della riga 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à regolato in modo da mostrare il segno di spunta principale successivo sopra il punto dati massimo. Questo avrà la precedenza sul valore massimo dell'asse Y determinato da Simile a Tipo: numero
Predefinito: automatica
|
| 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à regolato in modo da mostrare il segno di spunta successivo successivo sotto il punto dati minimo. Questo avrà la precedenza sul minimo dell'asse Y determinato da Simile a Tipo: numero
Predefinito: automatica
|
| numeroFormati |
Specifica i modelli di 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 una mappa di numeri:coppie di stringhe
Predefinito: automatica
|
| scaleColonne |
Specifica i valori da mostrare sui segni di graduazione dell'asse Y nel grafico. L'impostazione predefinita prevede una sola scala sul lato destro, che si applica a entrambe le serie, ma puoi avere angoli diversi del grafico scalati a valori di serie diversi. Questa opzione prevede un array da zero a tre numeri che specifica l'indice (basato su zero) della serie da utilizzare come valore della scala. La posizione in cui vengono visualizzati questi valori dipende dal numero di valori inclusi nell'array:
Se visualizzi più di una scala, è consigliabile impostare l'opzione Tipo: matrice di numeri
Predefinito:automatico
|
| Formato Scala |
Formato numerico da utilizzare per le etichette di graduazione asse. Il valore predefinito di Tipo: stringa
Predefinito: "#"
|
| Tipo di scala |
Imposta i valori massimo e minimo mostrati sull'asse Y. Sono disponibili le seguenti opzioni:
Se specifichi le opzioni min e/o max, queste avranno la precedenza sui valori minimo e massimo determinati dal tipo di scala. Tipo: stringa
Predefinito: "fissa"
|
| tabella |
Contiene opzioni relative alla tabella delle annotazioni. Per specificare le proprietà di questo oggetto, puoi utilizzare la notazione letterale dell'oggetto:
var options: {
table: {
sortAscending: true,
sortColumn: 1
}
};
Tipo: oggetto
Predefinito: null
|
| tavolo.sortAscending |
Se impostato su Tipo: booleano
Predefinito: falso
|
| tabella.sortColonna |
L'indice della colonna della tabella delle annotazioni in base alla quale verranno ordinate. 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 (inclusivo) che indica lo spessore delle righe, dove 0 è il più sottile. Tipo: numero
Predefinito: 0
|
| ora di fine zoom |
Imposta la data e l'ora di fine dell'intervallo di zoom selezionato. Tipo: data
Predefinito: nessuno
|
| ZoomInizia |
Imposta la data/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 all'elemento container contenente il grafico delle annotazioni. Tipo di reso: gestisci un elemento DOM
|
getSelection() |
Implementazione Tipo di reso: array di elementi di selezione
|
getVisibleChartRange() |
Restituisce un oggetto con le proprietà
Tipo di reso:
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) |
Consente di impostare 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 essere state nascoste utilizzando il metodo Tipo di reso: nessuno
|
Eventi
| Nome | |
|---|---|
rangechange |
Attivato quando l'utente modifica il dispositivo di scorrimento dell'intervallo. I nuovi endpoint a 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 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 Proprietà: nessuna
|
select |
Attivato quando l'utente fa clic su un'entità visiva. Per sapere cosa è stato selezionato, chiama il numero
Proprietà: nessuna
|
Norme sui dati
Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato ad alcun server.