Strumento per la creazione di grafici a dispersione. Per ulteriori dettagli, consulta la documentazione di Google Charts.
Ecco un esempio che mostra come creare un grafico a dispersione. 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=C1%3AD' + '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=4&headers=-1'; const chartBuilder = Charts.newScatterChart() .setTitle('Adjusted GDP & U.S. Population') .setXAxisTitle('U.S. Population (millions)') .setYAxisTitle('Adjusted GDP ($ billions)') .setDimensions(600, 500) .setLegendPosition(Charts.Position.NONE) .setDataSourceUrl(dataSourceUrl); const chart = chartBuilder.build();
Metodi
Metodo | Tipo restituito | Breve descrizione |
---|---|---|
build() | Chart | Crea il grafico. |
set | Scatter | Imposta il colore di sfondo del grafico. |
set | Scatter | Imposta i colori delle linee nel grafico. |
set | Scatter | Imposta l'URL dell'origine dati utilizzato per estrarre i dati da un'origine esterna, ad esempio Fogli Google. |
set | Scatter | Imposta la tabella di dati da utilizzare per il grafico utilizzando un DataTableBuilder. |
set | Scatter | Imposta la tabella di dati contenente le linee per il grafico, nonché le etichette dell'asse X. |
set | Scatter | Imposta la definizione della visualizzazione dei dati da utilizzare per il grafico. |
set | Scatter | Imposta le dimensioni del grafico. |
set | Scatter | Imposta la posizione della legenda rispetto al grafico. |
set | Scatter | Imposta lo stile del testo della legenda del grafico. |
set | Scatter | Imposta le opzioni avanzate per questo grafico. |
set | Scatter | Imposta lo stile dei punti della linea. |
set | Scatter | Imposta il titolo del grafico. |
set | Scatter | Imposta lo stile del testo del titolo del grafico. |
set | Scatter | Imposta l'asse orizzontale su una scala logaritmica (è necessario che tutti i valori siano positivi). |
set | Scatter | Imposta l'intervallo per l'asse orizzontale del grafico. |
set | Scatter | Imposta lo stile del testo dell'asse orizzontale. |
set | Scatter | Aggiunge un titolo all'asse orizzontale. |
set | Scatter | Imposta lo stile del testo del titolo dell'asse orizzontale. |
set | Scatter | Imposta l'asse verticale su una scala logaritmica (è necessario che tutti i valori siano positivi). |
set | Scatter | Imposta l'intervallo per l'asse verticale del grafico. |
set | Scatter | Imposta lo stile del testo dell'asse verticale. |
set | Scatter | Aggiunge un titolo all'asse verticale. |
set | Scatter | Imposta lo stile del testo del titolo dell'asse verticale. |
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.
set Background Color(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 del colore (ad esempio "blue" o "#00f" ). |
Invio
Scatter
: questo builder è utile per l'accodamento.
set Colors(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'elemento n-esimo
nell'array rappresenta il colore della riga n-esima nel grafico. |
Invio
Scatter
: questo builder è utile per l'accodamento.
set Data Source Url(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
Scatter
: questo builder è utile per l'accodamento.
set Data Table(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 |
---|---|---|
table | Data | 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
Scatter
: questo builder è utile per l'accodamento.
set Data Table(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 | Data | La tabella di dati da utilizzare per il grafico. |
Invio
Scatter
: questo builder è utile per l'accodamento.
set Data View Definition(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 ricavare dall'origine dati specificata per il disegno del grafico. |
Invio
Scatter
: questo builder è utile per l'accodamento.
set Dimensions(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
Scatter
: questo builder è utile per l'accodamento.
set Legend Position(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
Scatter
: questo builder è utile per l'accodamento.
set Legend Text Style(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 di testo da utilizzare per la legenda del grafico. |
Invio
Scatter
: questo builder è utile per l'accodamento.
set Option(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 scatter chart with a 1-second animation duration. const builder = Charts.newScatterChart(); 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
Scatter
: questo builder è utile per l'accodamento.
set Point Style(style)
Imposta lo stile dei punti della 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 della linea. |
Invio
Scatter
: questo builder è utile per l'accodamento.
Vedi anche
set Title(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 |
---|---|---|
chart | String | il titolo del grafico. |
Invio
Scatter
: questo builder è utile per l'accodamento.
set TitleTextStyle(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 di testo da utilizzare per il titolo del grafico. Puoi creare un oggetto Text chiamando Charts.newTextStyle() . |
Invio
Scatter
: questo builder è utile per l'accodamento.
set XAxis Log Scale()
Imposta l'asse orizzontale su una scala logaritmica (è necessario che tutti i valori siano positivi).
Invio
Scatter
: questo builder è utile per l'accodamento.
set XAxis Range(start, end)
Imposta l'intervallo per l'asse orizzontale del grafico.
Se alcuni punti dati non rientrano nell'intervallo, questo viene espanso in modo da includerli.
// Creates a scatter chart builder and sets the X-axis range to be 0 to 100. const builder = Charts.newTableChart(); builder.setXAxisRange(0, 100);
Parametri
Nome | Tipo | Descrizione |
---|---|---|
start | Number | Il valore della riga della griglia più bassa dell'asse orizzontale. |
end | Number | Il valore della linea di griglia più alta dell'asse orizzontale. |
Invio
Scatter
: questo builder è utile per l'accodamento.
set XAxis Text Style(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 di testo da utilizzare per il titolo dell'asse orizzontale. Puoi creare un oggetto Text chiamando Charts.newTextStyle() . |
Invio
Scatter
: questo builder è utile per l'accodamento.
set XAxis Title(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
Scatter
: questo builder è utile per l'accodamento.
set XAxis TitleTextStyle(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 di testo da utilizzare per il titolo dell'asse orizzontale. Puoi creare un oggetto Text chiamando Charts.newTextStyle() . |
Invio
Scatter
: questo builder è utile per l'accodamento.
set YAxis Log Scale()
Imposta l'asse verticale su una scala logaritmica (è necessario che tutti i valori siano positivi).
Invio
Scatter
: questo builder è utile per l'accodamento.
set YAxis Range(start, end)
Imposta l'intervallo per l'asse verticale del grafico. Se alcuni punti dati non rientrano nell'intervallo, l'intervallo viene espanso per includerli.
// Creates a scatter chart builder and sets the Y-axis range to be 0 to 100. const builder = Charts.newTableChart(); builder.setYAxisRange(0, 100);
Parametri
Nome | Tipo | Descrizione |
---|---|---|
start | Number | Il valore della linea di griglia più bassa dell'asse verticale. |
end | Number | Il valore della linea di griglia più alta dell'asse verticale. |
Invio
Scatter
: questo builder è utile per l'accodamento.
set YAxis Text Style(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 di testo da utilizzare per il titolo dell'asse orizzontale. Puoi creare un oggetto Text chiamando Charts.newTextStyle() . |
Invio
Scatter
: questo builder è utile per l'accodamento.
set YAxis Title(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
Scatter
: questo builder è utile per l'accodamento.
set YAxis TitleTextStyle(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 di testo da utilizzare per il titolo dell'asse orizzontale. Puoi creare un oggetto Text chiamando Charts.newTextStyle() . |
Invio
Scatter
: questo builder è utile per l'accodamento.