Class DataViewDefinitionBuilder

DataViewDefinitionBuilder

Builder untuk objek DataViewDefinition.

Berikut ini contoh penggunaan builder. Data diimpor dari spreadsheet 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.
  var 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.
  var originalChart = Charts.newTableChart()
      .setDimensions(600, 500)
      .setDataSourceUrl(dataSourceUrl)
      .build();

  // Create another chart to display a subset of the data (only columns 1 and 4).
  var dataViewDefinition = Charts.newDataViewDefinition().setColumns([0, 3]);
  var limitedChart = Charts.newTableChart()
      .setDimensions(200, 500)
      .setDataSourceUrl(dataSourceUrl)
      .setDataViewDefinition(dataViewDefinition)
      .build();

  var htmlOutput = HtmlService.createHtmlOutput();
  var originalChartData = Utilities.base64Encode(originalChart.getAs('image/png').getBytes());
  var originalChartUrl = "data:image/png;base64," + encodeURI(originalChartData);
  var limitedChartData = Utilities.base64Encode(limitedChart.getAs('image/png').getBytes());
  var 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;
}

Metode

MetodeJenis hasil yang ditampilkanDeskripsi singkat
build()DataViewDefinitionMembuat dan menampilkan objek definisi tampilan data yang dibuat menggunakan builder ini.
setColumns(columns)DataViewDefinitionBuilderMenetapkan indeks kolom yang akan disertakan dalam tampilan data serta menentukan informasi kolom peran.

Dokumentasi mendetail

build()

Membuat dan menampilkan objek definisi tampilan data yang dibuat menggunakan builder ini.

Return

DataViewDefinition — Objek definisi tampilan data yang dibuat menggunakan builder ini.


setColumns(columns)

Menetapkan indeks kolom yang akan disertakan dalam tampilan data serta menentukan informasi kolom peran. Subset indeks kolom ini merujuk pada kolom sumber data tempat tampilan data berasal.

Peran kolom menjelaskan tujuan data di kolom tersebut: misalnya, kolom mungkin menyimpan data yang menjelaskan teks tooltip, anotasi titik data, atau indikator ketidakpastian. Untuk mengetahui detail selengkapnya, lihat Peran DataTable dalam dokumentasi Diagram Google.

Asumsikan sebuah {i>spreadsheet <i}dengan data berikut di A1:C3:

"abc", 20, "blue"
"def", 30, "red"
"ghi", 40, "orange"
Kode berikut membuat diagram batang dengan warna yang berbeda untuk setiap batang. Warna ditetapkan melalui "kolom peran" gaya.
var COLUMN_SPEC = [
  0, // categories
  1, // counts
  {sourceColumn: 2, role: 'style'}
];

function roleColumnChart() {
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = spreadsheet.getActiveSheet();
  var viewSpec = Charts.newDataViewDefinition()
      .setColumns(COLUMN_SPEC)
      .build();
  var 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());
};

Parameter

NamaJenisDeskripsi
columnsObject[]Array indeks kolom, atau deskripsi kolom (objek), yang akan disertakan dalam tampilan data. Deskripsi kolom menentukan peran kolom. Tabel data dan enumerasi untuk kolom tampilan data berbasis nol.

Return

DataViewDefinitionBuilder — Builder ini berguna untuk membuat rantai.