圓餅圖的建構工具。詳情請參閱 Google 圖表說明文件。
以下範例說明如何建立圓餅圖。資料是從 Google 試算表匯入。
// Get sample data from a spreadsheet. var dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=A1%3AB8' + '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=3&headers=-1'; var chartBuilder = Charts.newPieChart() .setTitle('World Population by Continent') .setDimensions(600, 500) .set3D() .setDataSourceUrl(dataSourceUrl); var chart = chartBuilder.build();
方法
方法 | 傳回類型 | 簡短說明 |
---|---|---|
build() | Chart | 建立圖表。 |
reverseCategories() | PieChartBuilder | 反向繪製網域軸的序列繪圖。 |
set3D() | PieChartBuilder | 將圖表設為 3D 圖表。 |
setBackgroundColor(cssValue) | PieChartBuilder | 設定圖表的背景顏色。 |
setColors(cssValues) | PieChartBuilder | 設定圖表中線條的顏色。 |
setDataSourceUrl(url) | PieChartBuilder | 設定用來從外部來源 (例如 Google 試算表) 擷取資料的資料來源網址。 |
setDataTable(tableBuilder) | PieChartBuilder | 使用 DataTableBuilder 設定要用於圖表的資料表。 |
setDataTable(table) | PieChartBuilder | 設定包含圖表線條的資料表格,以及 X 軸標籤。 |
setDataViewDefinition(dataViewDefinition) | PieChartBuilder | 設定要用於圖表的資料檢視定義。 |
setDimensions(width, height) | PieChartBuilder | 設定圖表的維度。 |
setLegendPosition(position) | PieChartBuilder | 設定與圖表相關的圖例位置。 |
setLegendTextStyle(textStyle) | PieChartBuilder | 設定圖表圖例的文字樣式。 |
setOption(option, value) | PieChartBuilder | 設定這張圖表的進階選項。 |
setTitle(chartTitle) | PieChartBuilder | 設定圖表標題。 |
setTitleTextStyle(textStyle) | PieChartBuilder | 設定圖表標題的文字樣式。 |
內容詳盡的說明文件
build()
reverseCategories()
反向繪製網域軸的序列繪圖。如為垂直範圍圖表 (例如折線圖、面積圖或柱狀圖),這表示水平軸是從右到左繪製。以水平範圍圖表 (例如長條圖) 來說,這代表垂直軸是從上到下繪製。對於圓餅圖,這表示系統會逆時針繪製切片。
// Creates a pie chart builder and sets drawing of the slices in a counter-clockwise manner. var builder = Charts.newPieChart(); builder.reverseCategories();
回攻員
PieChartBuilder
— 這個建構工具適用於鏈結。
set3D()
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" )。 |
回攻員
PieChartBuilder
— 這個建構工具適用於鏈結。
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 個線條的顏色。 |
回攻員
PieChartBuilder
— 這個建構工具適用於鏈結。
setDataSourceUrl(url)
設定用來從外部來源 (例如 Google 試算表) 擷取資料的資料來源網址。如果提供資料來源網址和 DataTable,系統就會忽略資料來源網址。
如要進一步瞭解如何查詢資料來源,請參閱 Google 圖表說明文件。
參數
名稱 | 類型 | 說明 |
---|---|---|
url | String | 資料來源網址 (包括任何查詢參數)。 |
回攻員
PieChartBuilder
— 這個建構工具適用於鏈結。
setDataTable(tableBuilder)
使用 DataTableBuilder 設定要用於圖表的資料表。此方式可讓您輕鬆設定資料表,無需呼叫 build()
。
參數
名稱 | 類型 | 說明 |
---|---|---|
tableBuilder | DataTableBuilder | 資料表建構工具。系統會在這項呼叫中立即建立新的資料表,因此任何關於建構工具的進一步更新都不會反映在圖表中。 |
回攻員
PieChartBuilder
— 這個建構工具適用於鏈結。
setDataTable(table)
設定包含圖表線條的資料表格,以及 X 軸標籤。第一欄應為字串,且包含水平軸標籤。後續可加入的資料欄數量不拘,所有欄都必須是數字。每一欄會單獨顯示為一行。
參數
名稱 | 類型 | 說明 |
---|---|---|
table | DataTableSource | 要用於圖表的資料表。 |
回攻員
PieChartBuilder
— 這個建構工具適用於鏈結。
setDataViewDefinition(dataViewDefinition)
設定要用於圖表的資料檢視定義。
參數
名稱 | 類型 | 說明 |
---|---|---|
dataViewDefinition | DataViewDefinition | 資料檢視定義物件,用來定義應從圖表繪圖的特定資料來源衍生的檢視畫面。 |
回攻員
PieChartBuilder
— 這個建構工具適用於鏈結。
setDimensions(width, height)
設定圖表的維度。
參數
名稱 | 類型 | 說明 |
---|---|---|
width | Integer | 圖表的寬度,以像素為單位。 |
height | Integer | 圖表的高度,以像素為單位。 |
回攻員
PieChartBuilder
— 這個建構工具適用於鏈結。
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 | 圖例的位置。 |
回攻員
PieChartBuilder
— 這個建構工具適用於鏈結。
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 | 圖表圖例使用的文字樣式。 |
回攻員
PieChartBuilder
— 這個建構工具適用於鏈結。
setOption(option, value)
設定這張圖表的進階選項。請參閱此圖表的可用選項。如果指定的選項無效,這個方法就不會有任何作用。
// Build a pie chart with a pretty legend. var builder = Charts.newPieChart(); builder.setOption('legend', {textStyle: {color: 'blue', fontSize: 16}}); var chart = builder.build();
參數
名稱 | 類型 | 說明 |
---|---|---|
option | String | 要設定的選項。 |
value | Object | 要設定的值。 |
回攻員
PieChartBuilder
— 這個建構工具適用於鏈結。
setTitle(chartTitle)
設定圖表標題。標題會顯示在圖表的正上方。
// Creates a line chart builder and title to 'My Line Chart'. var builder = Charts.newLineChart(); builder.setTitle('My Line Chart')
參數
名稱 | 類型 | 說明 |
---|---|---|
chartTitle | String | 圖表標題。 |
回攻員
PieChartBuilder
— 這個建構工具適用於鏈結。
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 物件。 |
回攻員
PieChartBuilder
— 這個建構工具適用於鏈結。