Class DataViewDefinitionBuilder
קל לארגן דפים בעזרת אוספים
אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.
כליהגדרתתצוגתנתונים
ה-builder של אובייקטים מסוג 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;
}
מסמכים מפורטים
build()
ה-builder הזה יוצר ומחזיר את אובייקט ההגדרה של תצוגת הנתונים שנוצר באמצעות ה-builder הזה.
חזרה
DataViewDefinition
– אובייקט של הגדרת תצוגת נתונים שנוצר באמצעות ה-builder הזה.
setColumns(columns)
הגדרת האינדקסים של העמודות שרוצים לכלול בתצוגת הנתונים, וכן ציון פרטי העמודות של התפקידים. קבוצת המשנה הזו של אינדקסי העמודות מתייחסת לעמודות של מקור הנתונים שממנו נגזרת תצוגת הנתונים.
תפקיד העמודה מתאר את מטרת הנתונים בעמודה הזו: לדוגמה, עמודות יכולות להכיל נתונים שמתארים טקסט של הסבר קצר, הערות לגבי נקודות נתונים או אינדיקטורים של אי-ודאות. למידע נוסף, ראו תפקידים של טבלת נתונים במסמכי העזרה של Google Charts.
נניח שיש גיליון אלקטרוני עם הנתונים הבאים ב-A1:C3:
'abc', 20, 'blue';
'def', 30, 'red';
'ghi', 40, 'orange';
הקוד הבא יוצר תרשים עמודות שבו כל עמודה היא בצבע שונה. הצבעים מוקצים באמצעות סגנון 'role column'.
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
– ה-builder הזה שימושי לשרשור.
אלא אם צוין אחרת, התוכן של דף זה הוא ברישיון Creative Commons Attribution 4.0 ודוגמאות הקוד הן ברישיון Apache 2.0. לפרטים, ניתן לעיין במדיניות האתר Google Developers. Java הוא סימן מסחרי רשום של חברת Oracle ו/או של השותפים העצמאיים שלה.
עדכון אחרון: 2025-07-26 (שעון UTC).
[null,null,["עדכון אחרון: 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,["# 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."]]