Questa pagina è stata tradotta dall'API Cloud Translation.

Visualizzazione: grafico ad area (versione precedente)

Deprecato

Questa visualizzazione è stata sostituita con una nuova versione; utilizzala. Per una facile migrazione, consulta la pagina delle note di rilascio.

Panoramica

Un grafico ad area visualizzato nel browser tramite SVG o VML. Visualizza suggerimenti quando fai clic sui punti. Anima le righe facendo clic sulle voci delle legende.

Di: Google

Esempio

Codifica il codice in Visualview Playground

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["areachart"]});
      google.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.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

Caricamento

Il nome del pacchetto google.load è "areachart".

  google.load("visualization", "1", {packages: ["areachart"]});

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

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

Formato dei dati

La prima colonna deve essere una stringa e contenere l'etichetta della categoria. Può essere seguito da un numero qualsiasi di colonne, tutte numeriche. Ogni colonna viene visualizzata come una riga separata.

Opzioni di configurazione

Nome	Tipo	Predefinito	Descrizione
ColoreAsse	stringa o oggetto	colore predefinito	Il colore dell'asse. I valori possibili sono quelli dell'opzione di configurazione backgroundColor.
ColoreAsseSfondoAsse	stringa o oggetto	colore predefinito	Il bordo attorno allo sfondo dell'asse. I valori possibili sono quelli dell'opzione di configurazione backgroundColor.
DimensioneAsseFont	number	automatico	Dimensioni del carattere del testo dell'asse del grafico, in pixel.
ColoreColore	stringa o oggetto	colore predefinito	Il colore dello sfondo dell'area principale del grafico. Potrebbe essere una delle seguenti opzioni: Una stringa con colore supportato da HTML, ad esempio "rosso" o "#00cc00" Un oggetto con le proprietà `stroke` `fill` e `strokeSize`. `stroke` e `fill` devono essere una stringa con un colore. beatSize è un numero. Ad esempio: `{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}`. Per usare semplicemente il riempimento, senza un tratto, utilizza `stroke:null, strokeSize: 0`.
bordoColore	stringa o oggetto	colore predefinito	Il bordo intorno agli elementi del grafico. I valori possibili sono quelli dell'opzione di configurazione backgroundColor.
colori	Array di stringhe	Colori predefiniti	I colori da utilizzare per gli elementi del grafico. Un array di stringhe. Ogni elemento è una stringa di un colore supportato dal codice HTML, ad esempio "rosso" o "#00cc00".
Attiva strumenti	boolean	true	Se è impostato su true, le descrizioni comando vengono visualizzate quando l'utente fa clic su un punto dati.
Colore bordo funzione	stringa o oggetto	colore predefinito	Il bordo intorno agli elementi del grafico a fuoco (indicati dal mouse). I valori possibili sono quelli dell'opzione di configurazione backgroundColor.
height	number	Altezza del container	Altezza del grafico in pixel.
in pila	boolean	false	Se impostato su true, i valori delle linee vengono sovrapposti (accumulati).
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.
legendBackgroundColor	stringa o oggetto	colore predefinito	Il colore dello sfondo per l'area della legenda del grafico. I valori possibili sono quelli dell'opzione di configurazione backgroundColor.
legendFontSize	number	automatico	Le dimensioni del carattere della legenda, in pixel.
legendTextText	stringa o oggetto	colore predefinito	Il colore del testo della legenda. I valori possibili sono quelli dell'opzione di configurazione backgroundColor.
dimensioni linea	number	2	Spessore della linea in pixel. Utilizza zero per nascondere tutte le righe e mostrare solo i punti.
Scala logaritmica	boolean	false	Se true, l'asse principale deve essere ridimensionato in modo logaritmico.
max	number	automatico	Specifica la linea della griglia dell'asse Y più alta. La linea effettiva della griglia sarà il maggiore tra due valori: il valore massimo dell'opzione o il valore dei dati più alto, arrotondato per eccesso al segno della griglia superiore successivo.
min	number	automatico	Specifica la linea della griglia dell'asse Y più bassa. La linea effettiva della griglia sarà il valore più basso di due valori: il valore minimo dell'opzione o il valore dei dati più basso, arrotondato per difetto al segno di griglia inferiore successivo.
dimensionePunto	number	3	Dimensioni dei punti visualizzati, in pixel. Usa il tasto zero per nascondere tutti i punti.
inversioneInassi	boolean	false	Se il criterio è impostato su true, le categorie verranno tracciate da destra a sinistra. L'impostazione predefinita è il disegno da sinistra a destra.
mostraCategorie	boolean	true	Se true, verranno mostrate le etichette delle categorie. Se è false, non verrà visualizzata.
title	string	nessun titolo	Testo da visualizzare sopra il grafico.
titoloX	string	nessun titolo	Testo da visualizzare sotto l'asse orizzontale.
titoloY	string	nessun titolo	Testo da visualizzare sull'asse verticale.
coloreColore	stringa o oggetto	colore predefinito	Il colore per il titolo del grafico. I valori possibili sono quelli dell'opzione di configurazione backgroundColor.
titleFontSize	number	automatico	La dimensione in caratteri del titolo del grafico, in pixel.
tooltipFontSize	number	11	Le dimensioni del carattere del testo della descrizione comando. La descrizione potrebbe essere ridotta se la descrizione comando è troppo piccola per contenere il testo nel carattere specificato.
Descrizione comando Altezza	number	60	L'altezza della descrizione comando, in pixel. L'altezza della descrizione comando è fissa e non aumenta o si restringe mai per adattarsi alla lunghezza o alla dimensione del carattere. Tuttavia, i valori superiori a 1/3 dell'altezza del grafico verranno ritagliati.
Descrizione comando Larghezza	number	120	La larghezza della descrizione comando in pixel. La larghezza della descrizione comando è fissa e non aumenta o si restringe mai per adattarsi alla lunghezza o alla dimensione del carattere. Tuttavia, ciò che è maggiore della larghezza del grafico verrà ritagliato.
width	number	Larghezza del container	Larghezza del grafico in pixel.

Metodi

Metodo	Tipo restituito	Descrizione
`draw(data, options)`	Nessuno	Disegna il grafico.
`getSelection()`	Array di elementi di selezione	Implementazione standard di `getSelection()`. Gli elementi selezionati sono elementi di colonna e cella. L'utente può selezionare una sola colonna o cella alla volta.
`setSelection()`	Nessuno	Implementazione `setSelection()` standard, ma supporta la selezione di un solo elemento. Tratta ogni voce di selezione come una colonna o una selezione di celle. Tieni presente che la colonna dell'etichetta non può essere selezionata.

Eventi

Nome	Descrizione	Proprietà
`onmouseover`	Attivato quando l'utente passa il mouse sopra un punto e passa agli indici di riga e di colonna della cella corrispondente.	riga, colonna
`onmouseout`	Attivato quando l'utente allontana il puntatore del mouse da un punto e passa gli indici di riga e di colonna della cella corrispondente.	riga, colonna
`ready`	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 chiamarlo solo dopo l'attivazione dell'evento	Nessuno
`select`	Attivato quando l'utente fa clic su un punto o una legenda. Quando viene selezionato un punto, viene selezionata la cella corrispondente nella tabella dati; quando viene selezionata una legenda, viene selezionata la colonna corrispondente nella tabella dati. Per sapere cosa è stato selezionato, chiama il numero `getSelection()`.	Nessuno

Norme sui dati

Tutto il codice e i dati vengono elaborati e visualizzati nel browser. Nessun dato viene inviato ad alcun server.