本頁面由 Cloud Translation API 翻譯而成。

Class ScatterChartBuilder

散佈圖的建構工具。詳情請參閱 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()`	`Chart`	建立圖表。
`setBackgroundColor(cssValue)`	`ScatterChartBuilder`	設定圖表的背景顏色。
`setColors(cssValues)`	`ScatterChartBuilder`	設定圖表線條的顏色。
`setDataSourceUrl(url)`	`ScatterChartBuilder`	設定用來從外部來源 (例如 Google) 擷取資料的資料來源網址試算表。
`setDataTable(tableBuilder)`	`ScatterChartBuilder`	使用 DataTableBuilder 設定要用於圖表的資料表。
`setDataTable(table)`	`ScatterChartBuilder`	設定資料表 (其中包含圖表的線條，以及 X 軸標籤)。
`setDataViewDefinition(dataViewDefinition)`	`ScatterChartBuilder`	設定圖表要使用的資料檢視定義。
`setDimensions(width, height)`	`ScatterChartBuilder`	設定圖表的維度。
`setLegendPosition(position)`	`ScatterChartBuilder`	設定與圖表相關的圖例位置。
`setLegendTextStyle(textStyle)`	`ScatterChartBuilder`	設定圖表圖例的文字樣式。
`setOption(option, value)`	`ScatterChartBuilder`	設定這張圖表的進階選項。
`setPointStyle(style)`	`ScatterChartBuilder`	設定線條中點的樣式。
`setTitle(chartTitle)`	`ScatterChartBuilder`	設定圖表的標題。
`setTitleTextStyle(textStyle)`	`ScatterChartBuilder`	設定圖表標題的文字樣式。
`setXAxisLogScale()`	`ScatterChartBuilder`	將水平軸設為對數尺度 (所有值都必須為正數)。
`setXAxisRange(start, end)`	`ScatterChartBuilder`	設定圖表橫軸的範圍。
`setXAxisTextStyle(textStyle)`	`ScatterChartBuilder`	設定橫軸的文字樣式。
`setXAxisTitle(title)`	`ScatterChartBuilder`	為橫軸加上標題。
`setXAxisTitleTextStyle(textStyle)`	`ScatterChartBuilder`	設定橫軸標題文字樣式。
`setYAxisLogScale()`	`ScatterChartBuilder`	將垂直軸設為對數尺度 (所有值都必須為正數)。
`setYAxisRange(start, end)`	`ScatterChartBuilder`	設定圖表的垂直軸範圍。
`setYAxisTextStyle(textStyle)`	`ScatterChartBuilder`	設定縱軸的文字樣式。
`setYAxisTitle(title)`	`ScatterChartBuilder`	為縱軸加入標題。
`setYAxisTitleTextStyle(textStyle)`	`ScatterChartBuilder`	設定縱軸標題文字樣式。

內容詳盡的說明文件

`build()`

建立圖表。

回攻員

Chart：Chart 物件，可嵌入文件、UI 元素或做為靜態用途圖片。

`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) 擷取資料的資料來源網址試算表。如有提供資料來源網址和資料表，系統就會忽略資料來源網址。

如要進一步瞭解如何查詢資料來源，請參閱 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：這項建構工具適用於鏈結。

另請參閱

PointStyle

`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()`

將水平軸設為對數尺度 (所有值都必須為正數)。

回攻員

ScatterChartBuilder：這項建構工具適用於鏈結。

`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()`

將垂直軸設為對數尺度 (所有值都必須為正數)。

回攻員

ScatterChartBuilder：這項建構工具適用於鏈結。

`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：這項建構工具適用於鏈結。