functiondoGet(){// 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.constdataSourceUrl='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.constoriginalChart=Charts.newTableChart().setDimensions(600,500).setDataSourceUrl(dataSourceUrl).build();// Create another chart to display a subset of the data (only columns 1 and// 4).constdataViewDefinition=Charts.newDataViewDefinition().setColumns([0,3]);constlimitedChart=Charts.newTableChart().setDimensions(200,500).setDataSourceUrl(dataSourceUrl).setDataViewDefinition(dataViewDefinition).build();consthtmlOutput=HtmlService.createHtmlOutput();constoriginalChartData=Utilities.base64Encode(originalChart.getAs('image/png').getBytes(),);constoriginalChartUrl=`data:image/png;base64,${encodeURI(originalChartData)}`;constlimitedChartData=Utilities.base64Encode(limitedChart.getAs('image/png').getBytes(),);constlimitedChartUrl=`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>');returnhtmlOutput;}
Đặt chỉ mục của các cột để đưa vào chế độ xem dữ liệu cũng như chỉ định thông tin về cột vai trò.
Tài liệu chi tiết
build()
Tạo và trả về đối tượng định nghĩa chế độ xem dữ liệu được tạo bằng trình tạo này.
Cầu thủ trả bóng
DataViewDefinition – Đối tượng định nghĩa chế độ xem dữ liệu được tạo bằng trình tạo này.
setColumns(columns)
Đặt chỉ mục của các cột để đưa vào chế độ xem dữ liệu cũng như chỉ định thông tin về cột vai trò. Tập hợp con này của chỉ mục cột đề cập đến các cột của nguồn dữ liệu mà thành phần hiển thị dữ liệu bắt nguồn từ đó.
Vai trò của cột mô tả mục đích của dữ liệu trong cột đó: ví dụ: một cột có thể chứa dữ liệu mô tả văn bản chú giải công cụ, chú thích điểm dữ liệu hoặc chỉ báo về mức độ không chắc chắn. Để biết thêm chi tiết, hãy xem phần Vai trò của bảngdữ liệu trong tài liệu về Google Biểu đồ.
Một mảng gồm các chỉ mục cột hoặc nội dung mô tả cột (một đối tượng) để đưa vào chế độ xem dữ liệu. Nội dung mô tả cột xác định vai trò của cột. Bảng dữ liệu và danh sách liệt kê cho các cột thành phần hiển thị dữ liệu được tính từ 0.
[[["Dễ hiểu","easyToUnderstand","thumb-up"],["Giúp tôi giải quyết được vấn đề","solvedMyProblem","thumb-up"],["Khác","otherUp","thumb-up"]],[["Thiếu thông tin tôi cần","missingTheInformationINeed","thumb-down"],["Quá phức tạp/quá nhiều bước","tooComplicatedTooManySteps","thumb-down"],["Đã lỗi thời","outOfDate","thumb-down"],["Vấn đề về bản dịch","translationIssue","thumb-down"],["Vấn đề về mẫu/mã","samplesCodeIssue","thumb-down"],["Khác","otherDown","thumb-down"]],["Cập nhật lần gần đây nhất: 2025-07-26 UTC."],[[["\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,["DataViewDefinitionBuilder\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\nMethods\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`build()` \nBuilds and returns the data view definition object that was built using this builder.\n\nReturn\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)` \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\nParameters\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\nReturn\n\n\n[DataViewDefinitionBuilder](#) --- This builder, useful for chaining."]]