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 migrazione semplice, fai riferimento alla pagina delle note di rilascio.

Panoramica

Un grafico ad area visualizzato nel browser utilizzando SVG o VML. Visualizza suggerimenti quando si fa clic sui punti. Quando si fa clic sulle voci della legenda, anima le linee.

Di: Google

Esempio

Codificalo autonomamente nel Visualization 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 in corso...

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ò seguire qualsiasi numero di colonne, tutte devono essere numeriche. Ogni colonna viene visualizzata come una riga separata.

Opzioni di configurazione

Nome	Tipo	Predefinita	Descrizione
axisColor	stringa o oggetto	colore predefinito	Il colore dell'asse. I valori possibili sono quelli dell'opzione di configurazione backgroundColor.
axisBackgroundColor	stringa o oggetto	colore predefinito	Il bordo attorno allo sfondo dell'asse. I valori possibili sono quelli dell'opzione di configurazione backgroundColor.
axisFontSize	numero	automatico	Dimensione del carattere del testo dell'asse del grafico, in pixel.
backgroundColor	stringa o oggetto	colore predefinito	Il colore di sfondo per l'area principale del grafico. Potrebbe essere una delle seguenti opzioni: Una stringa con colori supportati da HTML, ad esempio "red" o "#00cc00" Un oggetto con le proprietà `stroke` `fill` e `strokeSize`. `stroke` e `fill` devono essere una stringa con un colore. La dimensione del tratti è un numero. Ad esempio: `{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}`. Per utilizzare il solo riempimento, senza tratto, usa `stroke:null, strokeSize: 0`.
borderColor	stringa o oggetto	colore predefinito	Il bordo attorno 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 con un colore supportato da HTML, ad esempio "red" o "#00cc00".
enableTooltip	boolean	true	Se il valore è impostato su true, le descrizioni comando vengono mostrate quando l'utente fa clic su un punto dati.
focusBorderColor	stringa o oggetto	colore predefinito	Il bordo attorno agli elementi del grafico a fuoco (indicati dal mouse). I valori possibili sono quelli dell'opzione di configurazione backgroundColor.
altezza	numero	Altezza container	Altezza del grafico in pixel.
isStacked	boolean	false	Se il criterio viene impostato su true, i valori delle righe vengono impilati (accumulati).
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.
legendBackgroundColor	stringa o oggetto	colore predefinito	Il colore di sfondo per l'area di legenda del grafico. I valori possibili sono quelli dell'opzione di configurazione backgroundColor.
legendFontSize	numero	automatico	Le dimensioni del carattere della legenda, in pixel.
legendTextColor	stringa o oggetto	colore predefinito	Il colore del testo della legenda. I valori possibili sono quelli dell'opzione di configurazione backgroundColor.
lineSize	numero	2	Spessore linea in pixel. Utilizza il valore zero per nascondere tutte le linee e mostrare solo i punti.
logScale	boolean	false	Se impostato su true, l'asse principale deve essere in scala logaritmica.
max	numero	automatico	Specifica la linea della griglia dell'asse Y più alto. 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 successivo più alto.
min	numero	automatico	Specifica la linea della griglia dell'asse Y inferiore. La linea effettiva della griglia sarà il più basso tra due valori: il valore minimo dell'opzione o il valore più basso dei dati arrotondati per difetto al segno inferiore successivo.
pointSize	numero	3	Dimensioni dei punti visualizzati in pixel. Utilizza il valore zero per nascondere tutti i punti.
reverseAxis	boolean	false	Se impostato su true, le categorie verranno tracciate da destra a sinistra. L'impostazione predefinita è disegnare da sinistra a destra.
showCategories	boolean	true	Se impostato su true, mostra le etichette delle categorie. Se il valore è false, non lo farà.
title	stringa	nessun titolo	Testo da visualizzare sopra il grafico.
titleX	stringa	nessun titolo	Testo da visualizzare sotto l'asse orizzontale.
titleY	stringa	nessun titolo	Testo da visualizzare per l'asse verticale.
titleColor	stringa o oggetto	colore predefinito	Il colore del titolo del grafico. I valori possibili sono quelli dell'opzione di configurazione backgroundColor.
titleFontSize	numero	automatico	La dimensione del carattere per il titolo del grafico, in pixel.
tooltipFontSize	numero	11	La dimensione del carattere del testo della descrizione comando. Questo potrebbe essere ridotto se la descrizione comando è troppo piccola per contenere il testo nel carattere specificato.
tooltipHeight	numero	60	L'altezza della descrizione comando in pixel. L'altezza della descrizione comando è fissa; non verrà mai aumentata o ridotta per adattarsi alla lunghezza o alle dimensioni del carattere del testo. Tuttavia, i valori superiori a 1/3 dell'altezza del grafico verranno ritagliati.
tooltipWidth	numero	120	La larghezza della descrizione comando, in pixel. La larghezza della descrizione comando è fissa; non verrà mai aumentata o ridotta per adattarsi alla lunghezza o alle dimensioni del carattere del testo. Tuttavia, tutti gli elementi superiori alla larghezza del grafico verranno ritagliati.
larghezza	numero	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 colonne e celle. L'utente può selezionare una sola colonna o cella alla volta.
`setSelection()`	Nessuno	Implementazione standard di `setSelection()`, ma supporta la selezione di un solo elemento. Tratta ogni voce di selezione come una selezione di colonne o 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 colonna della cella corrispondente.	riga, colonna
`onmouseout`	Attivato quando l'utente si allontana da un punto e passa agli indici di riga e colonna della cella corrispondente.	riga, colonna
`ready`	Il grafico è pronto per le chiamate di metodi esterne. Se vuoi interagire con il grafico e richiamare i metodi dopo averlo tracciato, devi impostare un listener per questo evento prima di chiamare il metodo `draw` e richiamarli solo dopo l'attivazione dell'evento.	Nessun valore
`select`	Attivato quando l'utente fa clic su un punto o una legenda. Quando si seleziona un punto, viene selezionata la cella corrispondente nella tabella di dati; quando si seleziona una legenda, viene selezionata la colonna corrispondente nella tabella dati. Per sapere quali elementi sono stati selezionati, chiama `getSelection()`.	Nessun valore

Norme sui dati

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

Visualizzazione: grafico ad area (versione precedente) Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.