Questa pagina è stata tradotta dall'API Cloud Translation.

Cronologia annotata

Panoramica
Esempio
Caricamento in corso…
Formato dei dati
Opzioni di configurazione
Metodi
Eventi
Norme sui dati
Notes

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 date o datetime e specifica il valore X del punto sul grafico. Se questa colonna è di tipo date (e non datetime), 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 displayAnnotations su true. Puoi utilizzare i tag HTML se imposti allowHtml su true. 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 `draw()` su questa visualizzazione. Ridisegna solo l'area del grafico. Per utilizzare questa opzione, devi soddisfare i seguenti requisiti: allowRedraw deve essere true displayAnnotazioni devono essere false (in altre parole, non è possibile mostrare annotazioni) devi trasferire le stesse opzioni e gli stessi valori (ad eccezione di allowRedraw e displayAnnotazioni) della tua prima chiamata a `draw()`.
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: "più vicino" - I valori più vicini all'asse X al mouse. "last" - L'insieme di valori successivo alla sinistra del mouse.
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 non specificato, viene utilizzato il pattern del formato predefinito. Se si specifica un singolo pattern di stringa, questo viene utilizzato per tutti i valori. Se viene specificata una mappa, le chiavi sono indici (in base a zero) di serie e i valori sono i pattern da utilizzare per formattare la serie specificata. Non è necessario includere un formato per ogni serie nel grafico; tutte le serie non specificate utilizzeranno il formato predefinito. Se questa opzione viene specificata, l'opzione `displayExactValues` viene ignorata.
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: Se specifichi un array vuoto, il grafico non mostrerà i valori Y accanto ai segni di graduazione. Se specifichi un valore, la scala della serie indicata verrà visualizzata solo sul lato destro del grafico. Se specifichi due valori, verrà aggiunta una scala per la seconda serie a destra del grafico. Se specifichi tre valori, verrà aggiunta una scala per la terza serie al centro del grafico. Qualsiasi valore dopo il terzo dell'array verrà ignorato. Quando visualizzi più di una scala, è consigliabile impostare l'opzione `scaleType` su "allfixed" o "allmaximized".
scaleType	stringa	"fisso"	Imposta i valori massimo e minimo visualizzati sull'asse Y. Sono disponibili le seguenti opzioni: "maximized": l'asse Y estenderà il valore dal minimo ai massimi della serie. Se hai più di una serie, utilizza allmaximized. "fixed" [valore predefinito]: l'asse Y varia in base ai valori dei valori dei dati: Se tutti i valori sono >=0, l'asse Y si estenderà da zero fino al valore massimo dei dati. Se tutti i valori sono <=0, l'asse Y si estenderà da zero al valore minimo dei dati. Se i valori sono sia positivi che negativi, l'asse Y andrà dal massimo al minimo della serie. Per più serie, utilizza "allfixed". "allmaximized" - Uguale a "maximized", ma utilizzato quando vengono visualizzate più scale. Entrambi i grafici saranno ingranditi all'interno della stessa scala, il che significa che verrà rappresentato in modo ingannevole rispetto all'asse Y, ma se passi il mouse sopra ogni serie verrà visualizzato il valore reale. "allfixed" - Uguale a "fixed", ma utilizzato quando vengono visualizzate più bilance. Questa impostazione regola ogni scala in base alla serie a cui si applica (da usare insieme a `scaleColumns`). 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`.	`start`: data. L'ora di inizio dell'intervallo di zoom. `end`: data. L'ora di fine dell'intervallo di zoom.
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.