Sequenza temporale annotata

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 o datetime e specifica il valore X del punto sul grafico. Se questa colonna è di tipo date (e non datetime), 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 imposti allowHtml su true; 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 draw() su questa visualizzazione. Riduce solo l'area del grafico. Per utilizzare questa opzione, devi soddisfare i seguenti requisiti:

  • allowRedraw deve essere vero
  • Le annotazioni display devono essere false (non è possibile mostrare annotazioni)
  • devi passare nelle stesse opzioni e valori (tranne per allowRedraw e displayAnnotazioni) della prima chiamata a draw().
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:

  • "più vicino": i valori più vicini all'asse X del mouse.
  • "last": l'insieme di valori successivo a sinistra del mouse.
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 non specificato, viene utilizzato il pattern di formato predefinito.
  • Se viene specificato un singolo pattern di stringa, viene utilizzato per tutti i valori.
  • Se viene specificata una mappa, le chiavi sono indici di serie (basati su zero) e i valori sono i pattern da utilizzare per formattare la serie specificata.
    Non è necessario includere un formato per ogni serie nel grafico; qualsiasi serie non specificata utilizzerà il formato predefinito.

Se questa opzione è specificata, l'opzione displayExactValues viene ignorata.

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 specifichi una matrice vuota, il grafico non mostrerà 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, a destra del grafico verrà aggiunta una scala per la seconda serie.
  • Se specifichi tre valori, verrà aggiunta una scala per la terza serie al centro del grafico.
  • Eventuali valori dopo il terzo nell'array verranno ignorati.

Se visualizzi più di una scala, è consigliabile impostare l'opzione scaleType su "allfixed" o "allmaximized".

Tipo di scala string "fisso"

Imposta i valori massimo e minimo mostrati sull'asse Y. Sono disponibili le seguenti opzioni:

  • "massimizzato": l'asse Y comprenderà il valore minimo e massimo dei valori della serie. Se hai più di una serie, utilizza Allmaimized.
  • 'fixed' [default]. L'asse Y varia a seconda dei valori dei valori dei dati:
    • Se tutti i valori sono maggiori di 0, l'asse Y spazierà da zero al valore massimo dei dati.
    • Se tutti i valori sono <=0, l'asse Y comprenderà zero e il valore minimo dei dati.
    • Se i valori sono positivi e negativi, l'asse Y va dal valore massimo della serie a quello minimo.

      Per più serie, utilizza "allfixed".
  • "allmaximized": equivale a "maximized", ma utilizzato quando vengono visualizzate più bilance. Entrambi i grafici saranno massimizzati nella stessa scala, il che significa che uno verrà rappresentato in modo ingannevole sull'asse Y, ma passando il mouse sopra ogni serie ne mostrerà il valore reale.
  • "allfixed": uguale a "fixed", ma utilizzato quando vengono visualizzate più scale. Questa impostazione regola ogni scala in base alla serie a cui si applica (utilizzala insieme a scaleColumns)

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.
  • 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 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.