Questa pagina è stata tradotta dall'API Cloud Translation.

Visualizzazione: grafico a barre (versione precedente)

Deprecato

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

Panoramica
Esempio
Caricamento in corso…
Formato dei dati
Opzioni di configurazione
Metodi
Eventi
Norme sui dati

Panoramica

Un grafico a barre orizzontali visualizzato nel browser utilizzando SVG o VML. Visualizza suggerimenti quando fai clic sui punti. Anima le righe facendo clic sulle voci delle legende. Per una versione verticale di questo grafico, consulta il grafico a colonne.

Di: Google

Esempio

Codifica il codice in VideoView Playground

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

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

Caricamento

Il nome del pacchetto google.load è "barchart"

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

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

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

Formato dei dati

Ogni riga della tabella rappresenta un gruppo di barre adiacenti.

La prima colonna della tabella deve essere una stringa e rappresenta l'etichetta di quel gruppo di barre. Puoi seguire un numero qualsiasi di colonne, tutte numeriche, ciascuna delle quali rappresenta le barre con lo stesso colore e la posizione relativa in ogni gruppo.

Il valore di una determinata riga e colonna controlla l'altezza della singola barra rappresentata da questa riga e colonna.

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 o oggetti	Colori predefiniti	Un array dei colori, in cui ogni elemento specifica il colore di una serie. Devi specificare un elemento array per ogni serie. Se `is3D=false`, si tratta di un array di colori HTML. Esempio: colori:['#00FF00','orange'] Se `is3D=true`, si tratta di un array di colori HTML o di oggetti di questo tipo: `{color:face_color, darker:shade_color}` dove `color` è il colore del volto dell'elemento e `darker` è il colore dell'ombra. Tuttavia, se specifichi un colore HTML per un oggetto 3D, lo stesso colore di viso e ombra sarà lo stesso e l'effetto 3D verrà ridotto. Esempio: `{is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}`
Attiva strumenti	boolean	true	Se è impostato su true, le descrizioni dei comandi vengono mostrate quando l'utente fa clic su una barra.
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.
Is3D	boolean	false	Se impostato su true, mostra una modifica tridimensionale.
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.
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.
inversioneInassi	boolean	true	Se il valore è impostato su true (impostazione predefinita), le categorie vengono visualizzate dall'alto verso il basso. Se impostato su false, le barre verranno visualizzate dal basso verso l'alto.
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, qualsiasi cosa superiore alla larghezza del grafico verrà ritagliata.
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 non è possibile selezionare la colonna Etichetta.

Eventi

Nome	Descrizione	Proprietà
`onmouseover`	Attivato quando l'utente passa il mouse sopra una barra e passa negli indici di riga e di colonna della cella corrispondente.	riga, colonna
`onmouseout`	Attivato quando l'utente allontana il puntatore del mouse da una barra 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 una barra o una legenda. Quando viene selezionata una barra, 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.