Strumento per la creazione di grafici a linee. Per ulteriori informazioni, consulta la documentazione di Google Chart.
Ecco un esempio che mostra come creare un grafico a linee. I dati vengono importati da un foglio di lavoro Google.
// Get sample data from a spreadsheet. var dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=A1%3AG5' + '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=2&headers=-1'; var chartBuilder = Charts.newLineChart() .setTitle('Yearly Rainfall') .setXAxisTitle('Month') .setYAxisTitle('Rainfall (in)') .setDimensions(600, 500) .setCurveStyle(Charts.CurveStyle.SMOOTH) .setPointStyle(Charts.PointStyle.MEDIUM) .setDataSourceUrl(dataSourceUrl); var chart = chartBuilder.build();
Metodi
Metodo | Tipo restituito | Breve descrizione |
---|---|---|
build() | Chart | Crea il grafico. |
reverseCategories() | LineChartBuilder | Inverte il disegno delle serie nell'asse del dominio. |
setBackgroundColor(cssValue) | LineChartBuilder | Imposta il colore di sfondo del grafico. |
setColors(cssValues) | LineChartBuilder | Imposta i colori delle linee nel grafico. |
setCurveStyle(style) | LineChartBuilder | Imposta lo stile da utilizzare per le curve nel grafico. |
setDataSourceUrl(url) | LineChartBuilder | Imposta l'URL dell'origine dati utilizzato per estrarre i dati da un'origine esterna, ad esempio Fogli Google. |
setDataTable(tableBuilder) | LineChartBuilder | Imposta la tabella di dati da utilizzare per il grafico utilizzando un DataTableBuilder. |
setDataTable(table) | LineChartBuilder | Imposta la tabella di dati che contiene le linee per il grafico e le etichette dell'asse X. |
setDataViewDefinition(dataViewDefinition) | LineChartBuilder | Imposta la definizione della vista dati da utilizzare per il grafico. |
setDimensions(width, height) | LineChartBuilder | Imposta le dimensioni del grafico. |
setLegendPosition(position) | LineChartBuilder | Imposta la posizione della legenda rispetto al grafico. |
setLegendTextStyle(textStyle) | LineChartBuilder | Imposta lo stile di testo della legenda del grafico. |
setOption(option, value) | LineChartBuilder | Imposta le opzioni avanzate per questo grafico. |
setPointStyle(style) | LineChartBuilder | Imposta lo stile per i punti nella linea. |
setRange(start, end) | LineChartBuilder | Imposta l'intervallo per il grafico. |
setTitle(chartTitle) | LineChartBuilder | Imposta il titolo del grafico. |
setTitleTextStyle(textStyle) | LineChartBuilder | Imposta lo stile di testo del titolo del grafico. |
setXAxisTextStyle(textStyle) | LineChartBuilder | Imposta lo stile di testo dell'asse orizzontale. |
setXAxisTitle(title) | LineChartBuilder | Aggiunge un titolo all'asse orizzontale. |
setXAxisTitleTextStyle(textStyle) | LineChartBuilder | Imposta lo stile del testo del titolo dell'asse orizzontale. |
setYAxisTextStyle(textStyle) | LineChartBuilder | Imposta lo stile del testo dell'asse verticale. |
setYAxisTitle(title) | LineChartBuilder | Aggiunge un titolo all'asse verticale. |
setYAxisTitleTextStyle(textStyle) | LineChartBuilder | Imposta lo stile del testo del titolo dell'asse verticale. |
useLogScale() | LineChartBuilder | Imposta l'asse dell'intervallo in una scala logaritmica (è necessario che tutti i valori siano positivi). |
Documentazione dettagliata
build()
Crea il grafico.
Ritorni
Chart
: oggetto Chart che può essere incorporato in documenti ed elementi dell'interfaccia utente o utilizzato come immagine statica.
reverseCategories()
Inverte il disegno delle serie nell'asse del dominio. Per i grafici a intervalli verticali (come grafici a linee, ad area o a colonne), significa che l'asse orizzontale viene tracciato da destra a sinistra. Per i grafici a intervallo orizzontale (come i grafici a barre), l'asse verticale viene disegnato dall'alto verso il basso. Per i grafici a torta, significa che 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();
Ritorni
LineChartBuilder
: questo builder, 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 var builder = Charts.newLineChart(); builder.setBackgroundColor("gray");
Parametri
Nome | Tipo | Descrizione |
---|---|---|
cssValue | String | Il valore CSS del colore (ad esempio "blue" o "#00f" ). |
Ritorni
LineChartBuilder
: 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 di colore, ad esempio ["red", "#acf"] . L'ennesimo elemento nell'array rappresenta il colore dell'n-esima linea nel grafico. |
Ritorni
LineChartBuilder
: questo builder, utile per il concatenamento.
setCurveStyle(style)
Imposta lo stile da utilizzare per le curve nel grafico. Vedi CurveStyle
per gli stili di curva consentiti.
// Creates a line chart builder and curves the lines in the chart. var builder = Charts.newLineChart(); builder.setCurveStyle(Charts.CurveStyle.SMOOTH)
Parametri
Nome | Tipo | Descrizione |
---|---|---|
style | CurveStyle | Lo stile delle curve del grafico. |
Ritorni
LineChartBuilder
: questo builder, utile per il concatenamento.
Vedi anche
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 ulteriori informazioni 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 ricerca. |
Ritorni
LineChartBuilder
: questo builder, utile per il concatenamento.
setDataTable(tableBuilder)
Imposta la tabella di dati da utilizzare per il grafico utilizzando un 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. Nell'ambito di questa chiamata viene creata immediatamente una nuova tabella di dati, pertanto eventuali ulteriori aggiornamenti al builder non saranno visualizzati nel grafico. |
Ritorni
LineChartBuilder
: questo builder, utile per il concatenamento.
setDataTable(table)
Imposta la tabella di dati che contiene le linee per il grafico e 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 devono essere numeriche. Ogni colonna viene visualizzata come una riga separata.
Parametri
Nome | Tipo | Descrizione |
---|---|---|
table | DataTableSource | La tabella di dati da utilizzare per il grafico. |
Ritorni
LineChartBuilder
: questo builder, utile per il concatenamento.
setDataViewDefinition(dataViewDefinition)
Imposta la definizione della vista dati da utilizzare per il grafico.
Parametri
Nome | Tipo | Descrizione |
---|---|---|
dataViewDefinition | DataViewDefinition | Un oggetto di definizione delle viste dati che definisce la vista da derivare dall'origine dati specificata per il disegno del grafico. |
Ritorni
LineChartBuilder
: 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. |
Ritorni
LineChartBuilder
: questo builder, utile per il concatenamento.
setLegendPosition(position)
Imposta la posizione della legenda rispetto al grafico. Per impostazione predefinita, non è presente 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. |
Ritorni
LineChartBuilder
: questo builder, utile per il concatenamento.
setLegendTextStyle(textStyle)
Imposta lo stile di 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. |
Ritorni
LineChartBuilder
: questo builder, utile per il concatenamento.
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 line chart with a 1-second animation duration. var builder = Charts.newLineChart(); 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. |
Ritorni
LineChartBuilder
: questo builder, utile per il concatenamento.
setPointStyle(style)
Imposta lo stile per i punti nella linea. Per impostazione predefinita, i punti non hanno stili particolari e solo la linea è visibile.
// Creates a line chart builder and sets large point style. var builder = Charts.newLineChart(); builder.setPointStyle(Charts.PointStyle.LARGE);
Parametri
Nome | Tipo | Descrizione |
---|---|---|
style | PointStyle | Lo stile da utilizzare per i punti nella linea. |
Ritorni
LineChartBuilder
: questo builder, utile per il concatenamento.
Vedi anche
setRange(start, end)
Imposta l'intervallo per il grafico.
Se alcuni punti dati non rientrano nell'intervallo, l'intervallo viene espanso per includere questi punti dati.
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. |
Ritorni
LineChartBuilder
: questo builder, 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'. var builder = Charts.newLineChart(); builder.setTitle('My Line Chart')
Parametri
Nome | Tipo | Descrizione |
---|---|---|
chartTitle | String | titolo del grafico. |
Ritorni
LineChartBuilder
: questo builder, utile per il concatenamento.
setTitleTextStyle(textStyle)
Imposta lo stile di 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() . |
Ritorni
LineChartBuilder
: questo builder, utile per il concatenamento.
setXAxisTextStyle(textStyle)
Imposta lo stile di testo dell'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 di testo da utilizzare per il titolo dell'asse orizzontale. Puoi creare un oggetto TextStyleBuilder chiamando Charts.newTextStyle() . |
Ritorni
LineChartBuilder
: questo builder, 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. var builder = Charts.newLineChart(); builder.setTitle('X-axis Title')
Parametri
Nome | Tipo | Descrizione |
---|---|---|
title | String | Il titolo dell'asse X. |
Ritorni
LineChartBuilder
: 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 di testo da utilizzare per il titolo dell'asse orizzontale. Puoi creare un oggetto TextStyleBuilder chiamando Charts.newTextStyle() . |
Ritorni
LineChartBuilder
: questo builder, 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. var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); var 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() . |
Ritorni
LineChartBuilder
: questo builder, 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. var builder = Charts.newLineChart(); builder.setYAxisTitle('Y-axis Title')
Parametri
Nome | Tipo | Descrizione |
---|---|---|
title | String | Il titolo dell'asse Y. |
Ritorni
LineChartBuilder
: questo builder, 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. var textStyle = Charts.newTextStyle().setColor('blue').setFontSize(18).build(); var 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() . |
Ritorni
LineChartBuilder
: questo builder, utile per il concatenamento.
useLogScale()
Imposta l'asse dell'intervallo in una scala logaritmica (è necessario che tutti i valori siano positivi). L'asse dell'intervallo è l'asse verticale per i grafici verticali (ad esempio a linee, ad area o colonne) e l'asse orizzontale per i grafici orizzontali (ad esempio a barre).
Ritorni
LineChartBuilder
: questo builder, utile per il concatenamento.