這項服務可讓使用者透過 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 | 可轉換為靜態圖片的 Chart 物件。 |
ChartHiddenDimensionStrategy | 列舉說明來源中的隱藏維度如何以圖表表示。 |
ChartMergeStrategy | 以列舉方式呈現來源中的多個範圍如何在圖表中表示。 |
ChartOptions | 公開目前為 Chart 設定的選項,例如高度、顏色等。 |
ChartType | 圖表服務支援的圖表類型。 |
Charts | 在指令碼中建立圖表的進入點。 |
ColumnChartBuilder | 柱狀圖建構工具。 |
ColumnType | 列舉 DataTable 中資料欄的有效資料類型。 |
CurveStyle | 列舉圖表中曲線的樣式。 |
DataTable | 要在圖表中使用的資料表。 |
DataTableBuilder | DataTable 物件的建構工具。 |
DataTableSource | 能以 DataTable 表示資料的物件介面。 |
DataViewDefinition | 用於以視覺化方式呈現圖表資料的資料檢視定義。 |
DataViewDefinitionBuilder | DataViewDefinition 物件的建構工具。 |
LineChartBuilder | 折線圖的建構工具。 |
MatchType | 此列舉字串值應如何比對的列舉。 |
NumberRangeFilterBuilder | 數字範圍篩選器控制項的建構工具。 |
Orientation | 列舉物件方向的示例。 |
PickerValuesLayout | 列舉如何在挑選器小工具中顯示所選值。 |
PieChartBuilder | 圓餅圖的建構工具。 |
PointStyle | 列舉線條中點的樣式。 |
Position | 列舉圖表中的圖例位置。 |
ScatterChartBuilder | 散佈圖的建構工具。 |
StringFilterBuilder | 字串篩選器控制項的建構工具。 |
TableChartBuilder | 表格圖表的建構工具。 |
TextStyle | 文字樣式設定物件。 |
TextStyleBuilder | 用於建立 TextStyle 物件的建構工具。 |
AreaChartBuilder
方法
BarChartBuilder
方法
Chart
方法
方法 | 傳回類型 | 簡短說明 |
---|---|---|
getAs(contentType) | Blob | 以 blob 的形式傳回這個物件中的資料,做為轉換成指定內容類型的 blob。 |
getBlob() | Blob | 以 blob 的形式傳回這個物件中的資料。 |
getOptions() | ChartOptions | 傳回此圖表的選項,例如高度、顏色和軸。 |
ChartHiddenDimensionStrategy
屬性
屬性 | 類型 | 說明 |
---|---|---|
IGNORE_BOTH | Enum | 預設;圖表會略過所有隱藏的資料欄和隱藏的資料列。 |
IGNORE_ROWS | Enum | 圖表只會略過隱藏的資料列。 |
IGNORE_COLUMNS | Enum | 圖表只會略過隱藏的資料欄。 |
SHOW_BOTH | Enum | 圖表不會略過隱藏的資料欄或隱藏的資料列。 |
ChartMergeStrategy
屬性
屬性 | 類型 | 說明 |
---|---|---|
MERGE_COLUMNS | Enum | 預設值。 |
MERGE_ROWS | Enum | 圖表會合併多個範圍的資料列。 |
ChartOptions
方法
方法 | 傳回類型 | 簡短說明 |
---|---|---|
get(option) | Object | 傳回此圖表的設定選項。 |
getOrDefault(option) | Object | 傳回此圖表的設定選項。 |
ChartType
屬性
屬性 | 類型 | 說明 |
---|---|---|
TIMELINE | Enum | 時間軸圖表。 |
AREA | Enum | 面積圖 |
BAR | Enum | 長條圖 |
BUBBLE | Enum | 泡泡圖。 |
CANDLESTICK | Enum | K 線圖。 |
COLUMN | Enum | 柱狀圖 |
COMBO | Enum | 組合圖 |
GAUGE | Enum | 度量圖。 |
GEO | Enum | 地理圖。 |
HISTOGRAM | Enum | 直方圖 |
RADAR | Enum | 雷達圖。 |
LINE | Enum | 折線圖 |
ORG | Enum | 組織圖。 |
PIE | Enum | 圓餅圖 |
SCATTER | Enum | 散佈圖 |
SPARKLINE | Enum | 走勢圖。 |
STEPPED_AREA | Enum | 階梯狀面積圖。 |
TABLE | Enum | 表格圖 |
TREEMAP | Enum | 樹狀圖。 |
WATERFALL | Enum | 瀑布圖。 |
Charts
屬性
屬性 | 類型 | 說明 |
---|---|---|
ChartHiddenDimensionStrategy | ChartHiddenDimensionStrategy | 列舉說明來源中的隱藏維度如何以圖表表示。 |
ChartMergeStrategy | ChartMergeStrategy | 以列舉方式呈現來源中的多個範圍如何在圖表中表示。 |
ChartType | ChartType | 圖表服務支援的圖表類型列舉。 |
ColumnType | ColumnType | 列舉 DataTable 中資料欄的有效資料類型。 |
CurveStyle | CurveStyle | 列舉圖表中曲線的樣式。 |
PointStyle | PointStyle | 列舉線條中點的樣式。 |
Position | Position | 列舉圖表中的圖例位置。 |
方法
方法 | 傳回類型 | 簡短說明 |
---|---|---|
newAreaChart() | AreaChartBuilder | 開始建立面積圖 (如 Google 圖表所述) 工具說明文件。 |
newBarChart() | BarChartBuilder | 開始建立長條圖 (如 Google 圖表所述) 工具說明文件。 |
newColumnChart() | ColumnChartBuilder | 開始建立柱狀圖 (如 Google 圖表所述) 工具說明文件。 |
newDataTable() | DataTableBuilder | 建立空白資料表,可以手動設定其值。 |
newDataViewDefinition() | DataViewDefinitionBuilder | 建立新的資料檢視定義。 |
newLineChart() | LineChartBuilder | 開始建立折線圖 (如 Google 圖表所述) 工具說明文件。 |
newPieChart() | PieChartBuilder | 開始建立圓餅圖 (如 Google 圖表所述) 工具說明文件。 |
newScatterChart() | ScatterChartBuilder | 開始建立散佈圖 (如 Google 圖表所述) 工具說明文件。 |
newTableChart() | TableChartBuilder | 開始建立表格圖 (如 Google 圖表所述) 工具說明文件。 |
newTextStyle() | TextStyleBuilder | 建立新的文字樣式建構工具。 |
ColumnChartBuilder
方法
ColumnType
屬性
屬性 | 類型 | 說明 |
---|---|---|
DATE | Enum | 對應至日期值。 |
NUMBER | Enum | 對應數字值。 |
STRING | Enum | 對應字串值。 |
CurveStyle
屬性
屬性 | 類型 | 說明 |
---|---|---|
NORMAL | Enum | 沒有曲線的直線。 |
SMOOTH | Enum | 線條的角度順暢。 |
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
方法
MatchType
屬性
屬性 | 類型 | 說明 |
---|---|---|
EXACT | Enum | 僅比對完全相符的值 |
PREFIX | Enum | 從值的開頭開始比對前置字串 |
ANY | Enum | 比對任何子字串 |
方法
方法 | 傳回類型 | 簡短說明 |
---|---|---|
getName() | String | 傳回要在選項 JSON 中使用的比對類型名稱。 |
NumberRangeFilterBuilder
方法
方法 | 傳回類型 | 簡短說明 |
---|---|---|
setMaxValue(maxValue) | NumberRangeFilterBuilder | 設定範圍較低範圍允許的最大值。 |
setMinValue(minValue) | NumberRangeFilterBuilder | 設定範圍較低範圍允許的最小值。 |
setOrientation(orientation) | NumberRangeFilterBuilder | 設定滑桿方向。 |
setShowRangeValues(showRangeValues) | NumberRangeFilterBuilder | 設定是否在顯示所選範圍範圍的滑桿旁邊加上標籤。 |
setTicks(ticks) | NumberRangeFilterBuilder | 設定刻點的數量 (範圍列中的固定位置) 數字範圍篩選器滑桿的拇指數量 可能會掉落 |
Orientation
屬性
屬性 | 類型 | 說明 |
---|---|---|
HORIZONTAL | Enum | 橫向。 |
VERTICAL | Enum | 直向。 |
PickerValuesLayout
屬性
屬性 | 類型 | 說明 |
---|---|---|
ASIDE | Enum | 所選值會顯示在值挑選器小工具旁的單行文字中。 |
BELOW | Enum | 所選值會顯示在小工具下方的單行文字中。 |
BELOW_WRAPPING | Enum | 與下方類似,但不符合選擇器的項目會換行顯示新的行。 |
BELOW_STACKED | Enum | 所選值會顯示在小工具下方的資料欄中。 |
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
屬性
屬性 | 類型 | 說明 |
---|---|---|
NONE | Enum | 不要顯示線條點。 |
TINY | Enum | 使用簡短線條。 |
MEDIUM | Enum | 使用中等大小的線點。 |
LARGE | Enum | 使用尺寸較大的線條點。 |
HUGE | Enum | 使用大小最大的線條點。 |
Position
屬性
屬性 | 類型 | 說明 |
---|---|---|
TOP | Enum | 圖表上方。 |
RIGHT | Enum | 圖表右側。 |
BOTTOM | Enum | 圖表下方。 |
NONE | Enum | 未顯示圖例。 |
ScatterChartBuilder
方法
StringFilterBuilder
方法
方法 | 傳回類型 | 簡短說明 |
---|---|---|
setCaseSensitive(caseSensitive) | StringFilterBuilder | 設定比對是否須區分大小寫。 |
setMatchType(matchType) | StringFilterBuilder | 設定控制項是否應僅比對完全相符的值 (MatchType.EXACT )、前置字元
從值的開頭 (MatchType.PREFIX ) 或任何子字串開始
(MatchType.ANY )。 |
setRealtimeTrigger(realtimeTrigger) | StringFilterBuilder | 設定控制項是否應與按下按鍵時相符,或只在按下輸入欄位時才相符 「變更」(失焦或按下 Enter 鍵)。 |
TableChartBuilder
方法
TextStyle
方法
方法 | 傳回類型 | 簡短說明 |
---|---|---|
getColor() | String | 取得文字樣式的顏色。 |
getFontName() | String | 取得文字樣式的字型名稱。 |
getFontSize() | Number | 取得文字樣式的字型大小。 |
TextStyleBuilder
方法
方法 | 傳回類型 | 簡短說明 |
---|---|---|
build() | TextStyle | 建構並傳回使用此建構工具建構的文字樣式設定物件。 |
setColor(cssValue) | TextStyleBuilder | 設定文字樣式的顏色。 |
setFontName(fontName) | TextStyleBuilder | 設定文字樣式的字型名稱 |
setFontSize(fontSize) | TextStyleBuilder | 設定文字樣式的字型大小。 |