Visualizzazione: sparkline (immagine)

Importante. La sezione Grafici immagine di Google Chart Tools è stata ufficialmente ritirata il 20 aprile 2012. Continuerà a funzionare in base alle nostre norme relative al 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 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 in corso...

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 un singolo sparkline.

Opzioni di configurazione

Nome Tipo Predefinita Descrizione
color stringa Specifica un colore da utilizzare per tutti i grafici. Una stringa nel formato #rrggbb. Ad esempio: "#00cc00". Da utilizzare 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 di dati i. Se il numero di colori è inferiore al numero di colonne, la selezione del colore andrà a capo.
fill boolean false Se il valore è true, l'area sotto la linea viene riempita a colori.
altezza numero Altezza container Altezza delle immagini, in pixel.
labelPosition stringa Nessuno La posizione delle etichette. I valori supportati sono "none", "left", "right".
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 di dati. Se tutti i valori sono null, questo sarà il valore massimo della 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 di dati. Se tutti i valori sono null, questo sarà il valore minimo nella serie.
showAxisLines boolean true Se impostato su true, vengono mostrate le linee degli assi. Se il valore è false, non lo sono e il valore predefinito per showValueLabel è false.
showValueLabels boolean true, tranne quando showAxisLines è false. Se impostato su true, vengono visualizzate le etichette dell'asse dei valori.
title Array di stringhe Nessun titolo visualizzato Titoli da utilizzare per ogni sparkline.
larghezza numero Larghezza del container Larghezza dei grafici, in pixel.
layout stringa "V" Layout verticale o orizzontale: "v" per verticale, "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 array di oggetti. Ogni oggetto ha una proprietà column contenente il numero di colonna di uno sparkline selezionato. Può restituire più di una colonna selezionata.
setSelection(selection) Nessuno Consente di selezionare gli sparkline specificati e di deselezionare quelli non specificati. La selezione è un array di oggetti, ciascuno con una proprietà column numerica, che rappresenta l'indice dello sparkline selezionato. Consulta setSelection() per ulteriori informazioni.

Eventi

Nome Descrizione Proprietà
select Evento di selezione standard. Nessun valore

Norme sui dati

Consulta le norme di logging dell'API Chart.