Class BarChartBuilder

Strumentoperla creazionedigraficia barre

Generatore di grafici a barre. Per ulteriori dettagli, consulta la documentazione di Google Charts.

Ecco un esempio che mostra come creare un grafico a barre. I dati vengono importati da un foglio di lavoro Google.

// Get sample data from a spreadsheet.
const dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=B1%3AC11' +
    '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=0&headers=-1';

const chartBuilder = Charts.newBarChart()
                         .setTitle('Top Grossing Films in US and Canada')
                         .setXAxisTitle('USD')
                         .setYAxisTitle('Film')
                         .setDimensions(600, 500)
                         .setLegendPosition(Charts.Position.BOTTOM)
                         .setDataSourceUrl(dataSourceUrl);

const chart = chartBuilder.build();

Metodi

Metodo	Tipo restituito	Breve descrizione
build()	Chart	Crea il grafico.
reverseCategories()	BarChartBuilder	Inverte il disegno delle serie nell'asse del dominio.
reverseDirection()	BarChartBuilder	Inverte la direzione di crescita delle barre lungo l'asse orizzontale.
setBackgroundColor(cssValue)	BarChartBuilder	Imposta il colore di sfondo del grafico.
setColors(cssValues)	BarChartBuilder	Imposta i colori delle linee nel grafico.
setDataSourceUrl(url)	BarChartBuilder	Imposta l'URL dell'origine dati utilizzato per estrarre i dati da un'origine esterna, ad esempio Fogli Google.
setDataTable(tableBuilder)	BarChartBuilder	Imposta la tabella di dati da utilizzare per il grafico utilizzando un DataTableBuilder.
setDataTable(table)	BarChartBuilder	Imposta la tabella di dati contenente le linee per il grafico, nonché le etichette dell'asse X.
setDataViewDefinition(dataViewDefinition)	BarChartBuilder	Imposta la definizione della visualizzazione dei dati da utilizzare per il grafico.
setDimensions(width, height)	BarChartBuilder	Imposta le dimensioni del grafico.
setLegendPosition(position)	BarChartBuilder	Imposta la posizione della legenda rispetto al grafico.
setLegendTextStyle(textStyle)	BarChartBuilder	Imposta lo stile del testo della legenda del grafico.
setOption(option, value)	BarChartBuilder	Imposta le opzioni avanzate per questo grafico.
setRange(start, end)	BarChartBuilder	Imposta l'intervallo per il grafico.
setStacked()	BarChartBuilder	Utilizza linee in pila, il che significa che i valori delle linee e delle barre sono in pila (accumulati).
setTitle(chartTitle)	BarChartBuilder	Imposta il titolo del grafico.
setTitleTextStyle(textStyle)	BarChartBuilder	Imposta lo stile del testo del titolo del grafico.
setXAxisTextStyle(textStyle)	BarChartBuilder	Imposta lo stile del testo dell'asse orizzontale.
setXAxisTitle(title)	BarChartBuilder	Aggiunge un titolo all'asse orizzontale.
setXAxisTitleTextStyle(textStyle)	BarChartBuilder	Imposta lo stile del testo del titolo dell'asse orizzontale.
setYAxisTextStyle(textStyle)	BarChartBuilder	Imposta lo stile del testo dell'asse verticale.
setYAxisTitle(title)	BarChartBuilder	Aggiunge un titolo all'asse verticale.
setYAxisTitleTextStyle(textStyle)	BarChartBuilder	Imposta lo stile del testo del titolo dell'asse verticale.
useLogScale()	BarChartBuilder	Imposta l'asse di intervallo su una scala logaritmica (è necessario che tutti i valori siano positivi).

Documentazione dettagliata

build()

Crea il grafico.

Invio

Chart: un oggetto Chart che può essere incorporato in documenti, elementi dell'interfaccia utente o utilizzato come immagine statica.

---

reverseCategories()

Inverte il disegno delle serie nell'asse del dominio. Per i grafici con intervallo verticale (ad es. grafici a linee, a aree o a colonne), l'asse orizzontale viene tracciato da destra a sinistra. Per i grafici con intervalli orizzontali (ad es. i grafici a barre), l'asse verticale viene tracciato dall'alto verso il basso. Per i grafici a torta, significa che le sezioni vengono disegnate in senso antiorario.

// Creates a pie chart builder and sets drawing of the slices in a
// counter-clockwise manner.
const builder = Charts.newPieChart();
builder.reverseCategories();

Invio

BarChartBuilder: questo builder è utile per l'accodamento.

---

reverseDirection()

Inverte la direzione di crescita delle barre lungo l'asse orizzontale. Per impostazione predefinita, i valori aumentano da sinistra a destra. La chiamata di questo metodo ne causa l'aumento da destra a sinistra.

Invio

BarChartBuilder: questo builder è utile per l'accodamento.

---

setBackgroundColor(cssValue)

Imposta il colore di sfondo del grafico.

// Creates a line chart builder and sets the background color to gray
const builder = Charts.newLineChart();
builder.setBackgroundColor('gray');

Parametri

Nome	Tipo	Descrizione
cssValue	String	Il valore CSS del colore (ad esempio "blue" o "#00f").

Invio

BarChartBuilder: questo builder è utile per l'accodamento.

---

setColors(cssValues)

Imposta i colori delle linee nel grafico.

// Creates a line chart builder and sets the first two lines to be drawn in
// green and red, respectively.
const builder = Charts.newLineChart();
builder.setColors(['green', 'red']);

Parametri

Nome	Tipo	Descrizione
cssValues	String[]	Un array di valori CSS di colore, ad esempio ["red", "#acf"]. L'elemento n-esimo nell'array rappresenta il colore della riga n-esima nel grafico.

Invio

BarChartBuilder: questo builder è utile per l'accodamento.

---

setDataSourceUrl(url)

Imposta l'URL dell'origine dati utilizzato per estrarre i dati da un'origine esterna, ad esempio Fogli Google. Se vengono forniti un URL di origine dati e una DataTable, l'URL dell'origine dati viene ignorato.

Per saperne di più sulle query delle origini dati, consulta la documentazione di Google Charts.

Parametri

Nome	Tipo	Descrizione
url	String	L'URL dell'origine dati, inclusi eventuali parametri di query.

Invio

BarChartBuilder: questo builder è utile per l'accodamento.

---

setDataTable(tableBuilder)

Imposta la tabella di dati da utilizzare per il grafico utilizzando un DataTableBuilder. Si tratta di un metodo di praticità per impostare la tabella di dati senza dover chiamare build().

Parametri

Nome	Tipo	Descrizione
tableBuilder	DataTableBuilder	Un generatore di tabelle di dati. Nell'ambito di questa chiamata viene creata immediatamente una nuova tabella di dati, pertanto eventuali ulteriori aggiornamenti del generatore non verranno applicati al grafico.

Invio

BarChartBuilder: questo builder è utile per l'accodamento.

---

setDataTable(table)

Imposta la tabella di dati contenente le linee per il grafico, nonché le etichette dell'asse X. La prima colonna deve essere una stringa e contenere le etichette dell'asse orizzontale. Può seguire un numero qualsiasi di colonne, tutte numeriche. Ogni colonna viene visualizzata come riga separata.

Parametri

Nome	Tipo	Descrizione
table	DataTableSource	La tabella di dati da utilizzare per il grafico.

Invio

BarChartBuilder: questo builder è utile per l'accodamento.

---

setDataViewDefinition(dataViewDefinition)

Imposta la definizione della visualizzazione dei dati da utilizzare per il grafico.

Parametri

Nome	Tipo	Descrizione
dataViewDefinition	DataViewDefinition	Un oggetto di definizione della visualizzazione dei dati che definisce la visualizzazione da ricavare dall'origine dati specificata per il disegno del grafico.

Invio

BarChartBuilder: questo builder è utile per l'accodamento.

---

setDimensions(width, height)

Imposta le dimensioni del grafico.

Parametri

Nome	Tipo	Descrizione
width	Integer	La larghezza del grafico, in pixel.
height	Integer	L'altezza del grafico, in pixel.

Invio

BarChartBuilder: questo builder è utile per l'accodamento.

---

setLegendPosition(position)

Imposta la posizione della legenda rispetto al grafico. Per impostazione predefinita, non è presente alcuna legenda.

// Creates a line chart builder and sets the legend position to right.
const builder = Charts.newLineChart();
builder.setLegendPosition(Charts.Position.RIGHT);

Parametri

Nome	Tipo	Descrizione
position	Position	La posizione della legenda.

Invio

BarChartBuilder: questo builder è utile per l'accodamento.

---

setLegendTextStyle(textStyle)

Imposta lo stile del testo della legenda del grafico.

// Creates a line chart builder and sets it up for a  blue, 26-point legend.
const textStyleBuilder =
    Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
const style = textStyleBuilder.build();
const builder = Charts.newLineChart();
builder.setLegendTextStyle(style);

Parametri

Nome	Tipo	Descrizione
textStyle	TextStyle	Lo stile di testo da utilizzare per la legenda del grafico.

Invio

BarChartBuilder: questo builder è utile per l'accodamento.

---

setOption(option, value)

Imposta le opzioni avanzate per questo grafico. Consulta le opzioni disponibili per questo grafico. Questo metodo non ha effetto se l'opzione specificata non è valida.

// Build a bar chart with a 1-second animation duration.
const builder = Charts.newBarChart();
builder.setOption('animation.duration', 1000);
const chart = builder.build();

Parametri

Nome	Tipo	Descrizione
option	String	L'opzione da impostare.
value	Object	Il valore da impostare.

Invio

BarChartBuilder: questo builder è utile per l'accodamento.

---

setRange(start, end)

Imposta l'intervallo per il grafico.

Se alcuni punti dati non rientrano nell'intervallo, questo viene espanso in modo da includerli.

Parametri

Nome	Tipo	Descrizione
start	Number	Il valore della riga della griglia più bassa dell'asse intervallo.
end	Number	Il valore della linea di griglia più alta dell'asse intervallo.

Invio

BarChartBuilder: questo builder è utile per l'accodamento.

---

setStacked()

Utilizza linee in pila, il che significa che i valori delle linee e delle barre sono in pila (accumulati). Per impostazione predefinita, non è presente l'accatastamento.

Invio

BarChartBuilder: questo builder è utile per l'accodamento.

---

setTitle(chartTitle)

Imposta il titolo del grafico. Il titolo viene visualizzato al centro sopra il grafico.

// Creates a line chart builder and title to 'My Line Chart'.
const builder = Charts.newLineChart();
builder.setTitle('My Line Chart');

Parametri

Nome	Tipo	Descrizione
chartTitle	String	il titolo del grafico.

Invio

BarChartBuilder: questo builder è utile per l'accodamento.

---

setTitleTextStyle(textStyle)

Imposta lo stile del testo del titolo del grafico.

// Creates a line chart builder and sets it up for a  blue, 26-point title.
const textStyleBuilder =
    Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
const style = textStyleBuilder.build();
const builder = Charts.newLineChart();
builder.setTitleTextStyle(style);

Parametri

Nome	Tipo	Descrizione
textStyle	TextStyle	Lo stile di testo da utilizzare per il titolo del grafico. Puoi creare un oggetto TextStyleBuilder chiamando Charts.newTextStyle().

Invio

BarChartBuilder: questo builder è utile per l'accodamento.

---

setXAxisTextStyle(textStyle)

Imposta lo stile del testo dell'asse orizzontale.

// Creates a line chart builder and sets the X-axis text style to blue, 18-point
// font.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const builder = Charts.newLineChart();
builder.setXAxisTextStyle(textStyle);

Parametri

Nome	Tipo	Descrizione
textStyle	TextStyle	Lo stile di testo da utilizzare per il titolo dell'asse orizzontale. Puoi creare un oggetto TextStyleBuilder chiamando Charts.newTextStyle().

Invio

BarChartBuilder: questo builder è utile per l'accodamento.

---

setXAxisTitle(title)

Aggiunge un titolo all'asse orizzontale. Il titolo è centrato e viene visualizzato sotto le etichette del valore dell'asse.

// Creates a line chart builder and sets the X-axis title.
const builder = Charts.newLineChart();
builder.setTitle('X-axis Title');

Parametri

Nome	Tipo	Descrizione
title	String	Il titolo dell'asse X.

Invio

BarChartBuilder: questo builder è utile per l'accodamento.

---

setXAxisTitleTextStyle(textStyle)

Imposta lo stile del testo del titolo dell'asse orizzontale.

// Creates a line chart builder and sets the X-axis title text style to blue,
// 18-point font.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const builder = Charts.newLineChart();
builder.setXAxisTitleTextStyle(textStyle);

Parametri

Nome	Tipo	Descrizione
textStyle	TextStyle	Lo stile di testo da utilizzare per il titolo dell'asse orizzontale. Puoi creare un oggetto TextStyleBuilder chiamando Charts.newTextStyle().

Invio

BarChartBuilder: questo builder è utile per l'accodamento.

---

setYAxisTextStyle(textStyle)

Imposta lo stile del testo dell'asse verticale.

// Creates a line chart builder and sets the Y-axis text style to blue, 18-point
// font.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const builder = Charts.newLineChart();
builder.setYAxisTextStyle(textStyle);

Parametri

Nome	Tipo	Descrizione
textStyle	TextStyle	Lo stile di testo da utilizzare per il titolo dell'asse orizzontale. Puoi creare un oggetto TextStyleBuilder chiamando Charts.newTextStyle().

Invio

BarChartBuilder: questo builder è utile per l'accodamento.

---

setYAxisTitle(title)

Aggiunge un titolo all'asse verticale. Il titolo è centrato e viene visualizzato a sinistra delle etichette dei valori.

// Creates a line chart builder and sets the Y-axis title.
const builder = Charts.newLineChart();
builder.setYAxisTitle('Y-axis Title');

Parametri

Nome	Tipo	Descrizione
title	String	Il titolo dell'asse Y.

Invio

BarChartBuilder: questo builder è utile per l'accodamento.

---

setYAxisTitleTextStyle(textStyle)

Imposta lo stile del testo del titolo dell'asse verticale.

// Creates a line chart builder and sets the Y-axis title text style to blue,
// 18-point font.
const textStyle =
    Charts.newTextStyle().setColor('blue').setFontSize(18).build();
const builder = Charts.newLineChart();
builder.setYAxisTitleTextStyle(textStyle);

Parametri

Nome	Tipo	Descrizione
textStyle	TextStyle	Lo stile di testo da utilizzare per il titolo dell'asse orizzontale. Puoi creare un oggetto TextStyleBuilder chiamando Charts.newTextStyle().

Invio

BarChartBuilder: questo builder è utile per l'accodamento.

---

useLogScale()

Imposta l'asse di intervallo su una scala logaritmica (è necessario che tutti i valori siano positivi). L'asse intervallo è l'asse verticale per i grafici verticali (ad es. a linee, ad area o a colonne) e l'asse orizzontale per i grafici orizzontali (ad es. a barre).

Invio

BarChartBuilder: questo builder è utile per l'accodamento.