Charts Service
圖表
這項服務可讓使用者使用 Google 圖表工具建立圖表,並在伺服器端顯示。如果您想在網路瀏覽器中算繪圖表,請改用 Google 圖表 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;
}
類別
屬性
屬性 | 類型 | 說明 |
IGNORE_BOTH | Enum | 預設值;圖表會略過所有隱藏的資料欄和資料列。 |
IGNORE_ROWS | Enum | 圖表只會略過隱藏的資料列。 |
IGNORE_COLUMNS | Enum | 圖表只會略過隱藏的資料欄。 |
SHOW_BOTH | Enum | 圖表不會略過隱藏的資料欄或資料列。 |
屬性
屬性 | 類型 | 說明 |
MERGE_COLUMNS | Enum | 預設值。 |
MERGE_ROWS | Enum | 圖表會合併多個區間的資料列。 |
屬性
屬性 | 類型 | 說明 |
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 | 刊登序列圖表。 |
屬性
屬性 | 類型 | 說明 |
DATE | Enum | 對應至日期值。 |
NUMBER | Enum | 對應至數值。 |
STRING | Enum | 對應字串值。 |
屬性
屬性 | 類型 | 說明 |
NORMAL | Enum | 沒有曲線的直線。 |
SMOOTH | Enum | 線條的角度會經過平滑處理。 |
屬性
屬性 | 類型 | 說明 |
EXACT | Enum | 僅比對完全相符的值 |
PREFIX | Enum | 從值開頭開始比對前置字串 |
ANY | Enum | 比對任何子字串 |
方法
方法 | 傳回類型 | 簡短說明 |
getName() | String | 傳回要在選項 JSON 中使用的比對類型名稱。 |
屬性
屬性 | 類型 | 說明 |
HORIZONTAL | Enum | 水平方向。 |
VERTICAL | Enum | 直向。 |
屬性
屬性 | 類型 | 說明 |
ASIDE | Enum | 所選值會顯示在值挑選器小工具旁的單一文字行中。 |
BELOW | Enum | 選取的值會顯示在小工具下方的單行文字中。 |
BELOW_WRAPPING | Enum | 與下方類似,但無法在挑選器中顯示的項目會換行。 |
BELOW_STACKED | Enum | 選取的值會顯示在小工具下方的資料欄中。 |
屬性
屬性 | 類型 | 說明 |
NONE | Enum | 不要顯示線條點。 |
TINY | Enum | 使用極小的線條點。 |
MEDIUM | Enum | 使用中等大小的線條點。 |
LARGE | Enum | 使用大型線條點。 |
HUGE | Enum | 使用最大尺寸的線條點。 |
屬性
屬性 | 類型 | 說明 |
TOP | Enum | 在圖表上方。 |
RIGHT | Enum | 位於圖表右側。 |
BOTTOM | Enum | 圖表下方。 |
NONE | Enum | 不會顯示圖例。 |
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2024-12-06 (世界標準時間)。
[null,null,["上次更新時間:2024-12-06 (世界標準時間)。"],[[["The Google Apps Script Charts Service enables server-side rendering of charts using Google Charts Tools, offering an alternative to the client-side Google Charts API."],["Charts are built using a structured process involving data table creation, chart construction with specific configurations like type, data source, and styling, and HTML output generation for display."],["The Charts Service provides a range of chart types, including AreaChart, BarChart, ColumnChart, LineChart, PieChart, ScatterChart, and TableChart, each with corresponding builder classes for customization."],["Comprehensive documentation details various classes and methods for data manipulation, visual styling, axes configuration, and interactive element creation, empowering developers to tailor charts to their needs."],["Developers can leverage methods from ScatterChartBuilder, StringFilterBuilder, TableChartBuilder, TextStyle, and TextStyleBuilder to fine-tune chart axes, filtering, table layouts, and text styles, enhancing chart customization and functionality."]]],["This service renders server-side charts using Google Charts Tools. Users create charts through builders like `AreaChartBuilder`, `BarChartBuilder`, etc. Data is structured in `DataTable` objects via `DataTableBuilder`. Charts can be converted to static images using `Chart.getAs()`. Customization includes setting colors, titles, dimensions, legends, axis styles, and data ranges. `ChartOptions` allow for advanced configurations. The `Charts` class provides the creation entry point and enums define chart, data, and styling options.\n"]]