Class DataViewDefinitionBuilder
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Creador de definiciones de vistas de datos
Compilador para objetos DataViewDefinition
.
Este es un ejemplo de cómo usar el compilador. Los datos se
importan desde una hoja de cálculo de 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;
}
Documentación detallada
build()
Compila y muestra el objeto de definición de vista de datos que se compiló con este compilador.
Volver
DataViewDefinition
: Es un objeto de definición de vista de datos que se compiló con este compilador.
setColumns(columns)
Establece los índices de las columnas que se incluirán en la vista de datos, así como la información de la columna de roles. Este subconjunto de índices de columna hace referencia a las columnas de la fuente de datos de la que se deriva la vista de datos.
El rol de una columna describe el propósito de los datos en esa columna: por ejemplo, una columna puede contener datos que describen el texto de la información sobre herramientas, las anotaciones de los datos o los indicadores de incertidumbre. Para obtener más detalles, consulta Roles detabla de datos en la documentación de Google Charts.
Supongamos que tenemos una hoja de cálculo con los siguientes datos en A1:C3:
'abc', 20, 'blue';
'def', 30, 'red';
'ghi', 40, 'orange';
Con el siguiente código, se crea un gráfico de barras en el que cada barra tiene un color diferente. Los colores se asignan a través de una "columna de roles" de estilo.
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());
}
Parámetros
Nombre | Tipo | Descripción |
columns | Object[] | Un array de índices de columna o descripciones de columna (un objeto) para incluir en la vista de datos. Las descripciones de las columnas definen el rol de una columna. La tabla de datos y la enumeración de las columnas de la vista de datos se basan en cero. |
Volver
DataViewDefinitionBuilder
: Este compilador es útil para encadenar.
Salvo que se indique lo contrario, el contenido de esta página está sujeto a la licencia Atribución 4.0 de Creative Commons, y los ejemplos de código están sujetos a la licencia Apache 2.0. Para obtener más información, consulta las políticas del sitio de Google Developers. Java es una marca registrada de Oracle o sus afiliados.
Última actualización: 2025-07-26 (UTC)
[null,null,["Última actualización: 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."]]