Generatore di grafici ad area. Per maggiori dettagli, consulta la documentazione di Grafici Google.
Ecco un esempio che mostra come creare un grafico ad area.
// Create a data table with some sample data. const sampleData = Charts.newDataTable() .addColumn(Charts.ColumnType.STRING, 'Month') .addColumn(Charts.ColumnType.NUMBER, 'Dining') .addColumn(Charts.ColumnType.NUMBER, 'Total') .addRow(['Jan', 60, 520]) .addRow(['Feb', 50, 430]) .addRow(['Mar', 53, 440]) .addRow(['Apr', 70, 410]) .addRow(['May', 80, 390]) .addRow(['Jun', 60, 500]) .addRow(['Jul', 100, 450]) .addRow(['Aug', 140, 431]) .addRow(['Sep', 75, 488]) .addRow(['Oct', 70, 521]) .addRow(['Nov', 58, 388]) .addRow(['Dec', 63, 400]) .build(); const chart = Charts.newAreaChart() .setTitle('Yearly Spending') .setXAxisTitle('Month') .setYAxisTitle('Spending (USD)') .setDimensions(600, 500) .setStacked() .setColors(['red', 'green']) .setDataTable(sampleData) .build();
Metodi
| Metodo | Tipo restituito | Breve descrizione |
|---|---|---|
build() | Chart | Crea il grafico. |
reverse | Area | Inverte il disegno delle serie nell'asse del dominio. |
set | Area | Imposta il colore di sfondo del grafico. |
set | Area | Imposta i colori delle linee nel grafico. |
set | Area | Imposta l'URL dell'origine dati utilizzato per estrarre i dati da un'origine esterna, ad esempio Fogli Google. |
set | Area | Imposta la tabella di dati da utilizzare per il grafico utilizzando un DataTableBuilder. |
set | Area | Imposta la tabella dei dati contenente le linee del grafico, nonché le etichette dell'asse X. |
set | Area | Imposta la definizione della visualizzazione dei dati da utilizzare per il grafico. |
set | Area | Imposta le dimensioni del grafico. |
set | Area | Imposta la posizione della legenda rispetto al grafico. |
set | Area | Imposta lo stile del testo della legenda del grafico. |
set | Area | Imposta le opzioni avanzate per questo grafico. |
set | Area | Imposta lo stile dei punti nella linea. |
set | Area | Imposta l'intervallo per il grafico. |
set | Area | Utilizza linee in pila, il che significa che i valori delle linee e delle barre sono in pila (accumulati). |
set | Area | Imposta il titolo del grafico. |
set | Area | Imposta lo stile del testo del titolo del grafico. |
set | Area | Imposta lo stile del testo dell'asse orizzontale. |
set | Area | Aggiunge un titolo all'asse orizzontale. |
set | Area | Imposta lo stile del testo del titolo dell'asse orizzontale. |
set | Area | Imposta lo stile del testo dell'asse verticale. |
set | Area | Aggiunge un titolo all'asse verticale. |
set | Area | Imposta lo stile del testo del titolo dell'asse verticale. |
use | Area | Trasforma l'asse dell'intervallo in una scala logaritmica (richiede che tutti i valori siano positivi). |
Documentazione dettagliata
build()
Crea il grafico.
Indietro
Chart: un oggetto grafico, che può essere incorporato in documenti, elementi UI o utilizzato come immagine statica.
reverseCategories()
Inverte il disegno delle serie nell'asse del dominio. Per i grafici a intervallo verticale (come i grafici a linee, ad area o a colonne), l'asse orizzontale viene disegnato da destra a sinistra. Per i grafici a intervalli orizzontali (come i grafici a barre), ciò significa che l'asse verticale viene disegnato 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();
Indietro
AreaChartBuilder: questo generatore è utile per il concatenamento.
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 |
|---|---|---|
css | String | Il valore CSS per il colore (ad esempio "blue" o "#00f"). |
Indietro
AreaChartBuilder: questo generatore è 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. const builder = Charts.newLineChart(); builder.setColors(['green', 'red']);
Parametri
| Nome | Tipo | Descrizione |
|---|---|---|
css | String[] | Un array di valori CSS di colore, ad esempio ["red", "#acf"]. L'ennesimo elemento
dell'array rappresenta il colore dell'ennesima linea del grafico. |
Indietro
AreaChartBuilder: questo generatore è utile per il concatenamento.
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 dell'origine dati e una DataTable, l'URL dell'origine dati viene ignorato.
Per saperne di più sull'esecuzione di query sulle origini dati, consulta la documentazione di Grafici Google.
Parametri
| Nome | Tipo | Descrizione |
|---|---|---|
url | String | L'URL dell'origine dati, inclusi eventuali parametri di query. |
Indietro
AreaChartBuilder: questo generatore è utile per il concatenamento.
setDataTable(tableBuilder)
Imposta la tabella di dati da utilizzare per il grafico utilizzando un DataTableBuilder. Si tratta di un metodo pratico
per impostare la tabella dei dati senza dover chiamare build().
Parametri
| Nome | Tipo | Descrizione |
|---|---|---|
table | Data | Uno strumento per la creazione di tabelle di dati. Una nuova tabella di dati viene creata immediatamente nell'ambito di questa chiamata, pertanto eventuali ulteriori aggiornamenti al generatore non verranno visualizzati nel grafico. |
Indietro
AreaChartBuilder: questo generatore è utile per il concatenamento.
setDataTable(table)
Imposta la tabella dei dati contenente le linee del grafico, nonché le etichette dell'asse X. La prima colonna deve essere una stringa e contenere le etichette dell'asse orizzontale. Possono seguire un numero qualsiasi di colonne, tutte devono essere numeriche. Ogni colonna viene visualizzata come riga separata.
Parametri
| Nome | Tipo | Descrizione |
|---|---|---|
table | Data | La tabella di dati da utilizzare per il grafico. |
Indietro
AreaChartBuilder: questo generatore è utile per il concatenamento.
setDataViewDefinition(dataViewDefinition)
Imposta la definizione della visualizzazione dei dati da utilizzare per il grafico.
Parametri
| Nome | Tipo | Descrizione |
|---|---|---|
data | Data | Un oggetto di definizione della visualizzazione dei dati che definisce la visualizzazione da derivare dall'origine dati specificata per il disegno del grafico. |
Indietro
AreaChartBuilder: questo generatore è 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. |
Indietro
AreaChartBuilder: questo generatore è utile per il concatenamento.
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. |
Indietro
AreaChartBuilder: questo generatore è 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. const textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26); const style = textStyleBuilder.build(); const builder = Charts.newLineChart(); builder.setLegendTextStyle(style);
Parametri
| Nome | Tipo | Descrizione |
|---|---|---|
text | Text | Lo stile del testo da utilizzare per la legenda del grafico. |
Indietro
AreaChartBuilder: questo generatore è utile per il concatenamento.
setOption(option, value)
Imposta le opzioni avanzate per questo grafico. Visualizza le opzioni disponibili per questo grafico. Questo metodo non ha effetto se l'opzione specificata non è valida.
// Build an area chart with a 1-second animation duration. const builder = Charts.newAreaChart(); 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. |
Indietro
AreaChartBuilder: questo generatore è utile per il concatenamento.
setPointStyle(style)
Imposta lo stile dei punti nella linea. Per impostazione predefinita, i punti non hanno stili particolari ed è visibile solo la linea.
// Creates a line chart builder and sets large point style. const builder = Charts.newLineChart(); builder.setPointStyle(Charts.PointStyle.LARGE);
Parametri
| Nome | Tipo | Descrizione |
|---|---|---|
style | Point | Lo stile da utilizzare per i punti nella linea. |
Indietro
AreaChartBuilder: questo generatore è utile per il concatenamento.
Vedi anche
setRange(start, end)
Imposta l'intervallo per il grafico.
Se alcuni punti dati non rientrano nell'intervallo, quest'ultimo viene espanso per includerli.
Parametri
| Nome | Tipo | Descrizione |
|---|---|---|
start | Number | Il valore della linea della griglia più bassa dell'asse dell'intervallo. |
end | Number | Il valore per la linea della griglia più alta dell'asse dell'intervallo. |
Indietro
AreaChartBuilder: questo generatore è utile per il concatenamento.
setStacked()
Utilizza linee in pila, il che significa che i valori delle linee e delle barre sono in pila (accumulati). Per impostazione predefinita, non è previsto alcun stacking.
Indietro
AreaChartBuilder: questo generatore è utile per il concatenamento.
setTitle(chartTitle)
Imposta il titolo del grafico. Il titolo viene visualizzato centrato 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 |
|---|---|---|
chart | String | il titolo del grafico. |
Indietro
AreaChartBuilder: questo generatore è 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. const textStyleBuilder = Charts.newTextStyle().setColor('#0000FF').setFontSize(26); const style = textStyleBuilder.build(); const builder = Charts.newLineChart(); builder.setTitleTextStyle(style);
Parametri
| Nome | Tipo | Descrizione |
|---|---|---|
text | Text | Lo stile del testo da utilizzare per il titolo del grafico. Puoi creare un oggetto Text chiamando Charts.newTextStyle(). |
Indietro
AreaChartBuilder: questo generatore è utile per il concatenamento.
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 |
|---|---|---|
text | Text | Lo stile del testo da utilizzare per il titolo dell'asse orizzontale. Puoi creare un oggetto Text chiamando Charts.newTextStyle(). |
Indietro
AreaChartBuilder: questo generatore è utile per il concatenamento.
setXAxisTitle(title)
Aggiunge un titolo all'asse orizzontale. Il titolo è centrato e viene visualizzato sotto le etichette dei valori 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. |
Indietro
AreaChartBuilder: questo generatore è 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. const textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); const builder = Charts.newLineChart(); builder.setXAxisTitleTextStyle(textStyle);
Parametri
| Nome | Tipo | Descrizione |
|---|---|---|
text | Text | Lo stile del testo da utilizzare per il titolo dell'asse orizzontale. Puoi creare un oggetto Text chiamando Charts.newTextStyle(). |
Indietro
AreaChartBuilder: questo generatore è utile per il concatenamento.
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 |
|---|---|---|
text | Text | Lo stile del testo da utilizzare per il titolo dell'asse orizzontale. Puoi creare un oggetto Text chiamando Charts.newTextStyle(). |
Indietro
AreaChartBuilder: questo generatore è utile per il concatenamento.
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. |
Indietro
AreaChartBuilder: questo generatore è utile per il concatenamento.
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 |
|---|---|---|
text | Text | Lo stile del testo da utilizzare per il titolo dell'asse orizzontale. Puoi creare un oggetto Text chiamando Charts.newTextStyle(). |
Indietro
AreaChartBuilder: questo generatore è utile per il concatenamento.
useLogScale()
Trasforma l'asse dell'intervallo in una scala logaritmica (richiede che tutti i valori siano positivi). L'asse dell'intervallo è l'asse verticale per i grafici verticali (come a linee, ad area o a colonne) e l'asse orizzontale per i grafici orizzontali (come a barre).
Indietro
AreaChartBuilder: questo generatore è utile per il concatenamento.