Questa pagina è stata tradotta dall'API Cloud Translation.

Visualizzazione: grafico a colonne (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
Esempio
Caricamento in corso…
Formato dei dati
Opzioni di configurazione
Metodi
Eventi
Norme sui dati

Panoramica

Un grafico a barre verticali 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. Per una versione orizzontale di questo grafico, vedi il Grafico a barre.

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:["columnchart"]});
      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.ColumnChart(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 in corso...

Il nome del pacchetto google.load è "columnchart"

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

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

  var visualization = new google.visualization.ColumnChart(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. Può seguire un numero qualsiasi di colonne, tutte numeriche, ognuna delle quali rappresenta le barre con lo stesso colore e posizione relativa in ogni gruppo.

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

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 o oggetti	Colori predefiniti	Un array di 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','arancione'] Se `is3D=true`, si tratta di un array di colori HTML oppure oggetti di questo tipo: `{color:face_color, darker:shade_color}`, dove `color` è il colore del viso dell'elemento e `darker` è il colore della tonalità. Tuttavia, se specifichi un colore HTML per un oggetto 3D, il volto e l'ombra saranno dello stesso colore e l'effetto 3D verrà ridotto. Esempio: `{is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}`
enableTooltip	boolean	true	Se il valore è impostato su true, le descrizioni comando vengono mostrate quando l'utente fa clic su una colonna.
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.
è in 3D	boolean	false	Se impostato su true, visualizza una modifica tridimensionale.
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 delle voci di testo della legenda. I valori possibili sono quelli dell'opzione di configurazione backgroundColor.
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, arrotondato per difetto al segno più basso della griglia successivo .
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 non è possibile selezionare la colonna dell'etichetta.

Eventi

Nome	Descrizione	Proprietà
`onmouseover`	Attivato quando l'utente passa il mouse sopra una barra e passa agli indici di riga e colonna della cella corrispondente.	riga, colonna
`onmouseout`	Attivato quando l'utente si allontana dal mouse 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 una barra o una legenda. Quando si seleziona una barra, viene selezionata la cella corrispondente nella tabella 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 a colonne (versione precedente) Mantieni tutto organizzato con le raccolte Salva e classifica i contenuti in base alle tue preferenze.