Visualizzazione: Sparkline (immagine)

Importante: la sezione relativa alle tabelle delle immagini di Google Chart Tools è stata ufficialmente ritirata a partire dal 20 aprile 2012. Continuerà a funzionare come previsto dalle nostre norme sul ritiro.

  1. Panoramica
  2. Esempio
  3. Caricamento in corso…
  4. Formato dei dati
  5. Opzioni di configurazione
  6. Metodi
  7. Eventi
  8. Norme sui dati

Panoramica

Uno o più Sparkline visualizzati con le immagini utilizzando l'API Google Tables. Le immagini sono contenute in una tabella HTML.

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:["imagesparkline"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
         ['Revenue', 'Licenses'],
         [435, 132],
         [438, 131],
         [512, 137],
         [460, 142],
         [491, 140],
         [487, 139],
         [552, 147],
         [511, 146],
         [505, 151],
         [509, 149]
        ]);

        var chart = new google.visualization.ImageSparkLine(document.getElementById('chart_div'));

        chart.draw(data, {width: 120, height: 40, showAxisLines: false,  showValueLabels: false, labelPosition: 'left'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 120px; height: 40px;"></div>
  </body>
</html>

Caricamento

Il nome del pacchetto google.charts.load è "imagesparkline". 

  google.charts.load("current", {packages: ["imagesparkline"]});

Il nome della classe della visualizzazione è google.visualization.ImageSparkLine. 

  var visualization = new google.visualization.ImageSparkLine(container);

Formato dei dati

Qualsiasi numero di colonne. Tutte le colonne devono essere numeri. Ogni colonna viene visualizzata come una singola Sparkline.

Opzioni di configurazione

Nome Tipo Predefinito Descrizione
colore string Specifica un colore da utilizzare per tutti i grafici. Una stringa nel formato #rrggbb. Ad esempio: "#00cc00". Utilizzata solo se l'opzione colors non è specificata.
colori Array di stringhe Colori predefiniti I colori da utilizzare per le colonne di dati. Un array di stringhe in cui ogni elemento è una stringa nel formato #rrggbb. Ad esempio: "#00cc00". Il colore i viene utilizzato per la colonna dati i. Se il numero di colori è inferiore a quello delle colonne, la selezione del colore verrà aggregata.
fill boolean false Se true, riempirà l'area sotto la linea a colori.
height number Altezza del container Altezza delle immagini, in pixel.
etichettaPosizione string Nessuno La posizione delle etichette. I valori supportati sono "nessuno", "sinistra", "destra".
max Array di numeri Il valore massimo dei dati di ogni Sparkline Il valore più alto per l'intervallo di valori dei dati di ogni sparkline. L'indice nell'array deve corrispondere all'indice della colonna nella tabella Data. Se tutti i valori sono null, questo sarà il valore massimo nella serie.
min Array di numeri Il valore minimo dei dati di ogni Sparkline Il valore più basso per l'intervallo di valori dei dati di ogni sparkline. L'indice nell'array deve corrispondere all'indice della colonna nella tabella Data. Se tutti i valori sono null, questo sarà il valore minimo nella serie.
lineeAxisShow boolean true Se true, vengono mostrate le linee degli assi. Se è false, le opzioni non sono valide e il valore predefinito per showValueLabel è falso.
showValueLabel boolean true, tranne quando showAxisLines è false. Se true, vengono mostrate le etichette dell'asse dei valori.
title Array di stringhe Nessun titolo visualizzato Titoli da utilizzare per ogni sparkline.
width number Larghezza del container Larghezza dei grafici, in pixel.
layout string "v" Layout verticale o orizzontale: "v" per verticale e "h" per orizzontale.

Metodi

Metodo Tipo restituito Descrizione
draw(data, options) Nessuno Disegna il grafico.
getSelection() Array di elementi di selezione Restituisce gli indici dei grafici selezionati come un array di oggetti. Ogni oggetto ha una proprietà colonna contenente il numero di colonna di uno sparkline selezionato. Può restituire più di una colonna selezionata.
setSelection(selection) Nessuno Seleziona i Sparkline specificati e deseleziona qualsiasi sparkline non specificato. selezione è un array di oggetti, ciascuno con una proprietà numerica column, che è l'indice della sparkline selezionata. Consulta setSelection() per ulteriori informazioni.

Eventi

Nome Descrizione Proprietà
seleziona Evento di selezione standard. Nessuno

Norme sui dati

Fai riferimento alle norme di logging dell'API Chart.