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

Un grafico ad area visualizzato come immagine utilizzando l'API di Google grafici.

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

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 è il valore dell'asse Y allo stesso punto dell'asse X e la visualizzazione li collega con una linea retta, quindi riempie l'area sotto la riga.

I dati vengono elaborati per colonna, a partire dalla colonna zero e aumentando di conseguenza. Devi prima scrivere le righe più alte e poi quelle più basse, perché se hai tracciato prima una riga più bassa, una riga più alta viene sovrapposta a eventuali righe inferiori. Pertanto, prova a fare in modo che la colonna 1 abbia punti più alti della colonna 2, colonna 2 superiore alla colonna 3 e così via. Se una colonna a destra ha uno o due punti in più rispetto a una colonna a sinistra, potrebbe oscurare parzialmente la riga inferiore, ma dovrebbe comunque essere visibile.

Tutti i dati devono essere di tipo numerico, ad eccezione del primo, che può essere numerico o stringa. Se la prima colonna è di tipo stringa, le prime voci della colonna verranno visualizzate come etichette sulla X. Se la prima colonna è un numero, non verranno mostrate etichette dell'asse X. Tutte le colonne (tranne la prima) devono essere numeri. Non è previsto alcun limite al numero di colonne.

Opzioni di configurazione

Nome Tipo Predefinito Descrizione
coloredisfondo string "#FFFFFF" (bianco) Il colore dello sfondo del grafico nel formato colore dell'API Chart.
colori Array<string> Automatica Utilizzalo per assegnare colori specifici a ogni serie di dati. I colori sono specificati nel formato colore dell'API Chart. Il colore i viene utilizzato per la colonna dati i, che torna all'inizio se sono presenti più colonne dati di colori. Se le varianti di un singolo colore sono accettabili per tutte le serie, utilizza invece l'opzione color.
abilitareEventi boolean false Di conseguenza, i grafici generano eventi attivati dagli utenti, come clic o clic del mouse. Supportato solo per tipi di grafici specifici. Vedi Eventi di seguito.
height number Altezza del container Altezza del grafico in pixel.
leggenda string "a destra" Posizione e tipo di legenda. Può corrispondere a uno dei seguenti:
  • "a destra": a destra del grafico.
  • "A sinistra": a sinistra del grafico.
  • "top": sopra il grafico.
  • 'bottom': sotto il grafico.
  • "nessuna": non viene visualizzata nessuna legenda.
max number automatico Il valore massimo da mostrare nell'asse Y.
min number automatico Il valore minimo da mostrare sull'asse Y.
showCategoryLabel boolean true Se impostato su false, le etichette delle categorie (le etichette dell'asse X) vengono rimosse.
showValueLabel boolean true Se impostato su false, le etichette dei valori vengono rimosse, ovvero le etichette dell'asse Y.
title string nessun titolo Testo da visualizzare sopra il grafico.
valueLabelInterval number Automatica L'intervallo con cui mostrare le etichette dell'asse del valore. Ad esempio, se min è 0, max è 100 e valueLabelsInterval è 20, il grafico mostrerà le etichette dell'asse a (0, 20, 40, 60, 80 100).
width number 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 immagine generico.

Norme sui dati

Fai riferimento alle norme di logging dell'API Chart.