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;}
Définit les indices des colonnes à inclure dans la vue des données, ainsi que les informations sur les colonnes de rôle.
Documentation détaillée
build()
Crée et renvoie l'objet de définition de la vue de données créé à l'aide de ce compilateur.
Renvois
DataViewDefinition : objet de définition de la vue de données créé à l'aide de cet outil de compilation.
setColumns(columns)
Définit les indices des colonnes à inclure dans la vue des données, ainsi que les informations sur les colonnes de rôle. Ce sous-ensemble d'indices de colonne fait référence aux colonnes de la source de données à partir de laquelle la vue de données est dérivée.
Un rôle de colonne décrit l'objectif des données de cette colonne: par exemple, une colonne peut contenir des données décrivant le texte d'une info-bulle, des annotations de points de données ou des indicateurs d'incertitude. Pour en savoir plus, consultez la section Rôles de table de données dans la documentation Google Charts.
Supposons que la feuille de calcul contienne les données suivantes dans les cellules A1 à C3 :
Le code suivant crée un graphique en barres où chaque barre est d'une couleur différente. Les couleurs sont attribuées via une colonne de style "rôle".
Tableau d'indices de colonne ou de descriptions de colonne (un objet) à inclure dans la vue des données. Les descriptions de colonne définissent un rôle de colonne. La table de données et l'énumération des colonnes de la vue des données sont basées sur zéro.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/26 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 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."]]
