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.

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 qui a été créé à l'aide de ce compilateur.
setColumns(columns)DataViewDefinitionBuilderDéfinit les index des colonnes à inclure dans la vue de données et spécifie 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 qui a été créé à l'aide de ce compilateur.

Renvois

DataViewDefinition : objet de définition de vue de données créé à l'aide de ce compilateur.


setColumns(columns)

Définit les index des colonnes à inclure dans la vue de données et spécifie les informations sur les colonnes de rôle. Ce sous-ensemble d'index de colonnes fait référence aux colonnes de la source de données à partir desquelles 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 de l'info-bulle, les annotations de points de données ou les indicateurs d'incertitude. Pour en savoir plus, consultez Rôles DataTable dans la documentation Google Charts.

Prenons l'exemple d'une feuille de calcul contenant 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 rôle" de style.
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'index de colonnes ou de descriptions de colonnes (objet) à inclure dans la vue de données. Les descriptions de colonnes définissent un rôle de colonne. La table de données et l'énumération des colonnes de la vue de données sont basées sur zéro.

Renvois

DataViewDefinitionBuilder : ce générateur, utile pour le chaînage.