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

Class LineChartBuilder

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

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

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

const chartBuilder = Charts.newLineChart()
                         .setTitle('Yearly Rainfall')
                         .setXAxisTitle('Month')
                         .setYAxisTitle('Rainfall (in)')
                         .setDimensions(600, 500)
                         .setCurveStyle(Charts.CurveStyle.SMOOTH)
                         .setPointStyle(Charts.PointStyle.MEDIUM)
                         .setDataSourceUrl(dataSourceUrl);

const chart = chartBuilder.build();

方法

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

內容詳盡的說明文件

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

回攻員

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

`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"`)。

回攻員

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

`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 條線的顏色。

回攻員

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

`setCurveStyle(style)`

設定圖表中曲線的樣式。如要瞭解允許的曲線樣式，請參閱 CurveStyle。

// Creates a line chart builder and curves the lines in the chart.
const builder = Charts.newLineChart();
builder.setCurveStyle(Charts.CurveStyle.SMOOTH);

參數

名稱	類型	說明
`style`	`CurveStyle`	圖表中曲線的樣式。

回攻員

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

另請參閱

CurveStyle

`setDataSourceUrl(url)`

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

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

參數

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

回攻員

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

`setDataTable(tableBuilder)`

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

參數

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

回攻員

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

`setDataTable(table)`

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

參數

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

回攻員

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

`setDataViewDefinition(dataViewDefinition)`

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

參數

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

回攻員

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

`setDimensions(width, height)`

設定圖表的維度。

參數

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

回攻員

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

`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`	圖例的位置。

回攻員

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

`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`	圖表圖例使用的文字樣式。

回攻員

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

`setOption(option, value)`

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

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

參數

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

回攻員

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

`setPointStyle(style)`

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

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

參數

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

回攻員

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

另請參閱

PointStyle

`setRange(start, end)`

設定圖表的範圍。

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

參數

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

回攻員

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

`setTitle(chartTitle)`

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

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

參數

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

回攻員

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

`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` 物件。

回攻員

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

`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` 物件。

回攻員

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

`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 軸的標題。

回攻員

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

`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` 物件。

回攻員

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

`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` 物件。

回攻員

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

`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 軸的標題。

回攻員

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

`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` 物件。

回攻員

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

`useLogScale()`

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

回攻員

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