Panoramica
Un grafico a linee interattivo della serie temporale con annotazioni facoltative.
La sequenza temporale annotata ora utilizza automaticamente i grafici di annotazioni.
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 esplicitamente l'altezza e la larghezza dell'elemento contenitore sulla tua pagina. Ad esempio: <div id="chart_div"
style="width:400; height:250"></div>
.
Caricamento
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
Puoi visualizzare una o più linee nel grafico. Ogni riga rappresenta una posizione X sul grafico, ovvero un orario specifico; ogni riga è descritta da un insieme di colonne da una a tre.
- La prima colonna è di tipo
date
odatetime
e 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
displayAnnotations
su true. Puoi utilizzare i tag HTML se impostiallowHtml
sutrue
; 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 | Tipo | Predefinito | Descrizione |
---|---|---|---|
consentiHTML | boolean | false | Se è impostato su true, il testo delle annotazioni che include i tag HTML verrà visualizzato come HTML. |
allowRedraw | boolean | false | Consente una tecnica di ricostruzione più efficiente per la seconda e la successiva
chiamata a
|
Sull'Valore di tutti i valori | string | Nessuno | Un suffisso da aggiungere a tutti i valori nelle scale e nella legenda. |
annotazioniLarghezza | number | 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, "rosso" o "#00cc00". |
Formato data | string | "MMMM gg, aaaa" o "HH:mm MMMM gg, aaaa", a seconda del tipo della prima colonna (data o data/ora, rispettivamente). | 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. |
displayAnnotazioni | boolean | false | Se impostato su true, il grafico mostrerà le annotazioni sopra i valori selezionati. 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. |
Filtro annotazioni display | boolean | false | Se impostato su true, nel grafico viene visualizzato un riquadro 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ì. |
valoriValori esatti | boolean | false | 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. |
displayLegendDots | boolean | true | Indica se visualizzare punti accanto ai valori nel testo della legenda se "true" significa sì. |
DisplayLegendValues | boolean | true | Indica se visualizzare i valori evidenziati nella legenda se "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 significa no. La struttura nel selettore dello zoom è una versione in scala di log dell'ultima serie nel grafico, ridimensionata per adattarsi all'altezza del selettore di zoom. |
displayZoomButton | boolean | true | Indica se mostrare i link zoom ("1g 5g 1m" e così via), dove falso significa no. |
fill | number | 0 | Un numero compreso tra 0 e 100 (inclusivo) che specifica l'alfa del riempimento sotto ogni riga del grafico a linee. 100 significa riempimento 100% opaco, 0 significa riempimento assente. Il colore di riempimento è lo stesso colore della linea sopra. |
evidenzia | string | "più vicino" | Il punto della serie da evidenziare e i valori corrispondenti da mostrare nella legenda. Seleziona uno di questi valori:
|
legendPosition | string | "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 | number | 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à 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 scaleType . |
min | number | 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à regolato in modo da mostrare il segno di spunta successivo successivo sotto il punto dati minimo. Questo avrà la precedenza sul minimo asse Y determinato da scaleType . |
numeroFormati | Stringa o una mappa di numeri:coppie di stringhe | automatico | 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 DecimalFormat java.
Se questa opzione è specificata, l'opzione |
scaleColonne | Array di numeri | Automatica | 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. Il valore di questi valori dipende da quanti valori sono inclusi nell'array:
Se visualizzi più di una scala, è consigliabile impostare l'opzione |
Tipo di scala | string | "fisso" | 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. |
spessore | number | 0 | Un numero compreso tra 0 e 10 (inclusivo) che indica lo spessore delle righe, dove 0 è il più sottile. |
Qwiklabs | string | "finestra" | Il parametro Modalità finestra (xxxxxx) per il grafico Flash. I valori disponibili sono: "opaque", "window" o "trasparente". |
ora di fine zoom | Data | Nessuno | Imposta la data e l'ora di fine dell'intervallo di zoom selezionato. |
ZoomInizia | Data | Nessuno | Imposta la data/l'ora di inizio dell'intervallo di zoom selezionato. |
Metodi
Metodo | Tipo restituito | Descrizione |
---|---|---|
draw(data, options) |
Nessuno | Disegna il grafico. Puoi accelerare i tempi di risposta per la seconda e le successive
chiamate a draw() utilizzando la proprietà allowRedraw. |
getSelection() |
Array di elementi di selezione | Implementazione getSelection() standard. Gli elementi selezionati sono elementi cella. 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 , ciascuna delle quali è un oggetto Date , che 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 fa riferimento alla prima serie di dati e così via. |
setVisibleChartRange(start, end) |
Nessuno | Consente di impostare 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. Imposta start su null per includere tutto ciò che è dalla prima data in end; imposta end su null per includere tutto, da 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 fa riferimento alla prima serie di dati e così via. |
Eventi
Nome | Descrizione | Proprietà |
---|---|---|
variazione intervallo | Intervallo zoom modificato. Attivato dopo che l'utente ha modificato l'intervallo di tempo visibile, ma non dopo una chiamata al metodo setVisibleChartRange .Nota: sconsigliamo di utilizzare le proprietà degli eventi, ma di riceverle chiamando il metodo getVisibleChartRange . |
|
pronta | 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 chiamare solo dopo l'attivazione dell'evento |
Nessuno |
seleziona | Quando l'utente fa clic su un flag di annotazione, viene selezionata la cella corrispondente nella tabella dei dati. La visualizzazione attiva questo evento. | Nessuno |
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 ad alcun server.
Note
A causa delle impostazioni di sicurezza di Flash, questa (e tutte le visualizzazioni basate su Flash) potrebbero non funzionare correttamente quando viene eseguito l'accesso da una posizione del file nel browser (ad es. file:///c:/webhost/myhost/myviz.html) anziché da un URL del server web (ad es. http://www.myhost.com/myviz.html). In genere si tratta di un problema di test. Puoi risolvere questo problema come descritto sul sito web di Macromedia.