Questa pagina è stata tradotta dall'API Cloud Translation.

Class ColumnChartBuilder

Strumento per la creazione di grafici a colonne. Per ulteriori dettagli, consulta la documentazione di Google Graph.

Questo esempio mostra come creare un grafico a colonne con i dati di una tabella.

var sampleData = Charts.newDataTable()
    .addColumn(Charts.ColumnType.STRING, "Year")
    .addColumn(Charts.ColumnType.NUMBER, "Sales")
    .addColumn(Charts.ColumnType.NUMBER, "Expenses")
    .addRow(["2004", 1000, 400])
    .addRow(["2005", 1170, 460])
    .addRow(["2006", 660, 1120])
    .addRow(["2007", 1030, 540])
    .addRow(["2008", 800, 600])
    .addRow(["2009", 943, 678])
    .addRow(["2010", 1020, 550])
    .addRow(["2011", 910, 700])
    .addRow(["2012", 1230, 840])
    .build();

var chart = Charts.newColumnChart()
    .setTitle('Sales & Expenses')
    .setXAxisTitle('Year')
    .setYAxisTitle('Amount (USD)')
    .setDimensions(600, 500)
    .setDataTable(sampleData)
    .build();

Metodi

Metodo	Tipo restituito	Breve descrizione
`build()`	`Chart`	Crea il grafico.
`reverseCategories()`	`ColumnChartBuilder`	Inverte il disegno di una serie nell'asse del dominio.
`setBackgroundColor(cssValue)`	`ColumnChartBuilder`	Imposta il colore di sfondo per il grafico.
`setColors(cssValues)`	`ColumnChartBuilder`	Imposta i colori delle linee nel grafico.
`setDataSourceUrl(url)`	`ColumnChartBuilder`	Imposta l'URL dell'origine dati utilizzato per estrarre i dati da una sorgente esterna, come Google Google.
`setDataTable(tableBuilder)`	`ColumnChartBuilder`	Imposta la tabella di dati da utilizzare per il grafico con un oggetto DataTableBuilder.
`setDataTable(table)`	`ColumnChartBuilder`	Imposta la tabella di dati che contiene le linee del grafico e le etichette dell'asse X.
`setDataViewDefinition(dataViewDefinition)`	`ColumnChartBuilder`	Consente di impostare la definizione della vista dati da utilizzare per il grafico.
`setDimensions(width, height)`	`ColumnChartBuilder`	Imposta le dimensioni del grafico.
`setLegendPosition(position)`	`ColumnChartBuilder`	Imposta la posizione della legenda rispetto al grafico.
`setLegendTextStyle(textStyle)`	`ColumnChartBuilder`	Imposta lo stile del testo della legenda del grafico.
`setOption(option, value)`	`ColumnChartBuilder`	Imposta le opzioni avanzate per questo grafico.
`setRange(start, end)`	`ColumnChartBuilder`	Imposta l'intervallo per il grafico.
`setStacked()`	`ColumnChartBuilder`	Utilizza linee in pila, ciò significa che i valori di linee e barre sono impilati (accumulati).
`setTitle(chartTitle)`	`ColumnChartBuilder`	Imposta il titolo del grafico.
`setTitleTextStyle(textStyle)`	`ColumnChartBuilder`	Imposta lo stile del testo del titolo del grafico.
`setXAxisTextStyle(textStyle)`	`ColumnChartBuilder`	Imposta lo stile del testo per l'asse orizzontale.
`setXAxisTitle(title)`	`ColumnChartBuilder`	Aggiunge un titolo all'asse orizzontale.
`setXAxisTitleTextStyle(textStyle)`	`ColumnChartBuilder`	Imposta lo stile del testo del titolo dell'asse orizzontale.
`setYAxisTextStyle(textStyle)`	`ColumnChartBuilder`	Imposta lo stile di testo dell'asse verticale.
`setYAxisTitle(title)`	`ColumnChartBuilder`	Aggiunge un titolo all'asse verticale.
`setYAxisTitleTextStyle(textStyle)`	`ColumnChartBuilder`	Imposta lo stile di testo del titolo dell'asse verticale.
`useLogScale()`	`ColumnChartBuilder`	Imposta l'asse dell'intervallo in una scala logaritmica (richiede che tutti i valori siano positivi).

Documentazione dettagliata

`build()`

Crea il grafico.

Invio

Chart: un oggetto Chart, che può essere incorporato in documenti, elementi UI o utilizzato come elemento statico dell'immagine.

`reverseCategories()`

Inverte il disegno di una serie nell'asse del dominio. Per i grafici a intervallo verticale (come i grafici a linee, grafici ad area o a colonne), significa che l'asse orizzontale è tracciato da destra a sinistra. Per i grafici con intervallo orizzontale (come quelli a barre), ciò significa che l'asse verticale è tracciato dall'alto verso in basso. Per i grafici a torta, le sezioni vengono tracciate in senso antiorario.

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

Invio

ColumnChartBuilder: questo builder, utile per il concatenamento.

`setBackgroundColor(cssValue)`

Imposta il colore di sfondo per il grafico.

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

Parametri

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

Invio

ColumnChartBuilder: questo builder, utile per il concatenamento.

`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.
var builder = Charts.newLineChart();
builder.setColors(["green", "red"]);

Parametri

Nome	Tipo	Descrizione
`cssValues`	`String[]`	Un array di valori CSS per il colore, come `["red", "#acf"]`. L'ennesimo elemento nell'array rappresenta il colore dell'ennesima linea nel grafico.

Invio

ColumnChartBuilder: questo builder, utile per il concatenamento.

`setDataSourceUrl(url)`

Imposta l'URL dell'origine dati utilizzato per estrarre i dati da una sorgente esterna, come Google Google. Se vengono forniti un URL dell'origine dati e una tabella di dati, l'URL dell'origine dati viene ignorato.

Per ulteriori informazioni sull'esecuzione di query sulle origini dati, consulta la documentazione di Google Graph.

Parametri

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

Invio

ColumnChartBuilder: questo builder, utile per il concatenamento.

`setDataTable(tableBuilder)`

Imposta la tabella di dati da utilizzare per il grafico con un oggetto DataTableBuilder. Questo è un metodo pratico per impostare la tabella di dati senza dover chiamare build().

Parametri

Nome	Tipo	Descrizione
`tableBuilder`	`DataTableBuilder`	Un generatore di tabelle di dati. Viene creata immediatamente una nuova tabella di dati nell'ambito di questo pertanto eventuali ulteriori aggiornamenti al builder non verranno riportati nel grafico.

Invio

ColumnChartBuilder: questo builder, utile per il concatenamento.

`setDataTable(table)`

Imposta la tabella di dati che contiene le linee del grafico e le etichette dell'asse X. La la prima colonna deve essere una stringa e contenere le etichette dell'asse orizzontale. Qualsiasi numero di colonne possono seguire, tutti devono essere numerici. Ogni colonna viene visualizzata come una riga separata.

Parametri

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

Invio

ColumnChartBuilder: questo builder, utile per il concatenamento.

`setDataViewDefinition(dataViewDefinition)`

Consente di impostare la definizione della vista dati da utilizzare per il grafico.

Parametri

Nome	Tipo	Descrizione
`dataViewDefinition`	`DataViewDefinition`	Un oggetto di definizione della vista dati che definisce la vista da utilizzare derivata dall'origine dati specificata per il disegno del grafico.

Invio

ColumnChartBuilder: questo builder, utile per il concatenamento.

`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

ColumnChartBuilder: questo builder, utile per il concatenamento.

`setLegendPosition(position)`

Imposta la posizione della legenda rispetto al grafico. Per impostazione predefinita, non esiste una legenda.

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

Parametri

Nome	Tipo	Descrizione
`position`	`Position`	La posizione della legenda.

Invio

ColumnChartBuilder: questo builder, utile per il concatenamento.

`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.
var textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
var style = textStyleBuilder.build();
var builder = Charts.newLineChart();
builder.setLegendTextStyle(style);

Parametri

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

Invio

ColumnChartBuilder: questo builder, utile per il concatenamento.

`setOption(option, value)`

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

// Build a column chart with a 1-second animation duration.
var builder = Charts.newColumnChart();
builder.setOption('animation.duration', 1000);
var chart = builder.build();

Parametri

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

Invio

ColumnChartBuilder: questo builder, utile per il concatenamento.

`setRange(start, end)`

Imposta l'intervallo per il grafico.

Se alcuni punti dati non rientrano nell'intervallo, l'intervallo viene espanso per includere quei dati. punti.

Parametri

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

Invio

ColumnChartBuilder: questo builder, utile per il concatenamento.

`setStacked()`

Utilizza linee in pila, ciò significa che i valori di linee e barre sono impilati (accumulati). Per impostazione predefinita, non c'è nessuno stack.

Invio

ColumnChartBuilder: questo builder, utile per il concatenamento.

`setTitle(chartTitle)`

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

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

Parametri

Nome	Tipo	Descrizione
`chartTitle`	`String`	il titolo del grafico.

Invio

ColumnChartBuilder: questo builder, utile per il concatenamento.

`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.
var textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26);
var style = textStyleBuilder.build();
var 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

ColumnChartBuilder: questo builder, utile per il concatenamento.

`setXAxisTextStyle(textStyle)`

Imposta lo stile del testo per l'asse orizzontale.

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

Parametri

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

Invio

ColumnChartBuilder: questo builder, utile per il concatenamento.

`setXAxisTitle(title)`

Aggiunge un titolo all'asse orizzontale. Il titolo è centrato e appare sotto il valore dell'asse etichette.

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

Parametri

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

Invio

ColumnChartBuilder: questo builder, utile per il concatenamento.

`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.
var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build();
var builder = Charts.newLineChart();
builder.setXAxisTitleTextStyle(textStyle);

Parametri

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

Invio

ColumnChartBuilder: questo builder, utile per il concatenamento.

`setYAxisTextStyle(textStyle)`

Imposta lo stile di testo dell'asse verticale.

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

Parametri

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

Invio

ColumnChartBuilder: questo builder, utile per il concatenamento.

`setYAxisTitle(title)`

Aggiunge un titolo all'asse verticale. Il titolo è centrato e appare a sinistra del valore etichette.

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

Parametri

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

Invio

ColumnChartBuilder: questo builder, utile per il concatenamento.

`setYAxisTitleTextStyle(textStyle)`

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

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

Parametri

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

Invio

ColumnChartBuilder: questo builder, utile per il concatenamento.

`useLogScale()`

Imposta l'asse dell'intervallo in una scala logaritmica (richiede che tutti i valori siano positivi). L'intervallo asse è l'asse verticale dei grafici verticali (ad esempio a linee, ad area o a colonne) e asse orizzontale per i grafici orizzontali (ad esempio a barre).

Invio

ColumnChartBuilder: questo builder, utile per il concatenamento.