Class DataViewDefinitionBuilder

DataViewDefinitionBuilder

Builder untuk objek DataViewDefinition.

Berikut adalah 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.
  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;
}

Metode

Metode	Jenis hasil yang ditampilkan	Deskripsi singkat
build()	DataViewDefinition	Membuat dan menampilkan objek definisi tampilan data yang dibuat menggunakan builder ini.
setColumns(columns)	DataViewDefinitionBuilder	Menetapkan 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.

Pulang pergi

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. Subkumpulan indeks kolom ini merujuk ke kolom sumber data yang menjadi sumber tampilan data.

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

Dengan asumsi spreadsheet berisi data berikut di A1:C3:

'abc', 20, 'blue';
'def', 30, 'red';
'ghi', 40, 'orange';

Kode berikut membuat diagram batang dengan setiap batang memiliki warna yang berbeda. Warna ditetapkan melalui "kolom peran" gaya.

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

Parameter

Nama	Jenis	Deskripsi
columns	Object[]	Array indeks kolom, atau deskripsi kolom (objek), untuk disertakan dalam tampilan data. Deskripsi kolom menentukan peran kolom. Tabel data dan enumerasi untuk kolom tampilan data berbasis nol.

Pulang pergi

DataViewDefinitionBuilder — Builder ini berguna untuk membuat rantai.