Class AreaChartBuilder

面積圖的建構工具。詳情請參閱 Google 圖表說明文件。

以下範例說明如何建構面積圖。

// 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();

方法

方法	傳回類型	簡短說明
`build()`	`Chart`	建構圖表。
`reverseCategories()`	`AreaChartBuilder`	反轉網域軸中數列的繪製方式。
`setBackgroundColor(cssValue)`	`AreaChartBuilder`	設定圖表的背景顏色。
`setColors(cssValues)`	`AreaChartBuilder`	設定圖表中線條的顏色。
`setDataSourceUrl(url)`	`AreaChartBuilder`	設定用於從外部來源 (例如 Google 試算表) 擷取資料的資料來源網址。
`setDataTable(tableBuilder)`	`AreaChartBuilder`	使用 DataTableBuilder 設定要用於圖表的資料表。
`setDataTable(table)`	`AreaChartBuilder`	設定包含圖表線條和 X 軸標籤的資料表。
`setDataViewDefinition(dataViewDefinition)`	`AreaChartBuilder`	設定要用於圖表的資料檢視定義。
`setDimensions(width, height)`	`AreaChartBuilder`	設定圖表的尺寸。
`setLegendPosition(position)`	`AreaChartBuilder`	設定圖例相對於圖表的位置。
`setLegendTextStyle(textStyle)`	`AreaChartBuilder`	設定圖表圖例的文字樣式。
`setOption(option, value)`	`AreaChartBuilder`	設定這張圖表的進階選項。
`setPointStyle(style)`	`AreaChartBuilder`	設定線條中點的樣式。
`setRange(start, end)`	`AreaChartBuilder`	設定圖表的範圍。
`setStacked()`	`AreaChartBuilder`	使用堆疊線，也就是堆疊 (累計) 線條和長條的值。
`setTitle(chartTitle)`	`AreaChartBuilder`	設定圖表的標題。
`setTitleTextStyle(textStyle)`	`AreaChartBuilder`	設定圖表標題的文字樣式。
`setXAxisTextStyle(textStyle)`	`AreaChartBuilder`	設定橫軸文字樣式。
`setXAxisTitle(title)`	`AreaChartBuilder`	在橫軸中加入標題。
`setXAxisTitleTextStyle(textStyle)`	`AreaChartBuilder`	設定水平軸標題文字樣式。
`setYAxisTextStyle(textStyle)`	`AreaChartBuilder`	設定縱軸文字樣式。
`setYAxisTitle(title)`	`AreaChartBuilder`	為縱軸新增標題。
`setYAxisTitleTextStyle(textStyle)`	`AreaChartBuilder`	設定縱軸標題文字樣式。
`useLogScale()`	`AreaChartBuilder`	將範圍軸設為對數比例 (所有值都必須為正數)。

內容詳盡的說明文件

`build()`

建構圖表。

回攻員

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

`reverseCategories()`

反轉網域軸中數列的繪圖。如果是垂直範圍圖表 (例如折線圖、面積圖或直條圖)，這表示水平軸是從右向左繪製。如果是水平範圍圖表 (例如長條圖)，這表示垂直軸是從上到下繪製。如果是圓餅圖，這表示系統會以逆時針方向繪製切片。

// Creates a pie chart builder and sets drawing of the slices in a
// counter-clockwise manner.
const builder = Charts.newPieChart();
builder.reverseCategories();

回攻員

AreaChartBuilder：這個建構工具適用於鏈結。

`setBackgroundColor(cssValue)`

設定圖表的背景顏色。

// Creates a line chart builder and sets the background color to gray
const builder = Charts.newLineChart();
builder.setBackgroundColor('gray');

參數

名稱	類型	說明
`cssValue`	`String`	顏色的 CSS 值 (例如 `"blue"` 或 `"#00f"`)。

回攻員

AreaChartBuilder - 這個建構工具適用於鏈結。

`setColors(cssValues)`

設定圖表中線條的顏色。

// 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']);

參數

名稱	類型	說明
`cssValues`	`String[]`	顏色 CSS 值陣列，例如 `["red", "#acf"]`。陣列中的第 n 個元素代表圖表中第 n 條線的顏色。

回攻員

AreaChartBuilder：這個建構工具適用於鏈結。

`setDataSourceUrl(url)`

設定用於從外部來源 (例如 Google 試算表) 擷取資料的資料來源網址。如果同時提供資料來源網址和 DataTable，系統會忽略資料來源網址。

如要進一步瞭解如何查詢資料來源，請參閱 Google 圖表說明文件。

參數

名稱	類型	說明
`url`	`String`	資料來源網址，包括任何查詢參數。

回攻員

AreaChartBuilder：這個建構工具適用於鏈結。

`setDataTable(tableBuilder)`

使用 DataTableBuilder 設定圖表要使用的資料表。這是設定資料表的便利方法，不必呼叫 build()。

參數

名稱	類型	說明
`tableBuilder`	`DataTableBuilder`	資料表建立工具。系統會在呼叫時立即建立新的資料表，因此對建構工具的任何後續更新都不會反映在圖表中。

回攻員

AreaChartBuilder：這個建構工具適用於鏈結。

`setDataTable(table)`

設定包含圖表線條和 X 軸標籤的資料表。第一個資料欄應為字串，並包含水平軸標籤。後方可接任意數量的欄位，但都必須是數字。每個資料欄都會顯示為獨立一行。

參數

名稱	類型	說明
`table`	`DataTableSource`	圖表使用的資料表。

回攻員

AreaChartBuilder - 這個建構工具適用於鏈結。

`setDataViewDefinition(dataViewDefinition)`

設定要用於圖表的資料檢視定義。

參數

名稱	類型	說明
`dataViewDefinition`	`DataViewDefinition`	資料檢視定義物件，定義應從指定資料來源衍生出的檢視區塊，用於繪製圖表。

回攻員

AreaChartBuilder：這個建構工具適用於鏈結。

`setDimensions(width, height)`

設定圖表的尺寸。

參數

名稱	類型	說明
`width`	`Integer`	圖表的寬度 (以像素為單位)。
`height`	`Integer`	圖表的高度 (以像素為單位)。

回攻員

AreaChartBuilder - 這個建構工具適用於鏈結。

`setLegendPosition(position)`

設定圖例相對於圖表的位置。根據預設，系統不會顯示圖例。

// Creates a line chart builder and sets the legend position to right.
const builder = Charts.newLineChart();
builder.setLegendPosition(Charts.Position.RIGHT);

參數

名稱	類型	說明
`position`	`Position`	圖例的位置。

回攻員

AreaChartBuilder - 這個建構工具適用於鏈結。

`setLegendTextStyle(textStyle)`

設定圖表圖例的文字樣式。

// 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);

參數

名稱	類型	說明
`textStyle`	`TextStyle`	圖表圖例使用的文字樣式。

回攻員

AreaChartBuilder - 這個建構工具適用於鏈結。

`setOption(option, value)`

設定這張圖表的進階選項。請參閱這個圖表可用的選項。如果指定選項無效，這個方法就不會生效。

// Build an area chart with a 1-second animation duration.
const builder = Charts.newAreaChart();
builder.setOption('animation.duration', 1000);
const chart = builder.build();

參數

名稱	類型	說明
`option`	`String`	要設定的選項。
`value`	`Object`	要設定的值。

回攻員

AreaChartBuilder - 這個建構工具適用於鏈結。

`setPointStyle(style)`

設定線條中點的樣式。根據預設，點沒有特定樣式，只會顯示線條。

// Creates a line chart builder and sets large point style.
const builder = Charts.newLineChart();
builder.setPointStyle(Charts.PointStyle.LARGE);

參數

名稱	類型	說明
`style`	`PointStyle`	線條中點的樣式。

回攻員

AreaChartBuilder：這個建構工具適用於鏈結。

另請參閱

PointStyle

`setRange(start, end)`

設定圖表的範圍。

如有任何資料點超出範圍，系統會擴大範圍，納入這些資料點。

參數

名稱	類型	說明
`start`	`Number`	範圍軸最低格線的值。
`end`	`Number`	範圍軸最高格線的值。

回攻員

AreaChartBuilder - 這個建構工具適用於鏈結。

`setStacked()`

使用堆疊線，也就是堆疊 (累計) 線條和長條的值。預設為不堆疊。

回攻員

AreaChartBuilder - 這個建構工具適用於鏈結。

`setTitle(chartTitle)`

設定圖表的標題。標題會置中顯示在圖表上方。

// Creates a line chart builder and title to 'My Line Chart'.
const builder = Charts.newLineChart();
builder.setTitle('My Line Chart');

參數

名稱	類型	說明
`chartTitle`	`String`	圖表標題。

回攻員

AreaChartBuilder - 這個建構工具適用於鏈結。

`setTitleTextStyle(textStyle)`

設定圖表標題的文字樣式。

// 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);

參數

名稱	類型	說明
`textStyle`	`TextStyle`	圖表標題使用的文字樣式。您可以呼叫 `Charts.newTextStyle()` 來建立 `TextStyleBuilder` 物件。

回攻員

AreaChartBuilder - 這個建構工具適用於鏈結。

`setXAxisTextStyle(textStyle)`

設定橫軸文字樣式。

// 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);

參數

名稱	類型	說明
`textStyle`	`TextStyle`	用於橫軸標題的文字樣式。您可以呼叫 `Charts.newTextStyle()` 來建立 `TextStyleBuilder` 物件。

回攻員

AreaChartBuilder - 這個建構工具適用於鏈結。

`setXAxisTitle(title)`

在橫軸中加入標題。標題會置中顯示，並位於軸值標籤下方。

// Creates a line chart builder and sets the X-axis title.
const builder = Charts.newLineChart();
builder.setTitle('X-axis Title');

參數

名稱	類型	說明
`title`	`String`	X 軸的標題。

回攻員

AreaChartBuilder - 這個建構工具適用於鏈結。

`setXAxisTitleTextStyle(textStyle)`

設定橫軸標題文字樣式。

// 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);

參數

名稱	類型	說明
`textStyle`	`TextStyle`	用於橫軸標題的文字樣式。您可以呼叫 `Charts.newTextStyle()` 來建立 `TextStyleBuilder` 物件。

回攻員

AreaChartBuilder：這個建構工具適用於鏈結。

`setYAxisTextStyle(textStyle)`

設定縱軸文字樣式。

// 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);

參數

名稱	類型	說明
`textStyle`	`TextStyle`	用於橫軸標題的文字樣式。您可以呼叫 `Charts.newTextStyle()` 來建立 `TextStyleBuilder` 物件。

回攻員

AreaChartBuilder - 這個建構工具適用於鏈結。

`setYAxisTitle(title)`

為縱軸新增標題。標題會置中顯示，並位於值標籤的左側。

// Creates a line chart builder and sets the Y-axis title.
const builder = Charts.newLineChart();
builder.setYAxisTitle('Y-axis Title');

參數

名稱	類型	說明
`title`	`String`	Y 軸的標題。

回攻員

AreaChartBuilder - 這個建構工具適用於鏈結。

`setYAxisTitleTextStyle(textStyle)`

設定垂直軸標題文字樣式。

// 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);

參數

名稱	類型	說明
`textStyle`	`TextStyle`	用於橫軸標題的文字樣式。您可以呼叫 `Charts.newTextStyle()` 來建立 `TextStyleBuilder` 物件。

回攻員

AreaChartBuilder - 這個建構工具適用於鏈結。

`useLogScale()`

將範圍軸設為對數比例 (所有值都必須為正數)。範圍軸是垂直圖表 (例如折線圖、面積圖或直條圖) 的垂直軸，以及水平圖表 (例如長條圖) 的水平軸。

回攻員

AreaChartBuilder - 這個建構工具適用於鏈結。

Class AreaChartBuilder 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

方法

內容詳盡的說明文件

build()

回攻員

reverseCategories()

回攻員

setBackgroundColor(cssValue)

參數

回攻員

setColors(cssValues)

參數

回攻員

setDataSourceUrl(url)

參數

回攻員

setDataTable(tableBuilder)

參數

回攻員

setDataTable(table)

參數

回攻員

setDataViewDefinition(dataViewDefinition)

參數

回攻員

setDimensions(width, height)

參數

回攻員

setLegendPosition(position)

參數

回攻員

setLegendTextStyle(textStyle)

參數

回攻員

setOption(option, value)

參數

回攻員

setPointStyle(style)

參數

回攻員

另請參閱

setRange(start, end)

參數

回攻員

setStacked()

回攻員

setTitle(chartTitle)

參數

回攻員

setTitleTextStyle(textStyle)

參數

回攻員

setXAxisTextStyle(textStyle)

參數

回攻員

setXAxisTitle(title)

參數

回攻員

setXAxisTitleTextStyle(textStyle)

參數

回攻員

setYAxisTextStyle(textStyle)

參數

回攻員

setYAxisTitle(title)

參數

回攻員

setYAxisTitleTextStyle(textStyle)

參數

回攻員

useLogScale()

回攻員

Class AreaChartBuilder

`build()`

`reverseCategories()`

`setBackgroundColor(cssValue)`

`setColors(cssValues)`

`setDataSourceUrl(url)`

`setDataTable(tableBuilder)`

`setDataTable(table)`

`setDataViewDefinition(dataViewDefinition)`

`setDimensions(width, height)`

`setLegendPosition(position)`

`setLegendTextStyle(textStyle)`

`setOption(option, value)`

`setPointStyle(style)`

`setRange(start, end)`

`setStacked()`

`setTitle(chartTitle)`

`setTitleTextStyle(textStyle)`

`setXAxisTextStyle(textStyle)`

`setXAxisTitle(title)`

`setXAxisTitleTextStyle(textStyle)`

`setYAxisTextStyle(textStyle)`

`setYAxisTitle(title)`

`setYAxisTitleTextStyle(textStyle)`

`useLogScale()`