Charts Service

排行榜

這項服務可讓使用者透過 Google 圖表工具 建立圖表,並在伺服器端算繪。如要在網頁瀏覽器中算繪圖表,請改用 Google Charts API

這個範例會建立基本資料表、使用資料填入面積圖,並以圖片形式新增至網頁:

function doGet() {
  var data = Charts.newDataTable()
      .addColumn(Charts.ColumnType.STRING, 'Month')
      .addColumn(Charts.ColumnType.NUMBER, 'In Store')
      .addColumn(Charts.ColumnType.NUMBER, 'Online')
      .addRow(['January', 10, 1])
      .addRow(['February', 12, 1])
      .addRow(['March', 20, 2])
      .addRow(['April', 25, 3])
      .addRow(['May', 30, 4])
      .build();

  var chart = Charts.newAreaChart()
      .setDataTable(data)
      .setStacked()
      .setRange(0, 40)
      .setTitle('Sales per Month')
      .build();

  var htmlOutput = HtmlService.createHtmlOutput().setTitle('My Chart');
  var imageData = Utilities.base64Encode(chart.getAs('image/png').getBytes());
  var imageUrl = "data:image/png;base64," + encodeURI(imageData);
  htmlOutput.append("Render chart server side: <br/>");
  htmlOutput.append("<img border=\"1\" src=\"" + imageUrl + "\">");
  return htmlOutput;

}

類別

名稱簡短說明
AreaChartBuilder面積圖的建構工具。
BarChartBuilder長條圖的建構工具。
Chart圖表物件,可轉換為靜態圖片。
ChartHiddenDimensionStrategy列舉來源中隱藏維度在圖表中的表示方式。
ChartMergeStrategy列舉圖表中多個來源範圍的表示方式。
ChartOptions顯示目前為 Chart 設定的選項,例如高度、顏色等。
ChartTypeCharts 服務支援的圖表類型。
Charts在指令碼中建立圖表的進入點。
ColumnChartBuilder直條圖的建構工具。
ColumnTypeDataTable 中資料欄的有效資料類型列舉。
CurveStyle圖表中曲線樣式的列舉。
DataTable圖表使用的資料表。
DataTableBuilderDataTable 物件的建構工具。
DataTableSource介面適用於可將資料表示為 DataTable 的物件。
DataViewDefinition用於顯示圖表資料的資料檢視定義。
DataViewDefinitionBuilderDataViewDefinition 物件的建構工具。
LineChartBuilder折線圖的建構工具。
MatchType列舉字串值的比對方式。
NumberRangeFilterBuilder數字範圍篩選器控制項的建構工具。
Orientation物件方向的列舉。
PickerValuesLayout列舉如何在挑選器小工具中顯示所選值。
PieChartBuilder圓餅圖的建構工具。
PointStyle列舉線條中點的樣式。
Position圖表中的圖例位置列舉。
ScatterChartBuilder散布圖的建構工具。
StringFilterBuilder字串篩選器控制項的建構工具。
TableChartBuilder表格圖表的建構工具。
TextStyle文字樣式設定物件。
TextStyleBuilder用於建立 TextStyle 物件的建構工具。

AreaChartBuilder

方法

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

BarChartBuilder

方法

方法傳回類型簡短說明
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將範圍軸設為對數比例 (所有值都必須為正數)。

Chart

方法

方法傳回類型簡短說明
getAs(contentType)Blob以轉換為指定內容類型的 Blob 形式,傳回這個物件內的資料。
getBlob()Blob將這個物件內的資料以 Blob 形式傳回。
getOptions()ChartOptions傳回這張圖表的選項,例如高度、顏色和座標軸。

ChartHiddenDimensionStrategy

屬性

屬性類型說明
IGNORE_BOTHEnum預設值;圖表會略過所有隱藏的欄和列。
IGNORE_ROWSEnum圖表只會略過隱藏的資料列。
IGNORE_COLUMNSEnum圖表只會略過隱藏的資料欄。
SHOW_BOTHEnum圖表不會略過隱藏的欄或列。

ChartMergeStrategy

屬性

屬性類型說明
MERGE_COLUMNSEnum預設值。
MERGE_ROWSEnum圖表會合併多個範圍的資料列。

ChartOptions

方法

方法傳回類型簡短說明
get(option)Object傳回這張圖表的已設定選項。
getOrDefault(option)Object傳回這張圖表的已設定選項。

ChartType

屬性

屬性類型說明
TIMELINEEnum時間線圖。
AREAEnum面積圖
BAREnum長條圖
BUBBLEEnum泡泡圖。
CANDLESTICKEnumK 線圖。
COLUMNEnum柱狀圖
COMBOEnum組合圖
GAUGEEnum度量圖。
GEOEnum地理圖。
HISTOGRAMEnum直方圖
RADAREnum雷達圖。
LINEEnum折線圖
ORGEnum組織圖。
PIEEnum圓餅圖
SCATTEREnum散佈圖
SPARKLINEEnum走勢圖。
STEPPED_AREAEnum階梯狀面積圖。
TABLEEnum表格圖
TREEMAPEnum樹狀圖。
WATERFALLEnum瀑布圖。

Charts

屬性

屬性類型說明
ChartHiddenDimensionStrategyChartHiddenDimensionStrategy列舉來源中隱藏維度在圖表中的表示方式。
ChartMergeStrategyChartMergeStrategy列舉圖表中多個來源範圍的表示方式。
ChartTypeChartType圖表服務支援的圖表類型列舉。
ColumnTypeColumnTypeDataTable 中資料欄的有效資料類型列舉。
CurveStyleCurveStyle圖表中曲線樣式的列舉。
PointStylePointStyle列舉線條中點的樣式。
PositionPosition圖表中的圖例位置列舉。

方法

方法傳回類型簡短說明
newAreaChart()AreaChartBuilder如要開始建構面積圖,請參閱 Google Chart Tools 說明文件。
newBarChart()BarChartBuilder按照 Google Chart Tools 說明文件中的步驟,開始建構長條圖。
newColumnChart()ColumnChartBuilder按照 Google Chart Tools 說明文件中的步驟,開始建立柱狀圖。
newDataTable()DataTableBuilder建立空白資料表,可手動設定值。
newDataViewDefinition()DataViewDefinitionBuilder建立新的資料檢視定義。
newLineChart()LineChartBuilder按照 Google Chart Tools 說明文件中的步驟,開始建構折線圖。
newPieChart()PieChartBuilder開始建構圓餅圖,詳情請參閱 Google Chart Tools 說明文件。
newScatterChart()ScatterChartBuilder如要開始建構散布圖,請參閱 Google Chart Tools 說明文件。
newTableChart()TableChartBuilder按照 Google Chart Tools 說明文件中的步驟,開始建構表格圖表。
newTextStyle()TextStyleBuilder建立新的文字樣式建構工具。

ColumnChartBuilder

方法

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

ColumnType

屬性

屬性類型說明
DATEEnum對應日期值。
NUMBEREnum對應至數值。
STRINGEnum對應字串值。

CurveStyle

屬性

屬性類型說明
NORMALEnum沒有彎曲的直線。
SMOOTHEnum線條的角度會變得平滑。

DataTable

DataTableBuilder

方法

方法傳回類型簡短說明
addColumn(type, label)DataTableBuilder在資料表中新增資料欄。
addRow(values)DataTableBuilder在資料表中新增資料列。
build()DataTable建構並傳回資料表。
setValue(row, column, value)DataTableBuilder在表格中設定特定值。

DataTableSource

方法

方法傳回類型簡短說明
getDataTable()DataTable將這個物件內的資料傳回為 DataTable。

DataViewDefinition

DataViewDefinitionBuilder

方法

方法傳回類型簡短說明
build()DataViewDefinition建構並傳回使用這個建構工具建構的資料檢視定義物件。
setColumns(columns)DataViewDefinitionBuilder設定要納入資料檢視畫面的資料欄索引,並指定角色資料欄資訊。

LineChartBuilder

方法

方法傳回類型簡短說明
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將範圍軸設為對數比例 (所有值都必須為正數)。

MatchType

屬性

屬性類型說明
EXACTEnum僅比對完全相符的值
PREFIXEnum從值的開頭開始比對前置字串
ANYEnum符合任何子字串

方法

方法傳回類型簡短說明
getName()String傳回要在選項 JSON 中使用的比對類型名稱。

NumberRangeFilterBuilder

方法

方法傳回類型簡短說明
setMaxValue(maxValue)NumberRangeFilterBuilder設定範圍下限允許的最大值。
setMinValue(minValue)NumberRangeFilterBuilder設定範圍下限允許的最小值。
setOrientation(orientation)NumberRangeFilterBuilder設定滑桿方向。
setShowRangeValues(showRangeValues)NumberRangeFilterBuilder設定是否要在滑桿旁邊顯示標籤,指出所選範圍的程度。
setTicks(ticks)NumberRangeFilterBuilder設定數字範圍篩選器滑桿拇指可落入的刻度數 (範圍列中的固定位置)。

Orientation

屬性

屬性類型說明
HORIZONTALEnum橫向螢幕方向。
VERTICALEnum直向。

PickerValuesLayout

屬性

屬性類型說明
ASIDEEnum選取的值會顯示在值選擇器小工具旁的單行文字中。
BELOWEnum選取的值會顯示在小工具下方的單行文字中。
BELOW_WRAPPINGEnum與下方類似,但無法容納在挑選器中的項目會換行。
BELOW_STACKEDEnum選取的值會顯示在小工具下方的資料欄中。

PieChartBuilder

方法

方法傳回類型簡短說明
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設定圖表標題的文字樣式。

PointStyle

屬性

屬性類型說明
NONEEnum不要顯示線條點。
TINYEnum使用細線點。
MEDIUMEnum使用中型線點。
LARGEEnum使用大型線點。
HUGEEnum使用最大的線點。

Position

屬性

屬性類型說明
TOPEnum圖表上方。
RIGHTEnum圖表右側。
BOTTOMEnum圖表下方。
NONEEnum不會顯示圖例。

ScatterChartBuilder

方法

方法傳回類型簡短說明
build()Chart建構圖表。
setBackgroundColor(cssValue)ScatterChartBuilder設定圖表的背景顏色。
setColors(cssValues)ScatterChartBuilder設定圖表中線條的顏色。
setDataSourceUrl(url)ScatterChartBuilder設定用於從外部來源 (例如 Google 試算表) 擷取資料的資料來源網址。
setDataTable(tableBuilder)ScatterChartBuilder使用 DataTableBuilder 設定要用於圖表的資料表。
setDataTable(table)ScatterChartBuilder設定包含圖表線條和 X 軸標籤的資料表。
setDataViewDefinition(dataViewDefinition)ScatterChartBuilder設定要用於圖表的資料檢視定義。
setDimensions(width, height)ScatterChartBuilder設定圖表的尺寸。
setLegendPosition(position)ScatterChartBuilder設定圖例相對於圖表的位置。
setLegendTextStyle(textStyle)ScatterChartBuilder設定圖表圖例的文字樣式。
setOption(option, value)ScatterChartBuilder設定這張圖表的進階選項。
setPointStyle(style)ScatterChartBuilder設定線條中點的樣式。
setTitle(chartTitle)ScatterChartBuilder設定圖表的標題。
setTitleTextStyle(textStyle)ScatterChartBuilder設定圖表標題的文字樣式。
setXAxisLogScale()ScatterChartBuilder將水平軸設為對數比例 (所有值都必須為正數)。
setXAxisRange(start, end)ScatterChartBuilder設定圖表橫軸的範圍。
setXAxisTextStyle(textStyle)ScatterChartBuilder設定橫軸文字樣式。
setXAxisTitle(title)ScatterChartBuilder在橫軸中加入標題。
setXAxisTitleTextStyle(textStyle)ScatterChartBuilder設定水平軸標題文字樣式。
setYAxisLogScale()ScatterChartBuilder將垂直軸設為對數比例 (所有值都必須為正數)。
setYAxisRange(start, end)ScatterChartBuilder設定圖表垂直軸的範圍。
setYAxisTextStyle(textStyle)ScatterChartBuilder設定縱軸文字樣式。
setYAxisTitle(title)ScatterChartBuilder為縱軸新增標題。
setYAxisTitleTextStyle(textStyle)ScatterChartBuilder設定縱軸標題文字樣式。

StringFilterBuilder

方法

方法傳回類型簡短說明
setCaseSensitive(caseSensitive)StringFilterBuilder設定比對是否應區分大小寫。
setMatchType(matchType)StringFilterBuilder設定控制項是否應只比對確切值 (MatchType.EXACT)、從值開頭開始比對前置字串 (MatchType.PREFIX),或比對任何子字串 (MatchType.ANY)。
setRealtimeTrigger(realtimeTrigger)StringFilterBuilder設定控制項是否應在每次按下按鍵時比對,或僅在輸入欄位「變更」時比對 (失去焦點或按下 Enter 鍵)。

TableChartBuilder

方法

方法傳回類型簡短說明
build()Chart建構圖表。
enablePaging(enablePaging)TableChartBuilder設定是否要啟用資料分頁功能。
enablePaging(pageSize)TableChartBuilder啟用分頁功能,並設定每個頁面的資料列數。
enablePaging(pageSize, startPage)TableChartBuilder啟用分頁功能、設定每頁的列數,以及要顯示的第一個表格頁面 (頁碼從零開始)。
enableRtlTable(rtlEnabled)TableChartBuilder新增對由右至左語言 (例如阿拉伯文或希伯來文) 的基本支援,方法是反轉表格的欄順序,讓第零欄成為最右側的欄,最後一欄則成為最左側的欄。
enableSorting(enableSorting)TableChartBuilder設定使用者點選欄標題時是否要排序欄。
setDataSourceUrl(url)TableChartBuilder設定用於從外部來源 (例如 Google 試算表) 擷取資料的資料來源網址。
setDataTable(tableBuilder)TableChartBuilder使用 DataTableBuilder 設定要用於圖表的資料表。
setDataTable(table)TableChartBuilder設定包含圖表線條和 X 軸標籤的資料表。
setDataViewDefinition(dataViewDefinition)TableChartBuilder設定要用於圖表的資料檢視定義。
setDimensions(width, height)TableChartBuilder設定圖表的尺寸。
setFirstRowNumber(number)TableChartBuilder設定資料表第一列的列號。
setInitialSortingAscending(column)TableChartBuilder設定表格應根據哪個欄的索引進行初始排序 (遞增)。
setInitialSortingDescending(column)TableChartBuilder設定表格應根據哪個欄的索引進行初始排序 (遞減)。
setOption(option, value)TableChartBuilder設定這張圖表的進階選項。
showRowNumberColumn(showRowNumber)TableChartBuilder設定是否要在表格的第一欄顯示列號。
useAlternatingRowStyle(alternate)TableChartBuilder設定是否要為表格圖表的奇數和偶數列指派交替顏色樣式。

TextStyle

方法

方法傳回類型簡短說明
getColor()String取得文字樣式的顏色。
getFontName()String取得文字樣式的字型名稱。
getFontSize()Number取得文字樣式的字型大小。

TextStyleBuilder

方法

方法傳回類型簡短說明
build()TextStyle建構並傳回使用這個建構工具建立的文字樣式設定物件。
setColor(cssValue)TextStyleBuilder設定文字樣式的顏色。
setFontName(fontName)TextStyleBuilder設定文字樣式的字型名稱。
setFontSize(fontSize)TextStyleBuilder設定文字樣式的字型大小。