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

Class PieChartBuilder

圓餅圖的建構工具。詳情請參閱 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()`

建立圖表。

回攻員

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

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

將圖表設為 3D 圖表。

回攻員

PieChartBuilder — 這個建構工具適用於鏈結。

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