Class LineChartBuilder

LineChartBuilder

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

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

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

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

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

回攻員

LineChartBuilder:這項建構工具適用於鏈結。


setBackgroundColor(cssValue)

設定圖表的背景顏色。

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

參數

名稱類型說明
cssValueString顏色的 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.
var builder = Charts.newLineChart();
builder.setColors(["green", "red"]);

參數

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

回攻員

LineChartBuilder:這項建構工具適用於鏈結。


setCurveStyle(style)

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

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

參數

名稱類型說明
styleCurveStyle圖表中的曲線樣式。

回攻員

LineChartBuilder:這項建構工具適用於鏈結。

另請參閱


setDataSourceUrl(url)

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

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

參數

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

回攻員

LineChartBuilder:這項建構工具適用於鏈結。


setDataTable(tableBuilder)

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

參數

名稱類型說明
tableBuilderDataTableBuilder資料表建構工具。系統會立即建立新的資料表 呼叫,因此對建構工具的任何後續更新都不會反映在圖表中。

回攻員

LineChartBuilder:這項建構工具適用於鏈結。


setDataTable(table)

設定資料表 (其中包含圖表的線條,以及 X 軸標籤)。 第一欄應為字串,並包含橫軸標籤。不限欄數 後方,都必須為數字。每一欄會逐行顯示。

參數

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

回攻員

LineChartBuilder:這項建構工具適用於鏈結。


setDataViewDefinition(dataViewDefinition)

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

參數

名稱類型說明
dataViewDefinitionDataViewDefinition這個資料檢視定義物件用於定義應當的檢視畫面 衍生自圖表繪圖的特定資料來源。

回攻員

LineChartBuilder:這項建構工具適用於鏈結。


setDimensions(width, height)

設定圖表的維度。

參數

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

回攻員

LineChartBuilder:這項建構工具適用於鏈結。


setLegendPosition(position)

設定與圖表相關的圖例位置。根據預設,系統沒有圖例。

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

參數

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

回攻員

LineChartBuilder:這項建構工具適用於鏈結。


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

參數

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

回攻員

LineChartBuilder:這項建構工具適用於鏈結。


setOption(option, value)

設定這張圖表的進階選項。查看可用的選項: 這份圖表。如果指定的選項無效,此方法就不會有任何作用。

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

參數

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

回攻員

LineChartBuilder:這項建構工具適用於鏈結。


setPointStyle(style)

設定線條中點的樣式。點預設為沒有特定樣式,且僅 線條就會看得見

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

參數

名稱類型說明
stylePointStyle線條中點使用的樣式。

回攻員

LineChartBuilder:這項建構工具適用於鏈結。

另請參閱


setRange(start, end)

設定圖表的範圍。

如有任何資料點超出範圍,系統會擴大範圍以納入這些資料 點。

參數

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

回攻員

LineChartBuilder:這項建構工具適用於鏈結。


setTitle(chartTitle)

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

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

參數

名稱類型說明
chartTitleString圖表標題

回攻員

LineChartBuilder:這項建構工具適用於鏈結。


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

參數

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

回攻員

LineChartBuilder:這項建構工具適用於鏈結。


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

參數

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

回攻員

LineChartBuilder:這項建構工具適用於鏈結。


setXAxisTitle(title)

為橫軸加上標題。標題會置中,並顯示在軸值下方 標籤

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

參數

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

回攻員

LineChartBuilder:這項建構工具適用於鏈結。


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

參數

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

回攻員

LineChartBuilder:這項建構工具適用於鏈結。


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

參數

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

回攻員

LineChartBuilder:這項建構工具適用於鏈結。


setYAxisTitle(title)

為縱軸加入標題。標題會置中,並顯示在值的左側 標籤

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

參數

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

回攻員

LineChartBuilder:這項建構工具適用於鏈結。


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

參數

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

回攻員

LineChartBuilder:這項建構工具適用於鏈結。


useLogScale()

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

回攻員

LineChartBuilder:這項建構工具適用於鏈結。