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()
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
- 이 빌더로, 연결하는 데 유용합니다.