Visualizzazione: grafico ad area (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

Un grafico ad area che viene visualizzato come immagine utilizzando l'API Google Profiles.

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

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

        chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Caricamento in corso...

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

  google.charts.load('current', {packages: ['imageareachart']});

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

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

Formato dei dati

Ogni colonna rappresenta una linea nel grafico. Ogni voce corrisponde al valore dell'asse Y nello stesso punto dell'asse X e la visualizzazione le collega a una linea retta, per poi riempire l'area sotto la linea.

I dati vengono elaborati per colonna, a partire dalla colonna zero e in aumento. Devi scrivere prima le righe più alte e poi quelle inferiori, perché se dipingi prima una linea inferiore, quelle più alte nascondono quelle più basse. Di conseguenza, prova a impostare la colonna 1 con punti più alti della colonna 2, la colonna 2 più in alto rispetto alla colonna 3 e così via. Se su una colonna di destra ci sono uno o due punti più in alto rispetto a una colonna di sinistra, la riga inferiore potrebbe essere parzialmente coperta, ma dovrebbe essere comunque visibile.

Tutti i dati devono essere di tipo numerico, tranne il primo, che può essere numerico o stringa. Se la prima colonna è di tipo stringa, le voci delle prime colonne verranno visualizzate come etichette sulla X; se la prima colonna è un numero, non verrà visualizzata alcuna etichetta dell'asse X. Tutte le colonne (tranne la prima) devono essere numeri. Non c'è limite al numero di colonne.

Opzioni di configurazione

Nome Tipo Predefinita Descrizione
backgroundColor stringa '#FFFFFF' (bianco) Il colore di sfondo del grafico nel formato colore API Chart.
colori Array<stringa> Auto Utilizza questa opzione per assegnare colori specifici a ogni serie di dati. I colori sono specificati nel formato dei colori dell'API Chart. Il colore i viene utilizzato per la colonna di dati i, passando all'inizio se ci sono più colonne di dati che colori. Se le variazioni di un singolo colore sono accettabili per tutte le serie, utilizza invece l'opzione color.
enableEvents boolean false Consente ai grafici di generare eventi attivati dall'utente, come clic o mouse sopra. Supportata solo per tipi di grafici specifici. Consulta la sezione Eventi riportata di seguito.
altezza numero Altezza container Altezza del grafico in pixel.
leggenda stringa "destra" Posizione e tipo di legenda. Può corrispondere a uno dei seguenti:
  • "destra": a destra del grafico.
  • "left": a sinistra del grafico.
  • 'top' - Sopra il grafico.
  • "bottom": sotto il grafico.
  • "none": non viene visualizzata alcuna legenda.
max numero automatico Il valore massimo da mostrare sull'asse Y.
min numero automatico Il valore minimo da mostrare sull'asse Y.
showCategoryLabels boolean true Se impostato su false, rimuove le etichette delle categorie (le etichette dell'asse X).
showValueLabels boolean true Se impostato su false, rimuove le etichette dei valori (le etichette dell'asse Y).
title stringa nessun titolo Testo da visualizzare sopra il grafico.
valueLabelsInterval numero Auto L'intervallo in cui visualizzare le etichette dell'asse dei valori. Ad esempio, se min è 0, max è 100 e valueLabelsInterval è 20, il grafico mostrerà le etichette degli assi su (0, 20, 40, 60, 80 100).
larghezza numero Larghezza del container Larghezza del grafico in pixel.

Metodi

Metodo Tipo restituito Descrizione
draw(data, options) Nessuno Disegna il grafico.

Eventi

Puoi registrarti per ascoltare gli eventi descritti nella pagina Grafico immagini generico.

Norme sui dati

Consulta le norme di logging dell'API Chart.