Class BarChartBuilder

長條圖表建立器

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

以下範例說明如何建立長條圖。資料是從 Google 試算表匯入。

// Get sample data from a spreadsheet.
const dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=B1%3AC11' +
    '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=0&headers=-1';

const chartBuilder = Charts.newBarChart()
                         .setTitle('Top Grossing Films in US and Canada')
                         .setXAxisTitle('USD')
                         .setYAxisTitle('Film')
                         .setDimensions(600, 500)
                         .setLegendPosition(Charts.Position.BOTTOM)
                         .setDataSourceUrl(dataSourceUrl);

const chart = chartBuilder.build();

方法

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

內容詳盡的說明文件

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

回攻員

BarChartBuilder：這個建構工具可用於鏈結。

reverseDirection()

反轉水平軸上方塊的方向。根據預設，值會從左到右增加。呼叫這個方法會導致這些元素從右至左展開。

回攻員

BarChartBuilder：這個建構工具可用於鏈結。

setBackgroundColor(cssValue)

設定圖表的背景顏色。

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

參數

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

回攻員

BarChartBuilder：這個建構工具可用於鏈結。

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

參數

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

回攻員

BarChartBuilder：這個建構工具可用於鏈結。

setDataSourceUrl(url)

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

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

參數

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

回攻員

BarChartBuilder：這個建構工具可用於鏈結。

setDataTable(tableBuilder)

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

參數

名稱類型說明
tableBuilderDataTableBuilder資料表格式建構工具。系統會在這個呼叫中立即建立新資料表，因此建構工具的任何後續更新都不會顯示在圖表中。

回攻員

BarChartBuilder：這個建構工具可用於鏈結。

setDataTable(table)

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

參數

名稱類型說明
tableDataTableSource用於圖表的資料表。

回攻員

BarChartBuilder：這個建構工具可用於鏈結。

setDataViewDefinition(dataViewDefinition)

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

參數

名稱類型說明
dataViewDefinitionDataViewDefinition資料檢視定義物件，定義應從圖表繪製的指定資料來源衍生出的檢視畫面。

回攻員

BarChartBuilder：這個建構工具可用於鏈結。

setDimensions(width, height)

設定圖表的維度。

參數

名稱類型說明
widthInteger圖表的寬度 (以像素為單位)。
heightInteger圖表的高度 (以像素為單位)。

回攻員

BarChartBuilder：這個建構工具可用於鏈結。

setLegendPosition(position)

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

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

參數

名稱類型說明
positionPosition圖例的位置。

回攻員

BarChartBuilder：這個建構工具可用於鏈結。

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

參數

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

回攻員

BarChartBuilder：這個建構工具可用於鏈結。

setOption(option, value)

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

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

參數

名稱類型說明
optionString要設定的選項。
valueObject要設定的值。

回攻員

BarChartBuilder：這個建構工具可用於鏈結。

setRange(start, end)

設定圖表的範圍。

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

參數

名稱類型說明
startNumber範圍軸最底的格線值。
endNumber範圍軸最高格線的值。

回攻員

BarChartBuilder：這個建構工具可用於鏈結。

setStacked()

使用堆疊線條，也就是說，線條和長條圖的值會堆疊 (累積)。根據預設，系統不會堆疊。

回攻員

BarChartBuilder：這個建構工具可用於鏈結。

setTitle(chartTitle)

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

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

參數

名稱類型說明
chartTitleString圖表標題。

回攻員

BarChartBuilder：這個建構工具可用於鏈結。

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

參數

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

回攻員

BarChartBuilder：這個建構工具可用於鏈結。

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

參數

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

回攻員

BarChartBuilder：這個建構工具可用於鏈結。

setXAxisTitle(title)

在水平軸上新增標題。標題會置中，並顯示在軸值標籤下方。

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

參數

名稱類型說明
titleStringX 軸的標題。

回攻員

BarChartBuilder：這個建構工具可用於鏈結。

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

參數

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

回攻員

BarChartBuilder：這個建構工具可用於鏈結。

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

參數

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

回攻員

BarChartBuilder：這個建構工具可用於鏈結。

setYAxisTitle(title)

為垂直軸新增標題。標題會置中，並顯示在值標籤的左側。

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

參數

名稱類型說明
titleStringY 軸的標題。

回攻員

BarChartBuilder：這個建構工具可用於鏈結。

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

參數

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

回攻員

BarChartBuilder：這個建構工具可用於鏈結。

useLogScale()

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

回攻員

BarChartBuilder：這個建構工具可用於鏈結。