Class DataViewDefinitionBuilder
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
資料檢視定義建構工具
DataViewDefinition
物件的建構工具。
以下是使用建構工具的範例。資料是
從 Google 試算表匯入。
function doGet() {
// This example creates two table charts side by side. One uses a data view
// definition to restrict the number of displayed columns.
// Get sample data from a spreadsheet.
const dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=A1%3AF' +
'&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=4&headers=-1';
// Create a chart to display all of the data.
const originalChart = Charts.newTableChart()
.setDimensions(600, 500)
.setDataSourceUrl(dataSourceUrl)
.build();
// Create another chart to display a subset of the data (only columns 1 and
// 4).
const dataViewDefinition = Charts.newDataViewDefinition().setColumns([0, 3]);
const limitedChart = Charts.newTableChart()
.setDimensions(200, 500)
.setDataSourceUrl(dataSourceUrl)
.setDataViewDefinition(dataViewDefinition)
.build();
const htmlOutput = HtmlService.createHtmlOutput();
const originalChartData = Utilities.base64Encode(
originalChart.getAs('image/png').getBytes(),
);
const originalChartUrl =
`data:image/png;base64,${encodeURI(originalChartData)}`;
const limitedChartData = Utilities.base64Encode(
limitedChart.getAs('image/png').getBytes(),
);
const limitedChartUrl =
`data:image/png;base64,${encodeURI(limitedChartData)}`;
htmlOutput.append('<table><tr><td>');
htmlOutput.append(`<img border="1" src="${originalChartUrl}">`);
htmlOutput.append('</td><td>');
htmlOutput.append(`<img border="1" src="${limitedChartUrl}">`);
htmlOutput.append('</td></tr></table>');
return htmlOutput;
}
內容詳盡的說明文件
setColumns(columns)
設定要納入資料檢視的資料欄索引,以及指定角色-資料欄資訊。這個資料欄索引子集會參照資料檢視畫面衍生自的資料來源資料欄。
資料欄角色會說明該欄資料的用途:例如,資料欄可能會儲存說明工具提示文字、資料點註解或不確定指標的資料。詳情請參閱 Google 圖表說明文件中的「資料資料表角色」。
假設試算表的 A1 到 C3 儲存格中含有以下資料:
'abc', 20, 'blue';
'def', 30, 'red';
'ghi', 40, 'orange';
下列程式碼會建立長條圖,每個長條的顏色皆不同。顏色是透過樣式「角色欄」指派。
const COLUMN_SPEC = [
0, // categories
1, // counts
{sourceColumn: 2, role: 'style'},
];
function roleColumnChart() {
const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
const sheet = spreadsheet.getActiveSheet();
const viewSpec =
Charts.newDataViewDefinition().setColumns(COLUMN_SPEC).build();
const chartBuilder = sheet.newChart()
.setChartType(Charts.ChartType.BAR)
.setDataViewDefinition(viewSpec)
.setOption('useFirstColumnAsDomain', true)
.setPosition(5, 1, 0, 0)
.setOption('hAxis', {title: 'Counts'})
.setOption('vAxis', {title: 'Categories'})
.addRange(sheet.getRange('A1:C3'));
sheet.insertChart(chartBuilder.build());
}
參數
名稱 | 類型 | 說明 |
columns | Object[] | 要納入資料檢視的資料欄索引或資料欄說明 (物件) 陣列。資料欄說明會定義資料欄角色。資料表和資料檢視欄的列舉值皆以零為起點。 |
回攻員
DataViewDefinitionBuilder
:這個建構工具可用於鏈結。
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2025-07-26 (世界標準時間)。
[null,null,["上次更新時間:2025-07-26 (世界標準時間)。"],[[["\u003cp\u003e\u003ccode\u003eDataViewDefinitionBuilder\u003c/code\u003e facilitates the creation of customized data views for charts in Google Apps Script.\u003c/p\u003e\n"],["\u003cp\u003eIt enables selecting specific columns and assigning roles to them, influencing the chart's data representation.\u003c/p\u003e\n"],["\u003cp\u003e\u003ccode\u003esetColumns\u003c/code\u003e method is crucial for defining which columns from the data source are included in the chart and their roles (e.g., categories, counts, style).\u003c/p\u003e\n"],["\u003cp\u003eUsing \u003ccode\u003ebuild\u003c/code\u003e, you can generate a \u003ccode\u003eDataViewDefinition\u003c/code\u003e object to apply the specified view to a chart.\u003c/p\u003e\n"]]],[],null,["# Class DataViewDefinitionBuilder\n\nDataViewDefinitionBuilder\n\nBuilder for [DataViewDefinition](/apps-script/reference/charts/data-view-definition) objects.\n\nHere's an example of using the builder. The data is [imported from a Google spreadsheet](https://developers.google.com/chart/interactive/docs/spreadsheets#Google_Spreadsheets_as_a_Data_Source).\n\n```javascript\nfunction doGet() {\n // This example creates two table charts side by side. One uses a data view\n // definition to restrict the number of displayed columns.\n\n // Get sample data from a spreadsheet.\n const dataSourceUrl = 'https://docs.google.com/spreadsheet/tq?range=A1%3AF' +\n '&key=0Aq4s9w_HxMs7dHpfX05JdmVSb1FpT21sbXd4NVE3UEE&gid=4&headers=-1';\n\n // Create a chart to display all of the data.\n const originalChart = Charts.newTableChart()\n .setDimensions(600, 500)\n .setDataSourceUrl(dataSourceUrl)\n .build();\n\n // Create another chart to display a subset of the data (only columns 1 and\n // 4).\n const dataViewDefinition = Charts.newDataViewDefinition().setColumns([0, 3]);\n const limitedChart = Charts.newTableChart()\n .setDimensions(200, 500)\n .setDataSourceUrl(dataSourceUrl)\n .setDataViewDefinition(dataViewDefinition)\n .build();\n\n const htmlOutput = HtmlService.createHtmlOutput();\n const originalChartData = Utilities.base64Encode(\n originalChart.getAs('image/png').getBytes(),\n );\n const originalChartUrl =\n `data:image/png;base64,${encodeURI(originalChartData)}`;\n const limitedChartData = Utilities.base64Encode(\n limitedChart.getAs('image/png').getBytes(),\n );\n const limitedChartUrl =\n `data:image/png;base64,${encodeURI(limitedChartData)}`;\n htmlOutput.append('\u003ctable\u003e\u003ctr\u003e\u003ctd\u003e');\n htmlOutput.append(`\u003cimg border=\"1\" src=\"${originalChartUrl}\"\u003e`);\n htmlOutput.append('\u003c/td\u003e\u003ctd\u003e');\n htmlOutput.append(`\u003cimg border=\"1\" src=\"${limitedChartUrl}\"\u003e`);\n htmlOutput.append('\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e');\n return htmlOutput;\n}\n``` \n\n### Methods\n\n| Method | Return type | Brief description |\n|--------------------------------------------|--------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------|\n| [build()](#build()) | [DataViewDefinition](/apps-script/reference/charts/data-view-definition) | Builds and returns the data view definition object that was built using this builder. |\n| [setColumns(columns)](#setColumns(Object)) | [DataViewDefinitionBuilder](#) | Sets the indexes of the columns to include in the data view as well as specifying role-column information. |\n\nDetailed documentation\n----------------------\n\n### `build()`\n\nBuilds and returns the data view definition object that was built using this builder.\n\n#### Return\n\n\n[DataViewDefinition](/apps-script/reference/charts/data-view-definition) --- A data view definition object that was built using this builder.\n\n*** ** * ** ***\n\n### `set``Columns(columns)`\n\nSets the indexes of the columns to include in the data view as well as specifying role-column\ninformation. This subset of column indexes refer to the columns of the data source that the\ndata view is derived from.\n\nA column role describes the purpose of the data in that column: for example, a column might\nhold data describing tooltip text, data point annotations, or uncertainty indicators. For more\ndetails, see [DataTable Roles](/chart/interactive/docs/roles) in the Google Charts\ndocumentation.\n\nAssuming a spreadsheet with the following data in A1:C3:\n\n```text\n'abc', 20, 'blue';\n'def', 30, 'red';\n'ghi', 40, 'orange';\n```\nThe following code creates a bar chart where each bar is a different color. The colors are assigned via a style \"role column\". \n\n```javascript\nconst COLUMN_SPEC = [\n 0, // categories\n 1, // counts\n {sourceColumn: 2, role: 'style'},\n];\n\nfunction roleColumnChart() {\n const spreadsheet = SpreadsheetApp.getActiveSpreadsheet();\n const sheet = spreadsheet.getActiveSheet();\n const viewSpec =\n Charts.newDataViewDefinition().setColumns(COLUMN_SPEC).build();\n const chartBuilder = sheet.newChart()\n .setChartType(Charts.ChartType.BAR)\n .setDataViewDefinition(viewSpec)\n .setOption('useFirstColumnAsDomain', true)\n .setPosition(5, 1, 0, 0)\n .setOption('hAxis', {title: 'Counts'})\n .setOption('vAxis', {title: 'Categories'})\n .addRange(sheet.getRange('A1:C3'));\n sheet.insertChart(chartBuilder.build());\n}\n```\n\n#### Parameters\n\n| Name | Type | Description |\n|-----------|------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `columns` | `Object[]` | An array of column indexes, or column descriptions (an object), to include in the data view. The column descriptions define a column role. The data table and the enumeration for data view columns are zero-based. |\n\n#### Return\n\n\n[DataViewDefinitionBuilder](#) --- This builder, useful for chaining."]]