Panoramica
Un grafico a linee interattivo delle serie temporali con annotazioni facoltative.
La sequenza temporale annotata ora utilizza automaticamente i grafici di annotazione.
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':['annotatedtimeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sold Pencils');
data.addColumn('string', 'title1');
data.addColumn('string', 'text1');
data.addColumn('number', 'Sold Pens');
data.addColumn('string', 'title2');
data.addColumn('string', 'text2');
data.addRows([
[new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
[new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
[new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
[new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
[new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
[new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
]);
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
chart.draw(data, {displayAnnotations: true});
}
</script>
</head>
<body>
// Note how you must specify the size of the container element explicitly!
<div id='chart_div' style='width: 700px; height: 240px;'></div>
</body>
</html>
Importante : per utilizzare questa visualizzazione, devi specificare l'altezza e la larghezza dell'elemento
contenitore in modo esplicito nella pagina. Ad esempio: <div id="chart_div"
style="width:400; height:250"></div>.
Caricamento in corso...
Il nome del pacchetto google.charts.load è "annotatedtimeline"
google.charts.load("current", {packages: ['annotatedtimeline']});
Il nome della classe della visualizzazione è google.visualization.AnnotatedTimeLine
var visualization = new google.visualization.AnnotatedTimeLine(container);
Formato dei dati
Nel grafico puoi visualizzare una o più linee. Ogni riga rappresenta una posizione X nel grafico, ovvero un'ora specifica; 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 | Tipo | Predefinita | Descrizione |
|---|---|---|---|
| allowHtml | boolean | false | Se impostato su true, qualsiasi testo dell'annotazione che include tag HTML verrà visualizzato come HTML. |
| allowRedraw | boolean | false | Consente una tecnica di ridisegno più efficiente per la seconda chiamata e quelle successive
a
|
| allValuesSuffix | stringa | Nessuno | Un suffisso da aggiungere a tutti i valori nelle scale e nella legenda. |
| annotationsWidth | numero | 25 | La larghezza (in percentuale) dell'area delle annotazioni rispetto all'intera area del grafico. Deve essere un numero compreso tra 5 e 80. |
| colori | Array di stringhe | Colori predefiniti | 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". |
| dateFormat | stringa | Può essere "MMMM dd, yyyy" o "HH:mm MMMM dd, yyyy", a seconda del tipo di prima colonna (rispettivamente data o data/ora). | Il formato utilizzato per visualizzare le informazioni sulla data nell'angolo in alto a destra. Il formato di questo campo è quello specificato dalla classe java SimpleDateFormat. |
| displayAnnotations | boolean | false | Se il criterio viene impostato su true, il grafico mostrerà le annotazioni sopra i valori selezionati. 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. |
| displayAnnotationsFilter | boolean | false | Se il criterio viene impostato su true, il grafico mostrerà un controllo di filtro per filtrare le annotazioni. Utilizza questa opzione quando sono presenti molte annotazioni. |
| displayDateBarSeparator | boolean | true | Indica se visualizzare un piccolo separatore a barre ( | ) tra i valori della serie e la data nella legenda, dove true significa sì. |
| displayExactValues | boolean | false | 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. |
| displayLegendDots | boolean | true | Indica se visualizzare i punti accanto ai valori nel testo della legenda, dove vero significa sì. |
| displayLegendValues | boolean | true | Indica se visualizzare i valori evidenziati nella legenda, dove true significa sì. |
| displayRangeSelector | boolean | true | 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 dell'ultima serie nel grafico, ridimensionata per adattarsi all'altezza del selettore di zoom. |
| displayZoomButtons | boolean | true | Indica se mostrare i link di zoom ("1d 5d 1m" e così via), dove false significa no. |
| fill | numero | 0 | Un numero compreso tra 0 e 100 (incluso) che specifica l'alfa del riempimento sotto ogni riga del grafico a linee. 100 indica un riempimento opaco al 100%, 0 indica nessun riempimento. Il colore di riempimento è dello stesso colore della linea sopra. |
| highlightDot | stringa | 'più vicino' | Il punto della serie da evidenziare e i valori corrispondenti da mostrare nella legenda. Seleziona uno di questi valori:
|
| legendPosition | stringa | "sameRow" | Indica se inserire la legenda colorata nella stessa riga con i pulsanti di zoom e la data ("sameRow") o in una nuova riga ("newRow"). |
| max | numero | automatico | 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 scaleType. |
| min | numero | automatico | 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 scaleType. |
| numberFormats | Stringa o mappa di coppie number:String | automatico | 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 |
| scaleColumns | array di numeri | Automatico | Specifica i valori da mostrare sui segni di graduazione dell'asse Y nel grafico. L'impostazione predefinita prevede un'unica scala sul lato destro, che si applica a entrambe le serie, ma è possibile 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 questi valori vengono visualizzati dipende da quanti valori includi nell'array:
Quando visualizzi più di una scala, è consigliabile impostare l'opzione |
| scaleType | stringa | "fisso" | 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. |
| spessore | numero | 0 | Un numero compreso tra 0 e 10 (incluso) che specifica lo spessore delle linee, dove 0 è il valore più sottile. |
| modalità Wmode | stringa | "finestra" | Il parametro Modalità finestra (wmode) per il grafico Flash. I valori disponibili sono: "opaque", "window" o "transparent". |
| zoomEndTime | Data | Nessuno | Imposta la data e l'ora di fine dell'intervallo zoom selezionato. |
| zoomStartTime | Data | Nessuno | Imposta la data e l'ora di inizio dell'intervallo di zoom selezionato. |
Metodi
| Metodo | Tipo restituito | Descrizione |
|---|---|---|
draw(data, options) |
Nessuno | Disegna il grafico. Puoi accelerare il tempo di risposta per la seconda chiamata
a draw() e successive utilizzando la proprietà allowRedraw. |
getSelection() |
Array di elementi di selezione | Implementazione standard di getSelection(). Gli elementi selezionati sono elementi di celle. L'utente può selezionare una sola cella alla volta. |
getVisibleChartRange() |
Un oggetto con le proprietà start e end |
Restituisce un oggetto con le proprietà start e end, ognuna delle quali è un oggetto Date, e rappresenta la selezione temporale corrente. |
hideDataColumns(columnIndexes) |
Nessuno | 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. |
setVisibleChartRange(start, end) |
Nessuno | Imposta l'intervallo visibile (zoom) sull'intervallo specificato.
Accetta due parametri di tipo Date che rappresentano la prima e l'ultima volta dell'intervallo visibile selezionato desiderato. Imposta start su null per includere tutto, dalla prima data a end; imposta end su null per includere tutto, dalla data start all'ultima data. |
showDataColumns(columnIndexes) |
Nessuno | Mostra le serie di dati specificate dal grafico, dopo che sono state nascoste
utilizzando il metodo hideDataColumns.
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. |
Eventi
| Nome | Descrizione | Proprietà |
|---|---|---|
| Rangechange | Intervallo zoom modificato. Attivato dopo che l'utente ha modificato l'intervallo di tempo visibile, ma non dopo una chiamata al metodo setVisibleChartRange.Nota: si consiglia di non utilizzare le proprietà dell'evento, ma piuttosto di ottenerle chiamando il metodo getVisibleChartRange. |
|
| pronta | 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 richiamare i metodi solo dopo che l'evento è stato attivato |
Nessun valore |
| select | Quando l'utente fa clic su un flag di annotazione (indicatore), viene selezionata la cella corrispondente nella tabella di dati. La visualizzazione attiva quindi questo evento. | Nessun valore |
Nota: a causa di alcune limitazioni, gli eventi potrebbero non essere generati se accedi alla pagina nel browser come file (ad esempio, "file://") anziché da un server (ad es. "http://www").
Norme sui dati
Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato a nessun server.
Note
A causa delle impostazioni di sicurezza di Flash, questa visualizzazione (e tutte le visualizzazioni basate su Flash) potrebbe non funzionare correttamente se si accede dalla posizione di un file nel browser (ad es. file:///c:/webhost/myhost/myviz.html) anziché dall'URL di un server web (ad es. http://www.myhost.com/myviz.html). In genere si tratta solo di un problema di test. Puoi risolvere questo problema come descritto sul sito web di Macromedia.