柱狀圖的建構工具。詳情請參閱 Google 圖表說明文件。
以下範例將展示如何使用資料表的資料建立柱狀圖。
var sampleData = Charts.newDataTable() .addColumn(Charts.ColumnType.STRING, "Year") .addColumn(Charts.ColumnType.NUMBER, "Sales") .addColumn(Charts.ColumnType.NUMBER, "Expenses") .addRow(["2004", 1000, 400]) .addRow(["2005", 1170, 460]) .addRow(["2006", 660, 1120]) .addRow(["2007", 1030, 540]) .addRow(["2008", 800, 600]) .addRow(["2009", 943, 678]) .addRow(["2010", 1020, 550]) .addRow(["2011", 910, 700]) .addRow(["2012", 1230, 840]) .build(); var chart = Charts.newColumnChart() .setTitle('Sales & Expenses') .setXAxisTitle('Year') .setYAxisTitle('Amount (USD)') .setDimensions(600, 500) .setDataTable(sampleData) .build();
方法
內容詳盡的說明文件
build()
reverseCategories()
反向繪製網域軸的序列繪圖。如為垂直範圍圖表 (例如折線圖、面積圖或柱狀圖),這表示水平軸是從右到左繪製。以水平範圍圖表 (例如長條圖) 來說,這代表垂直軸是從上到下繪製。對於圓餅圖,這表示系統會逆時針繪製切片。
// Creates a pie chart builder and sets drawing of the slices in a counter-clockwise manner. var builder = Charts.newPieChart(); builder.reverseCategories();
回攻員
ColumnChartBuilder
— 這個建構工具適用於鏈結。
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" )。 |
回攻員
ColumnChartBuilder
— 這個建構工具適用於鏈結。
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 個線條的顏色。 |
回攻員
ColumnChartBuilder
— 這個建構工具適用於鏈結。
setDataSourceUrl(url)
設定用來從外部來源 (例如 Google 試算表) 擷取資料的資料來源網址。如果提供資料來源網址和 DataTable,系統就會忽略資料來源網址。
如要進一步瞭解如何查詢資料來源,請參閱 Google 圖表說明文件。
參數
名稱 | 類型 | 說明 |
---|---|---|
url | String | 資料來源網址 (包括任何查詢參數)。 |
回攻員
ColumnChartBuilder
— 這個建構工具適用於鏈結。
setDataTable(tableBuilder)
使用 DataTableBuilder 設定要用於圖表的資料表。此方式可讓您輕鬆設定資料表,無需呼叫 build()
。
參數
名稱 | 類型 | 說明 |
---|---|---|
tableBuilder | DataTableBuilder | 資料表建構工具。系統會在這項呼叫中立即建立新的資料表,因此任何關於建構工具的進一步更新都不會反映在圖表中。 |
回攻員
ColumnChartBuilder
— 這個建構工具適用於鏈結。
setDataTable(table)
設定包含圖表線條的資料表格,以及 X 軸標籤。第一欄應為字串,且包含水平軸標籤。後續可加入的資料欄數量不拘,所有欄都必須是數字。每一欄會單獨顯示為一行。
參數
名稱 | 類型 | 說明 |
---|---|---|
table | DataTableSource | 要用於圖表的資料表。 |
回攻員
ColumnChartBuilder
— 這個建構工具適用於鏈結。
setDataViewDefinition(dataViewDefinition)
設定要用於圖表的資料檢視定義。
參數
名稱 | 類型 | 說明 |
---|---|---|
dataViewDefinition | DataViewDefinition | 資料檢視定義物件,用來定義應從圖表繪圖的特定資料來源衍生的檢視畫面。 |
回攻員
ColumnChartBuilder
— 這個建構工具適用於鏈結。
setDimensions(width, height)
設定圖表的維度。
參數
名稱 | 類型 | 說明 |
---|---|---|
width | Integer | 圖表的寬度,以像素為單位。 |
height | Integer | 圖表的高度,以像素為單位。 |
回攻員
ColumnChartBuilder
— 這個建構工具適用於鏈結。
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 | 圖例的位置。 |
回攻員
ColumnChartBuilder
— 這個建構工具適用於鏈結。
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 | 圖表圖例使用的文字樣式。 |
回攻員
ColumnChartBuilder
— 這個建構工具適用於鏈結。
setOption(option, value)
設定這張圖表的進階選項。請參閱此圖表的可用選項。如果指定的選項無效,這個方法就不會有任何作用。
// Build a column chart with a 1-second animation duration. var builder = Charts.newColumnChart(); builder.setOption('animation.duration', 1000); var chart = builder.build();
參數
名稱 | 類型 | 說明 |
---|---|---|
option | String | 要設定的選項。 |
value | Object | 要設定的值。 |
回攻員
ColumnChartBuilder
— 這個建構工具適用於鏈結。
setRange(start, end)
設定圖表的範圍。
如有任何資料點超出範圍,系統會擴大範圍以納入這些資料點。
參數
名稱 | 類型 | 說明 |
---|---|---|
start | Number | 範圍軸最低格線的值。 |
end | Number | 範圍軸上最高格線的值。 |
回攻員
ColumnChartBuilder
— 這個建構工具適用於鏈結。
setStacked()
setTitle(chartTitle)
設定圖表標題。標題會顯示在圖表的正上方。
// Creates a line chart builder and title to 'My Line Chart'. var builder = Charts.newLineChart(); builder.setTitle('My Line Chart')
參數
名稱 | 類型 | 說明 |
---|---|---|
chartTitle | String | 圖表標題。 |
回攻員
ColumnChartBuilder
— 這個建構工具適用於鏈結。
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 物件。 |
回攻員
ColumnChartBuilder
— 這個建構工具適用於鏈結。
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 物件。 |
回攻員
ColumnChartBuilder
— 這個建構工具適用於鏈結。
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 軸的標題。 |
回攻員
ColumnChartBuilder
— 這個建構工具適用於鏈結。
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 物件。 |
回攻員
ColumnChartBuilder
— 這個建構工具適用於鏈結。
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 物件。 |
回攻員
ColumnChartBuilder
— 這個建構工具適用於鏈結。
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 軸標題。 |
回攻員
ColumnChartBuilder
— 這個建構工具適用於鏈結。
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 物件。 |
回攻員
ColumnChartBuilder
— 這個建構工具適用於鏈結。
useLogScale()
將範圍軸轉換為對數尺度 (所有值都必須為正數)。範圍軸是垂直圖表 (例如折線圖、面積或欄) 的垂直軸,以及水平圖表 (例如長條圖) 的水平軸。
回攻員
ColumnChartBuilder
— 這個建構工具適用於鏈結。