Class DataViewDefinitionBuilder

DataViewDefinitionBuilder

DataViewDefinition 객체의 빌더입니다.

다음은 빌더를 사용하는 예입니다. 데이터는 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;
}

방법

메서드	반환 유형	간략한 설명
build()	DataViewDefinition	이 빌더를 사용하여 빌드된 데이터 뷰 정의 객체를 빌드하고 반환합니다.
setColumns(columns)	DataViewDefinitionBuilder	데이터 뷰에 포함할 열의 색인을 설정하고 역할-열 정보를 지정합니다.

자세한 문서

build()

이 빌더를 사용하여 빌드된 데이터 뷰 정의 객체를 빌드하고 반환합니다.

리턴

DataViewDefinition - 이 빌더를 사용하여 만든 데이터 뷰 정의 객체입니다.

---

setColumns(columns)

데이터 뷰에 포함할 열의 색인을 설정하고 역할-열 정보를 지정합니다. 열 색인의 이 하위 집합은 데이터 뷰가 파생된 데이터 소스의 열을 참조합니다.

열 역할은 해당 열에 있는 데이터의 목적을 설명합니다. 예를 들어 열에 도움말 텍스트, 데이터 포인트 주석 또는 불확실성 표시기를 설명하는 데이터가 포함될 수 있습니다. 자세한 내용은 Google 차트 문서의 DataTable 역할을 참조하세요.

A1:C3에 다음 데이터가 포함된 스프레드시트를 가정합니다.

"abc", 20, "blue"
"def", 30, "red"
"ghi", 40, "orange"

다음 코드는 각 막대가 서로 다른 색상인 막대 그래프를 만듭니다. 색상은 '역할 열' 스타일을 통해 할당됩니다.

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

매개변수

이름	유형	설명
columns	Object[]	데이터 뷰에 포함할 열 색인 또는 열 설명 (객체)의 배열입니다. 열 설명은 열 역할을 정의합니다. 데이터 테이블과 데이터 뷰 열의 열거형은 0 기반입니다.

리턴

DataViewDefinitionBuilder - 이 빌더로, 연결하는 데 유용합니다.