散佈圖的建構工具。詳情請參閱 Google 圖表說明文件。
以下範例說明如何建立散佈圖。資料是從 Google 試算表匯入。
// Get sample data from a spreadsheet. var dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=C1%3AD' + '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=4&headers=-1'; var 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); var chart = chartBuilder.build();
方法
內容詳盡的說明文件
build()
setBackgroundColor(cssValue)
設定圖表的背景顏色。
// Creates a line chart builder and sets the background color to gray var builder = Charts.newLineChart(); builder.setBackgroundColor("gray");
參數
名稱 | 類型 | 說明 |
---|---|---|
cssValue | String | 顏色的 CSS 值 (例如 "blue" 或 "#00f" )。 |
回攻員
ScatterChartBuilder
— 這個建構工具適用於鏈結。
setColors(cssValues)
設定圖表中線條的顏色。
// 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"]);
參數
名稱 | 類型 | 說明 |
---|---|---|
cssValues | String[] | 顏色 CSS 值陣列,例如 ["red", "#acf"] 。陣列中的第 n 個元素代表圖表中第 n 個線條的顏色。 |
回攻員
ScatterChartBuilder
— 這個建構工具適用於鏈結。
setDataSourceUrl(url)
設定用來從外部來源 (例如 Google 試算表) 擷取資料的資料來源網址。如果提供資料來源網址和 DataTable,系統就會忽略資料來源網址。
如要進一步瞭解如何查詢資料來源,請參閱 Google 圖表說明文件。
參數
名稱 | 類型 | 說明 |
---|---|---|
url | String | 資料來源網址 (包括任何查詢參數)。 |
回攻員
ScatterChartBuilder
— 這個建構工具適用於鏈結。
setDataTable(tableBuilder)
使用 DataTableBuilder 設定要用於圖表的資料表。此方式可讓您輕鬆設定資料表,無需呼叫 build()
。
參數
名稱 | 類型 | 說明 |
---|---|---|
tableBuilder | DataTableBuilder | 資料表建構工具。系統會在這項呼叫中立即建立新的資料表,因此任何關於建構工具的進一步更新都不會反映在圖表中。 |
回攻員
ScatterChartBuilder
— 這個建構工具適用於鏈結。
setDataTable(table)
設定包含圖表線條的資料表格,以及 X 軸標籤。第一欄應為字串,且包含水平軸標籤。後續可加入的資料欄數量不拘,所有欄都必須是數字。每一欄會單獨顯示為一行。
參數
名稱 | 類型 | 說明 |
---|---|---|
table | DataTableSource | 要用於圖表的資料表。 |
回攻員
ScatterChartBuilder
— 這個建構工具適用於鏈結。
setDataViewDefinition(dataViewDefinition)
設定要用於圖表的資料檢視定義。
參數
名稱 | 類型 | 說明 |
---|---|---|
dataViewDefinition | DataViewDefinition | 資料檢視定義物件,用來定義應從圖表繪圖的特定資料來源衍生的檢視畫面。 |
回攻員
ScatterChartBuilder
— 這個建構工具適用於鏈結。
setDimensions(width, height)
設定圖表的維度。
參數
名稱 | 類型 | 說明 |
---|---|---|
width | Integer | 圖表的寬度,以像素為單位。 |
height | Integer | 圖表的高度,以像素為單位。 |
回攻員
ScatterChartBuilder
— 這個建構工具適用於鏈結。
setLegendPosition(position)
設定與圖表相關的圖例位置。根據預設,系統不提供圖例。
// Creates a line chart builder and sets the legend position to right. var builder = Charts.newLineChart(); builder.setLegendPosition(Charts.Position.RIGHT);
參數
名稱 | 類型 | 說明 |
---|---|---|
position | Position | 圖例的位置。 |
回攻員
ScatterChartBuilder
— 這個建構工具適用於鏈結。
setLegendTextStyle(textStyle)
設定圖表圖例的文字樣式。
// 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);
參數
名稱 | 類型 | 說明 |
---|---|---|
textStyle | TextStyle | 圖表圖例使用的文字樣式。 |
回攻員
ScatterChartBuilder
— 這個建構工具適用於鏈結。
setOption(option, value)
設定這張圖表的進階選項。請參閱此圖表的可用選項。如果指定的選項無效,這個方法就不會有任何作用。
// Build a scatter chart with a 1-second animation duration. var builder = Charts.newScatterChart(); builder.setOption('animation.duration', 1000); var chart = builder.build();
參數
名稱 | 類型 | 說明 |
---|---|---|
option | String | 要設定的選項。 |
value | Object | 要設定的值。 |
回攻員
ScatterChartBuilder
— 這個建構工具適用於鏈結。
setPointStyle(style)
設定線條中點的樣式。根據預設,點不會特定樣式,只會顯示線條。
// Creates a line chart builder and sets large point style. var builder = Charts.newLineChart(); builder.setPointStyle(Charts.PointStyle.LARGE);
參數
名稱 | 類型 | 說明 |
---|---|---|
style | PointStyle | 線條中點使用的樣式。 |
回攻員
ScatterChartBuilder
— 這個建構工具適用於鏈結。
另請參閱
setTitle(chartTitle)
設定圖表標題。標題會顯示在圖表的正上方。
// Creates a line chart builder and title to 'My Line Chart'. var builder = Charts.newLineChart(); builder.setTitle('My Line Chart')
參數
名稱 | 類型 | 說明 |
---|---|---|
chartTitle | String | 圖表標題。 |
回攻員
ScatterChartBuilder
— 這個建構工具適用於鏈結。
setTitleTextStyle(textStyle)
設定圖表標題的文字樣式。
// 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);
參數
名稱 | 類型 | 說明 |
---|---|---|
textStyle | TextStyle | 圖表標題使用的文字樣式。您可以呼叫 Charts.newTextStyle() 來建立 TextStyleBuilder 物件。 |
回攻員
ScatterChartBuilder
— 這個建構工具適用於鏈結。
setXAxisLogScale()
setXAxisRange(start, end)
設定圖表水平軸的範圍。
如有任何資料點超出範圍,系統會擴大範圍以納入這些資料點。
// Creates a scatter chart builder and sets the X-axis range to be 0 to 100. var builder = Charts.newTableChart(); builder.setXAxisRange(0, 100);
參數
名稱 | 類型 | 說明 |
---|---|---|
start | Number | 水平軸最低格線的值。 |
end | Number | 水平軸最高格線的值。 |
回攻員
ScatterChartBuilder
— 這個建構工具適用於鏈結。
setXAxisTextStyle(textStyle)
設定水平軸文字樣式。
// 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);
參數
名稱 | 類型 | 說明 |
---|---|---|
textStyle | TextStyle | 橫軸標題使用的文字樣式。您可以呼叫 Charts.newTextStyle() 來建立 TextStyleBuilder 物件。 |
回攻員
ScatterChartBuilder
— 這個建構工具適用於鏈結。
setXAxisTitle(title)
在橫軸加入標題。標題會置中,並顯示在軸值標籤下方。
// Creates a line chart builder and sets the X-axis title. var builder = Charts.newLineChart(); builder.setTitle('X-axis Title')
參數
名稱 | 類型 | 說明 |
---|---|---|
title | String | X 軸的標題。 |
回攻員
ScatterChartBuilder
— 這個建構工具適用於鏈結。
setXAxisTitleTextStyle(textStyle)
設定水平軸標題文字樣式。
// 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);
參數
名稱 | 類型 | 說明 |
---|---|---|
textStyle | TextStyle | 橫軸標題使用的文字樣式。您可以呼叫 Charts.newTextStyle() 來建立 TextStyleBuilder 物件。 |
回攻員
ScatterChartBuilder
— 這個建構工具適用於鏈結。
setYAxisLogScale()
setYAxisRange(start, end)
設定圖表垂直軸的範圍。如有任何資料點超出範圍,則會擴大範圍以納入這些資料點。
// Creates a scatter chart builder and sets the Y-axis range to be 0 to 100. var builder = Charts.newTableChart(); builder.setYAxisRange(0, 100);
參數
名稱 | 類型 | 說明 |
---|---|---|
start | Number | 垂直軸最低格線的值。 |
end | Number | 垂直軸最高格線的值。 |
回攻員
ScatterChartBuilder
— 這個建構工具適用於鏈結。
setYAxisTextStyle(textStyle)
設定垂直軸文字樣式。
// 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);
參數
名稱 | 類型 | 說明 |
---|---|---|
textStyle | TextStyle | 橫軸標題使用的文字樣式。您可以呼叫 Charts.newTextStyle() 來建立 TextStyleBuilder 物件。 |
回攻員
ScatterChartBuilder
— 這個建構工具適用於鏈結。
setYAxisTitle(title)
在縱軸加入標題。標題會置中,並顯示在值標籤的左側。
// Creates a line chart builder and sets the Y-axis title. var builder = Charts.newLineChart(); builder.setYAxisTitle('Y-axis Title')
參數
名稱 | 類型 | 說明 |
---|---|---|
title | String | Y 軸標題。 |
回攻員
ScatterChartBuilder
— 這個建構工具適用於鏈結。
setYAxisTitleTextStyle(textStyle)
設定縱軸標題文字樣式。
// 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);
參數
名稱 | 類型 | 說明 |
---|---|---|
textStyle | TextStyle | 橫軸標題使用的文字樣式。您可以呼叫 Charts.newTextStyle() 來建立 TextStyleBuilder 物件。 |
回攻員
ScatterChartBuilder
— 這個建構工具適用於鏈結。