Class DataViewDefinitionBuilder

DataViewDefinitionBuilder

Compilateur pour les objets DataViewDefinition.

Voici un exemple d'utilisation du générateur. Les données sont importées à partir d'une feuille de calcul Google Sheets.

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;
}

Méthodes

MéthodeType renvoyéBrève description
build()DataViewDefinitionCrée et renvoie l'objet de définition de la vue de données créé à l'aide de ce compilateur.
setColumns(columns)DataViewDefinitionBuilderDé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 création.


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 :

'abc', 20, 'blue';
'def', 30, 'red';
'ghi', 40, 'orange';
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".
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());
}

Paramètres

NomTypeDescription
columnsObject[]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.

Renvois

DataViewDefinitionBuilder : ce compilateur est utile pour le chaînage.