Google 시각화 API 참조

이 페이지에는 Google 시각화 API에 의해 노출된 객체와 모든 시각화에 의해 노출된 표준 메서드가 나와 있습니다.

참고: Google Visualization API 네임스페이스는 google.visualization.*입니다.

  1. DataTable 클래스
  2. DataView 클래스
  3. ChartWrapper 클래스
  4. ChartEditor 클래스
  5. 데이터 조작 방법
    1. 그룹()
    2. join()
  6. 포맷러
    1. 화살표 형식
    2. 막대 형식
    3. 색상 형식
    4. 날짜 형식
    5. 숫자 형식
    6. 패턴 형식
  7. GadgetHelper 클래스
  8. 쿼리 클래스
    1. 쿼리
    2. 쿼리 응답
  9. 오류 표시 클래스
  10. 이벤트
    1. google.visualization.events.addListener()
    2. google.visualization.events.addOneTimeListener()
    3. google.visualization.events.removeListener()
    4. google.visualization.events.removeAllListeners()
    5. google.visualization.events.trigger()
  11. 표준 시각화 메서드 및 속성
    1. 생성자
    2. 그리기()
    3. getAction()
    4. getSelection()
    5. removeAction()
    6. setAction()
    7. SelectSelection()
  12. 여러 가지 정적 메서드
    1. 배열 데이터 표()
    2. drawChart()
    3. drawToolbar()

배열 관련 참고사항

일부 브라우저는 자바스크립트 배열에서 후행 쉼표를 제대로 처리하지 않으므로 사용하지 마세요. 배열 중간의 빈 값은 괜찮습니다. 다음은 그 예시입니다.

data = ['a','b','c', ,]; // BAD
data = ['a','b','c'];   // OK
data = ['a','b', ,'d']; // Also OK. The third value is undefined.

DataTable 클래스

변경 가능한 2차원 값 표를 나타냅니다. DataTable의 읽기 전용 사본 (특정 값, 행 또는 열을 표시하도록 선택적으로 필터링됨)을 만들려면 DataView를 만듭니다.

각 열에는 데이터 유형과 ID, 라벨, 패턴 문자열 등 몇 가지 선택 속성이 할당됩니다.

또한 맞춤 속성 (이름/값 쌍)을 모든 셀, 행, 열 또는 전체 테이블에 할당할 수 있습니다. 일부 시각화는 특정 맞춤 속성을 지원합니다. 예를 들어 표 시각화는 '스타일'이라는 셀 속성을 지원하여 렌더링된 표 셀에 인라인 CSS 스타일 문자열을 할당할 수 있습니다. 시각화는 문서에서 지원하는 모든 맞춤 속성을 설명해야 합니다.

참고 항목: QueryResponse.getDataTable

생성자

문법

DataTable(opt_data, opt_version)

opt_data
[선택사항] 테이블을 초기화하는 데 사용되는 데이터입니다. 이 값은 채워진 테이블에서 DataTable.toJSON()를 호출하여 반환된 JSON이거나, 테이블을 초기화하는 데 사용되는 데이터가 포함된 자바스크립트 객체일 수 있습니다. 자바스크립트 리터럴 객체의 구조는 여기에 설명되어 있습니다. 이 매개변수를 제공하지 않으면 새로운 빈 데이터 테이블이 반환됩니다.
opt_version
[선택사항] 사용되는 유선 프로토콜의 버전을 지정하는 숫자 값 차트 도구 데이터 소스 구현자만 사용합니다. 현재 버전은 0.6입니다.

세부정보

DataTable 객체는 시각화에 전달된 데이터를 보관하는 데 사용됩니다. DataTable는 기본적인 2차원 표입니다. 각 열의 모든 데이터는 데이터 유형이 같아야 합니다. 각 열에는 데이터 유형, 해당 열의 라벨(시각화로 표시될 수 있음), 특정 열을 참조하는 데 사용할 수 있는 ID (열 색인 사용의 대안)가 포함된 설명자가 있습니다. 또한 DataTable 객체는 특정 값, 행, 열 또는 전체 DataTable에 할당된 임의 속성의 맵을 지원합니다. 이를 통해 시각화에서 추가 기능을 지원할 수 있습니다. 예를 들어 테이블 시각화에서는 맞춤 속성을 사용하여 임의의 클래스 이름 또는 스타일을 개별 셀에 할당할 수 있습니다.

표의 각 셀에는 하나의 값이 있습니다. 셀은 null 값이나 열에 지정된 유형의 값을 가질 수 있습니다. 필요에 따라 셀에서 데이터의 '형식이 지정된' 버전을 사용할 수 있습니다. 이는 시각화를 통해 표시되도록 형식이 지정된 데이터의 문자열 버전입니다. 시각화는 표시에 서식이 지정된 버전을 사용할 수 있지만 필수는 아닙니다. 그러나 항상 그래프 자체를 대상으로 하는 정렬 또는 계산(예: 그래프에서 특정 지점을 배치할 위치)을 사용합니다. 예를 들어 'low', 'medium', 'high' 값을 숫자 셀 값 1, 2, 3에 할당할 수 있습니다.

생성자를 호출한 후 데이터 행을 추가하려면 단일 행에 addRow()를 호출하거나 여러 행에 addRows()를 호출합니다. addColumn() 메서드를 호출하여 열을 추가할 수도 있습니다. 행과 열을 삭제하는 메서드도 있지만 행이나 열을 삭제하는 대신 DataTable의 선택적 뷰인 DataView를 만드는 것이 좋습니다.

DataTable의 값을 시각화의 draw() 메서드에 전달한 후에 변경해도 차트는 즉시 변경되지 않습니다. 변경사항을 반영하려면 draw()를 다시 호출해야 합니다.

참고: Google 차트는 데이터 테이블에서 검증을 수행하지 않습니다. 이 경우 차트가 렌더링 속도가 느려집니다. 열에서 문자열을 예상하는 숫자 값을 입력하거나 그 반대로 숫자를 입력하면 Google 차트가 해당 값을 해석하기 위해 최선을 다하지만 실수는 신고하지 않습니다.

예

다음 예에서는 위의 자바스크립트 예시와 같이 동일한 데이터를 사용하여 DataTable를 리터럴 문자열로 인스턴스화하고 채우는 방법을 보여줍니다. 

var dt = new google.visualization.DataTable({
    cols: [{id: 'task', label: 'Task', type: 'string'},
           {id: 'hours', label: 'Hours per Day', type: 'number'}],
    rows: [{c:[{v: 'Work'}, {v: 11}]},
           {c:[{v: 'Eat'}, {v: 2}]},
           {c:[{v: 'Commute'}, {v: 2}]},
           {c:[{v: 'Watch TV'}, {v:2}]},
           {c:[{v: 'Sleep'}, {v:7, f:'7.000'}]}]
    }, 0.6);

다음 예시에서는 비어 있는 새 DataTable를 만든 다음 위와 동일한 데이터로 수동으로 채웁니다. 

var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows([
  ['Work', 11],
  ['Eat', 2],
  ['Commute', 2],
  ['Watch TV', 2],
  ['Sleep', {v:7, f:'7.000'}]
]);
내 DataTable을 자바스크립트 또는 객체 리터럴 표기법으로 만들어야 하나요?

DataTable를 만들려면 매개변수 없이 생성자를 호출한 다음 아래 나열된 addColumn()/addRows() 메서드를 호출하여 값을 추가하거나 채워진 자바스크립트 리터럴 객체를 전달하여 초기화하면 됩니다. 두 방법 모두 아래에 설명되어 있습니다. 어느 것을 사용해야 할까요?

  • addColumn(), addRow(), addRows()를 호출하여 자바스크립트에서 테이블을 만들고 채우는 것은 매우 읽기 쉬운 코드입니다. 이 메서드는 코드를 직접 입력할 때 유용합니다. 다음에 설명된 객체 리터럴 표기법을 사용하는 것보다 느리지만 더 작은 테이블(예: 셀 1,000개)에서는 차이가 크지 않을 것입니다.
  • 큰 테이블에서 객체 리터럴 표기법을 사용하여 DataTable 객체를 직접 선언하는 것이 훨씬 더 빠릅니다. 하지만 올바른 구문을 선택하는 것은 까다로울 수 있습니다. 코드에서 객체 리터럴 구문을 생성할 수 있으면 이 기능을 사용하여 오류 발생 가능성을 줄일 수 있습니다.

 

방법

메서드 반환 값 설명

addColumn(type, opt_label, opt_id)

또는

addColumn(description_object)

 숫자

데이터 표에 새 열을 추가하고 새 열의 색인을 반환합니다. 새 열의 모든 셀에 null 값이 할당됩니다. 이 메서드에는 두 가지 서명이 있습니다.

첫 번째 서명에는 다음과 같은 매개변수가 있습니다.

  • type - 열 값의 데이터 유형이 포함된 문자열입니다. 유형은 'string', 'number', 'boolean', 'date', 'datetime', 및 'timeofday'. 중 하나일 수 있습니다.
  • opt_label - [선택사항] 열 라벨이 있는 문자열입니다. 열 라벨은 일반적으로 시각화의 일부로 표시됩니다(예: 테이블의 열 헤더 또는 원형 차트의 범례). 값을 지정하지 않으면 빈 문자열이 할당됩니다.
  • opt_id - [선택사항] 열의 고유 식별자가 있는 문자열입니다. 값을 지정하지 않으면 빈 문자열이 할당됩니다.

두 번째 서명에는 다음 객체와 함께 단일 객체 매개변수가 있습니다.

  • type - 열 데이터 유형을 설명하는 문자열입니다. 위의 type와 동일한 값입니다.
  • label - [선택사항, 문자열] 열의 라벨입니다.
  • id - [선택사항, 문자열] 열의 ID입니다.
  • role - [선택사항, 문자열] 열의 역할입니다.
  • pattern - [선택사항, 문자열] 열 값을 표시하는 방법을 지정하는 숫자 (또는 날짜) 형식의 문자열입니다.

참고 항목: getColumnId, getColumnLabel, getColumnType, insertColumn, getColumnRole

addRow(opt_cellArray) 숫자

데이터 표에 새 행을 추가하고 새 행의 색인을 반환합니다.

  • opt_cellArray[선택사항] 새 행의 데이터를 지정하는 자바스크립트 표기법으로 행 객체입니다. 이 매개변수가 포함되어 있지 않으면 이 메서드는 테이블 끝에 빈 행을 새로 추가합니다. 이 매개변수는 셀 값의 배열입니다. 셀의 값만 지정하려면 셀 값을 지정하면 됩니다(예: 55 또는 'hello'); 셀에 서식 있는 값 또는 속성을 지정하려면 셀 객체(예: {v:55, f:'55'}). 동일한 메서드 호출에서 간단한 값과 셀 객체를 혼합할 수 있습니다. 빈 셀에 null를 사용하거나 빈 배열 항목을 사용합니다.

예:

data.addRow();  // Add an empty row
data.addRow(['Hermione', new Date(1999,0,1)]); // Add a row with a string and a date value.

// Add a row with two cells, the second with a formatted value.
data.addRow(['Hermione', {v: new Date(1999,0,1),
                          f: 'January First, Nineteen ninety-nine'}
]);

data.addRow(['Col1Val', null, 'Col3Val']); // Second column is undefined.
data.addRow(['Col1Val', , 'Col3Val']);     // Same as previous.
addRows(numOrArray) 숫자

데이터 표에 새 행을 추가하고 마지막으로 추가된 행의 색인을 반환합니다. 이 메서드를 호출하여 새로운 빈 행을 만들거나 아래에 설명된 대로 행을 채우는 데 사용되는 데이터를 사용할 수 있습니다.

  • numOrArray: 숫자 또는 배열입니다.
    • 숫자 - 채워지지 않은 새 행 수를 지정하는 숫자입니다.
    • 배열 - 새로운 행 집합을 채우는 데 사용되는 행 객체의 배열입니다. 각 행은 addRow()에 설명된 대로 객체입니다. 빈 셀에 null 또는 빈 배열 항목을 사용합니다.

예:

data.addRows([
  ['Ivan', new Date(1977,2,28)],
  ['Igor', new Date(1962,7,5)],
  ['Felix', new Date(1983,11,17)],
  ['Bob', null] // No date set for Bob.
]);

참고 항목: insertRows
clone() 데이터 표 데이터 테이블의 클론을 반환합니다. 결과적으로 셀 속성, 행 속성, 테이블 속성, 열 속성(얕은 복사)을 제외하고 데이터 테이블의 딥 카피가 생성됩니다. 즉, 프리미티브가 아닌 속성은 참조로 복사되지만 프리미티브 속성은 값으로 복사됩니다.
getColumnId(columnIndex) 문자열 기본 테이블의 열 색인으로 지정된 특정 열의 식별자를 반환합니다.
쿼리로 검색되는 데이터 테이블의 경우, 열 식별자는 데이터 소스에 의해 설정되며, 쿼리 언어를 사용할 때 열을 참조하는 데 사용될 수 있습니다.
참고: Query.setQuery
getColumnIndex(columnIdentifier) 문자열, 숫자 이 표에 있는 경우 열 색인, ID 또는 라벨로 지정된 특정 열의 색인을 반환합니다. 그렇지 않으면 -1을 반환합니다. columnIdentifier가 문자열이면 먼저 ID를 찾은 다음 라벨을 기준으로 열을 찾습니다.
참고: getColumnId, getColumnLabel
getColumnLabel(columnIndex) 문자열 기본 테이블의 열 색인으로 지정된 특정 열의 라벨을 반환합니다.
일반적으로 열 라벨이 시각화의 일부로 표시됩니다. 예를 들어 열 라벨은 테이블의 열 헤더로 또는 원형 차트에서 범례 라벨로 표시될 수 있습니다.
쿼리로 검색하는 데이터 테이블의 경우 열 라벨은 데이터 소스 또는 쿼리 언어의 label 절에 의해 설정됩니다.
참고 항목: setColumnLabel
getColumnPattern(columnIndex) 문자열

지정된 열의 값 형식을 지정하는 데 사용되는 서식 패턴을 반환합니다.

  • columnIndex는 0보다 크거나 같고 getNumberOfColumns() 메서드에서 반환하는 열 수보다 작아야 합니다.

쿼리로 검색하는 데이터 테이블의 경우, 열 패턴은 데이터 소스나 쿼리 언어의 format 절에 의해 설정됩니다. 패턴의 예는 '#,##0.00'입니다. 패턴에 관한 자세한 내용은 쿼리 언어 참조를 확인하세요.

getColumnProperties(columnIndex) 객체

지정된 열의 모든 속성 맵을 반환합니다. 속성 객체는 참조로 반환되므로 가져온 객체의 값을 변경하면 DataTable에서도 변경됩니다.

  • columnIndex는 속성을 검색할 열의 숫자 색인입니다.
getColumnProperty(columnIndex, name) Auto

이름이 지정된 속성의 값, 또는 지정된 열에 그러한 속성이 설정되지 않은 경우 null를 반환합니다. 반환 유형은 속성에 따라 다릅니다.

  • columnIndex는 0보다 크거나 같고 getNumberOfColumns() 메서드에서 반환하는 열 수보다 작아야 합니다.
  • name은 문자열 형식의 속성 이름입니다.

참고 항목: setColumnProperty setColumnProperties

getColumnRange(columnIndex) 객체

지정된 열에 있는 값의 최솟값과 최댓값을 반환합니다. 반환된 객체에는 min 속성과 max 속성이 포함됩니다. 범위에 값이 없으면 min 및 max에 null가 포함됩니다.

columnIndex는 0보다 크거나 같고 getNumberOfColumns() 메서드에서 반환하는 열 수보다 작아야 합니다.

getColumnRole(columnIndex) 문자열 지정된 열의 역할을 반환합니다.
getColumnType(columnIndex) 문자열

열 색인에 지정된 특정 열의 유형을 반환합니다.

  • columnIndex는 0보다 크거나 같고 getNumberOfColumns() 메서드에서 반환하는 열 수보다 작아야 합니다.

반환된 열 유형은 'string', 'number', 'boolean', 'date', 'datetime', 또는 'timeofday' 중 하나일 수 있습니다.

getDistinctValues(columnIndex) 객체의 배열

특정 열의 고유한 값을 오름차순으로 반환합니다.

  • columnIndex는 0보다 크거나 같고 getNumberOfColumns() 메서드에서 반환하는 열 수보다 작아야 합니다.

반환된 객체의 유형은 getValue 메서드에서 반환된 것과 동일합니다.

getFilteredRows(filters) 객체의 배열

지정된 모든 필터와 일치하는 행의 행 색인을 반환합니다. 색인은 오름차순으로 반환됩니다. 이 메서드의 출력은 DataView.setRows()에 입력으로 사용하여 시각화에 표시된 행 집합을 변경할 수 있습니다.

filters - 허용되는 셀 값을 설명하는 객체의 배열입니다. 행 색인은 특정 필터와 모두 일치하는 경우 이 메서드에 의해 반환됩니다. 각 필터는 평가할 행의 열 색인을 지정하는 숫자 column 속성과 다음 중 하나가 있는 객체입니다.

  • 지정된 열의 셀에 정확하게 일치해야 하는 값을 포함하는 value 속성입니다. 값이 열과 같은 유형이어야 합니다. 또는
  • 다음 열 중 하나 또는 둘 다 필터링되는 열과 동일한 유형입니다.
    • minValue - 셀의 최솟값입니다. 지정된 열의 셀 값이 이 값보다 크거나 같아야 합니다.
    • maxValue - 셀의 최댓값입니다. 지정된 열의 셀 값은 이 값보다 작거나 같아야 합니다.
    minValue (또는 maxValue)의 null 또는 정의되지 않은 값은 범위의 하한 (또는 상한)이 적용되지 않음을 의미합니다.

또 다른 선택 속성인 test는 값 또는 범위 필터링과 결합할 함수를 지정합니다. 이 함수는 셀 값, 행 및 열 색인, 데이터 테이블을 사용하여 호출됩니다. 행을 결과에서 제외해야 하면 false를 반환해야 합니다.

예: getFilteredRows([{column: 3, value: 42}, {column: 2, minValue: 'bar', maxValue: 'foo'}, {column: 1, test: (value, rowId, columnId, datatable) => { return value == "baz"; }}])은 네 번째 열 (열 색인 3)이 정확히 42이고 세 번째 열 (열 색인 2)이 'bar'와 'foo'(포함) 사이에 있는 모든 행의 색인이 포함된 오름차순으로 배열을 반환합니다.
getFormattedValue(rowIndex, columnIndex) 문자열

지정된 행 및 열 색인에 있는 셀의 서식 있는 값을 반환합니다.

  • rowIndex는 0보다 크거나 같고 getNumberOfRows() 메서드에서 반환된 행 수보다 작아야 합니다.
  • ColumnIndex는 0보다 크거나 같고 getNumberOfColumns() 메서드에서 반환하는 열 수보다 작아야 합니다.

열 값의 형식 지정에 대한 자세한 내용은 쿼리 언어 참조를 확인하세요.

참고 항목: setFormattedValue
getNumberOfColumns() 숫자 테이블의 열 수를 반환합니다.
getNumberOfRows() 숫자 테이블의 행 수를 반환합니다.
getProperties(rowIndex, columnIndex) 객체

지정된 셀의 모든 속성에 대한 지도를 반환합니다. 속성 객체는 참조로 반환되므로 가져온 객체의 값을 변경하면 DataTable에서도 변경됩니다.

  • rowIndex는 셀의 행 색인입니다.
  • columnIndex는 셀의 열 색인입니다.
getProperty(rowIndex, columnIndex, name) Auto

이름이 지정된 속성의 값, 또는 지정된 셀에 이러한 속성이 설정되지 않은 경우 null를 반환합니다. 반환 유형은 속성에 따라 다릅니다.

  • rowIndex는 0보다 크거나 같고 getNumberOfRows() 메서드에서 반환된 행 수보다 작아야 합니다.
  • columnIndex는 0보다 크거나 같고 getNumberOfColumns() 메서드에서 반환하는 열 수보다 작아야 합니다.
  • name은 속성 이름이 포함된 문자열입니다.

참고 항목: setCell setProperties setProperty

getRowProperties(rowIndex) 객체

지정된 행의 모든 속성에 대한 지도를 반환합니다. 속성 객체는 참조로 반환되므로 가져온 객체의 값을 변경하면 DataTable에서도 변경됩니다.

  • rowIndex는 속성을 검색할 행의 색인입니다.
getRowProperty(rowIndex, name) Auto

이름이 지정된 속성의 값, 또는 지정된 행에 이러한 속성이 설정되지 않은 경우 null를 반환합니다. 반환 유형은 속성에 따라 다릅니다.

  • rowIndex는 0보다 크거나 같고 getNumberOfRows() 메서드에서 반환된 행 수보다 작아야 합니다.
  • name은 속성 이름이 포함된 문자열입니다.

참고 항목: setRowProperty setRowProperties

getSortedRows(sortColumns) 숫자 배열

기본 데이터의 순서를 수정하지 않고 정렬된 버전의 테이블을 반환합니다. 기본 데이터를 영구적으로 정렬하려면 sort()를 호출합니다. sortColumns 매개변수에 전달하는 유형에 따라 여러 가지 방법으로 정렬을 지정할 수 있습니다.

  • 단일 숫자는 정렬 기준으로 사용할 열의 색인을 지정합니다. 오름차순으로 정렬됩니다. 예: sortColumns(3)는 4번째 열을 기준으로 오름차순으로 정렬합니다.
  • 정렬할 열 색인의 수와 선택사항인 부울 속성 desc가 포함된 단일 객체입니다. desc 가 true로 설정된 경우 특정 열이 내림차순으로 정렬되고, 그렇지 않은 경우에는 오름차순으로 정렬됩니다. 예: sortColumns({column: 3})는 4번째 열을 기준으로 오름차순으로 정렬하며 sortColumns({column: 3, desc: true})은 네 번째 열을 기준으로 내림차순으로 정렬합니다.
  • 정렬 기준으로 사용할 열 색인의 숫자 배열입니다. 첫 번째 숫자는 정렬할 기준이 되는 기본 열이고 두 번째 열은 보조 열입니다. 즉, 첫 번째 열의 값 두 개가 같으면 다음 열의 값이 비교됩니다. 예: sortColumns([3, 1, 6])은 먼저 네 번째 열(오름차순)과 두 번째 열 (오름차순), 7번째 열 (오름차순)로 정렬합니다.
  • 객체 배열, 각 객체는 정렬할 수 있는 열 색인의 개수 및 선택사항인 부울 속성 desc을 포함합니다. desc 가 true로 설정된 경우 특정 열이 내림차순으로 정렬됩니다 (기본값은 오름차순). 첫 번째 객체는 정렬 기준으로 사용할 기본 열이고, 두 번째는 보조 열입니다. 즉, 첫 번째 열의 값 두 개가 같으면 다음 열의 값이 비교됩니다. 예: sortColumn([{column: 3}, {column: 1, desc: true}, {column: 6, desc: true}])은 4번째 열 (오름차순)을 기준으로 정렬되고 2열은 내림차순으로 정렬되고 7열은 내림차순으로 정렬됩니다.

반환된 값은 숫자 배열이며 각 숫자는 DataTable 행의 색인입니다. DataTable 행에서 반환된 배열의 순서가 지정되면 행이 지정된 sortColumns으로 정렬됩니다. 출력은 DataView.setRows()에 입력으로 사용하여 시각화에 표시된 행 집합을 빠르게 변경할 수 있습니다.

정렬은 안정적입니다. 즉, 두 행의 동일한 값을 정렬하면 동일한 정렬에서 매번 동일한 순서로 행을 반환합니다.
참고: 정렬

예: 세 번째 열을 기준으로 정렬된 행에서 반복하려면 다음을 사용합니다.

var rowInds = data.getSortedRows([{column: 2}]);
for (var i = 0; i < rowInds.length; i++) {
  var v = data.getValue(rowInds[i], 2);
}
getTableProperties 객체 테이블의 모든 속성 맵을 반환합니다.
getTableProperty(name) Auto

이름이 지정된 속성의 값 또는 테이블에 이러한 속성이 설정되지 않은 경우 null를 반환합니다. 반환 유형은 속성에 따라 다릅니다.

  • name은 속성 이름이 포함된 문자열입니다.

참고 항목: setTableProperties setTableProperty

getValue(rowIndex, columnIndex) 객체

지정된 행 및 열 색인에 있는 셀의 값을 반환합니다.

  • rowIndex는 0보다 크거나 같고 getNumberOfRows() 메서드에서 반환된 행 수보다 작아야 합니다.
  • columnIndex는 0보다 크거나 같고 getNumberOfColumns() 메서드에서 반환하는 열 수보다 작아야 합니다.

반환된 값의 유형은 열 유형에 따라 다릅니다 (getColumnType 참조).

  • 열 유형이 '문자열'이면 값은 문자열입니다.
  • 열 유형이 '숫자'이면 값은 숫자입니다.
  • 열 유형이 'boolean'인 경우 값은 부울입니다.
  • 열 유형이 'date' 또는 'datetime'인 경우 값은 Date 객체입니다.
  • 열 유형이 'timeofday'이면 값은 4시간 배열인 [시간, 분, 초, 밀리초]입니다.
  • 셀 값이 null이면 null를 반환합니다.
insertColumn(columnIndex, type [,label [,id]]) 없음

데이터 색인에서 새 열을 데이터 색인에 삽입합니다. 지정된 색인 이후의 모든 기존 열은 더 높은 색인으로 이동합니다.

  • columnIndex는 새 열의 필수 색인이 있는 숫자입니다.
  • type는 열 값의 데이터 유형을 포함하는 문자열이어야 합니다. 유형은 'string', 'number', 'boolean', 'date', 'datetime', 및 'timeofday'. 중 하나일 수 있습니다.
  • label은 열 라벨이 있는 문자열이어야 합니다. 열 라벨은 일반적으로 시각화의 일부로 표시됩니다(예: 테이블의 열 헤더 또는 원형 차트의 범례). 값을 지정하지 않으면 빈 문자열이 할당됩니다.
  • id는 열의 고유 식별자가 있는 문자열이어야 합니다. 값을 지정하지 않으면 빈 문자열이 할당됩니다.

참고 항목: addColumn
insertRows(rowIndex, numberOrArray) 없음

지정된 행 색인에 지정된 수의 행을 삽입합니다.

  • rowIndex는 새 행을 삽입할 색인 번호입니다. 지정된 색인 번호부터 행이 추가됩니다.
  • numberOrArray는 추가할 새로운 빈 행의 수 또는 색인에 추가할 하나 이상의 채워진 행 배열입니다. 행 객체의 배열을 추가하는 구문은 addRows()를 참고하세요.

참고 항목: addRows
removeColumn(columnIndex) 없음

지정된 색인에서 열을 삭제합니다.

  • columnIndex은 유효한 열 색인이 있는 숫자여야 합니다.

참고 항목: removeColumn
removeColumns(columnIndex, numberOfColumns) 없음

지정된 색인의 열에서 시작하여 지정된 수의 열을 삭제합니다.

  • numberOfColumns는 삭제할 열의 개수입니다.
  • columnIndex은 유효한 열 색인이 있는 숫자여야 합니다.

참고 항목: removeColumn
removeRow(rowIndex) 없음

지정된 색인의 행을 삭제합니다.

  • rowIndex는 유효한 행 색인이 있는 숫자여야 합니다.

참고 항목: removeRows
removeRows(rowIndex, numberOfRows) 없음

지정된 색인의 행에서 시작되는 지정된 행 수를 삭제합니다.

  • numberOfRows는 삭제할 행 수입니다.
  • rowIndex는 유효한 행 색인이 있는 숫자여야 합니다.

참고 항목: removeRow
setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]]) 없음

셀의 값, 서식 있는 값 및 속성을 설정합니다.

  • rowIndex는 0보다 크거나 같고 getNumberOfRows() 메서드에서 반환된 행 수보다 작아야 합니다.
  • columnIndex는 0보다 크거나 같고 getNumberOfColumns() 메서드에서 반환하는 열 수보다 작아야 합니다.
  • value[선택사항] 은 지정된 셀에 할당된 값입니다. 이 값을 덮어쓰지 않으려면 이 매개변수를 undefined로 설정하고, 이 값을 지우려면 null로 설정합니다. 값의 유형은 열 유형에 따라 다릅니다 (getColumnType() 참조).
    • 열 유형이 '문자열'이면 값은 문자열이어야 합니다.
    • 열 유형이 'number'이면 값은 숫자여야 합니다.
    • 열 유형이 'boolean'인 경우 값은 부울이어야 합니다.
    • 열 유형이 'date' 또는 'datetime'인 경우 값은 날짜 객체여야 합니다.
    • 열 유형이 'timeofday'이면 값은 4개의 배열([시간, 분, 초, 밀리초])이어야 합니다.
  • formattedValue[선택사항] 은 문자열로 형식이 지정된 값이 있는 문자열입니다. 이 값을 덮어쓰지 않으려면 이 매개변수를 undefined로 설정하세요. 이 값을 지우고 API에서 필요에 따라 기본 형식을 value에 적용하려면 null로 설정하세요. 빈 형식의 값을 명시적으로 설정하려면 빈 문자열로 설정하세요. 형식이 지정된 값은 일반적으로 시각화에서 값 라벨을 표시하는 데 사용됩니다. 예를 들어 서식 있는 값은 원형 차트 내에서 라벨 텍스트로 표시될 수 있습니다.
  • properties[선택사항] 은 이 셀에 추가 속성이 있는 Object (이름/값 맵)입니다. 이 값을 덮어쓰지 않으려면 이 매개변수를 undefined로 설정하고, 이 값을 지우려면 null로 설정합니다. 일부 시각화는 행, 열 또는 셀 속성을 지원하여 표시 또는 동작을 수정합니다. 지원되는 속성을 보려면 시각화 문서를 참조하세요.

참고 항목: setValue(), setFormattedValue(), setProperty(), setProperties().

setColumnLabel(columnIndex, label) 없음

열의 라벨을 설정합니다.

  • columnIndex는 0보다 크거나 같고 getNumberOfColumns() 메서드에서 반환하는 열 수보다 작아야 합니다.
  • label은 열에 할당할 라벨이 있는 문자열입니다. 열 라벨은 일반적으로 시각화의 일부로 표시됩니다. 예를 들어 열 라벨은 테이블의 열 헤더로 표시되거나 원형 차트에서 범례 라벨로 표시될 수 있습니다.

참고 항목: getColumnLabel
setColumnProperty(columnIndex, name, value) 없음

단일 열 속성을 설정합니다. 일부 시각화는 행, 열 또는 셀 속성을 지원하여 표시 또는 동작을 수정할 수 있습니다. 지원되는 속성은 시각화 문서를 참고하세요.

  • columnIndex는 0보다 크거나 같고 getNumberOfColumns() 메서드에서 반환하는 열 수보다 작아야 합니다.
  • name은 속성 이름이 포함된 문자열입니다.
  • value는 지정된 열의 지정된 명명된 속성에 할당할 모든 유형의 값입니다.

참고 항목: setColumnProperties getColumnProperty

setColumnProperties(columnIndex, properties) 없음

여러 열 속성을 설정합니다. 일부 시각화는 행, 열 또는 셀 속성을 지원하여 표시 또는 동작을 수정할 수 있습니다. 지원되는 속성은 시각화 문서를 참고하세요.

  • columnIndex는 0보다 크거나 같고 getNumberOfColumns() 메서드에서 반환하는 열 수보다 작아야 합니다.
  • properties는 이 열에 추가 속성이 있는 Object(이름/값 맵)입니다. null가 지정되면 열의 모든 추가 속성이 삭제됩니다.

참고 항목: setColumnProperty getColumnProperty

setFormattedValue(rowIndex, columnIndex, formattedValue) 없음

셀의 서식이 지정된 값을 설정합니다.

  • rowIndex는 0보다 크거나 같고 getNumberOfRows() 메서드에서 반환된 행 수보다 작아야 합니다.
  • columnIndex는 0보다 크거나 같고 getNumberOfColumns() 메서드에서 반환하는 열 수보다 작아야 합니다.
  • formattedValue는 표시할 값이 지정된 문자열입니다. 이 값을 지우고 API에서 필요에 따라 기본 서식을 셀 값에 적용하려면 formattedValue null로 설정하고 빈 형식 값을 명시적으로 설정하려면 빈 문자열로 설정하세요.

참고 항목: getFormattedValue
setProperty(rowIndex, columnIndex, name, value) 없음

셀 속성을 설정합니다. 일부 시각화는 행, 열 또는 셀 속성을 지원하여 표시 또는 동작을 수정할 수 있습니다. 지원되는 속성은 시각화 문서를 참고하세요.

  • rowIndex는 0보다 크거나 같고 getNumberOfRows() 메서드에서 반환된 행 수보다 작아야 합니다.
  • columnIndex는 0보다 크거나 같고 getNumberOfColumns() 메서드에서 반환하는 열 수보다 작아야 합니다.
  • name은 속성 이름이 포함된 문자열입니다.
  • value은 지정된 셀의 지정된 속성에 할당하려는 모든 유형의 값입니다.

참고 항목: setCell setProperties getProperty

setProperties(rowIndex, columnIndex, properties) 없음

여러 셀 속성을 설정합니다. 일부 시각화는 행, 열 또는 셀 속성을 지원하여 표시 또는 동작을 수정할 수 있습니다. 지원되는 속성은 시각화 문서를 참고하세요.

  • rowIndex는 0보다 크거나 같고 getNumberOfRows() 메서드에서 반환된 행 수보다 작아야 합니다.
  • columnIndex는 0보다 크거나 같고 getNumberOfColumns() 메서드에서 반환하는 열 수보다 작아야 합니다.
  • properties는 이 셀에 추가 속성이 있는 Object (이름/값 맵)입니다. null가 지정되면 셀의 모든 추가 속성이 삭제됩니다.

참고 항목: setCell setProperty getProperty

setRowProperty(rowIndex, name, value) 없음

행 속성을 설정합니다. 일부 시각화는 행, 열 또는 셀 속성을 지원하여 표시 또는 동작을 수정할 수 있습니다. 지원되는 속성은 시각화 문서를 참고하세요.

  • rowIndex는 0보다 크거나 같고 getNumberOfRows() 메서드에서 반환된 행 수보다 작아야 합니다.
  • name은 속성 이름이 포함된 문자열입니다.
  • value은 지정된 행의 지정된 명명된 속성에 할당할 모든 유형의 값입니다.

참고 항목: setRowProperties getRowProperty

setRowProperties(rowIndex, properties) 없음

여러 행 속성을 설정합니다. 일부 시각화는 행, 열 또는 셀 속성을 지원하여 표시 또는 동작을 수정합니다. 지원되는 속성은 시각화 문서를 참고하세요.

  • rowIndex는 0보다 크거나 같고 getNumberOfRows() 메서드에서 반환된 행 수보다 작아야 합니다.
  • properties는 이 행의 추가 속성이 있는 Object (이름/값 맵)입니다. null가 지정되면 행의 모든 추가 속성이 삭제됩니다.

참고 항목: setRowProperty getRowProperty

setTableProperty(name, value) 없음

단일 테이블 속성을 설정합니다. 일부 시각화는 표, 행, 열 또는 셀 속성을 지원하여 표시 또는 동작을 수정합니다. 지원되는 속성은 시각화 문서를 참고하세요.

  • name은 속성 이름이 포함된 문자열입니다.
  • value은 테이블의 지정된 이름이 지정된 속성에 할당할 모든 유형의 값입니다.

참고 항목: setTableProperties getTableProperty

setTableProperties(properties) 없음

여러 표 속성을 설정합니다. 일부 시각화는 표, 행, 열 또는 셀 속성을 지원하여 표시 또는 동작을 수정합니다. 지원되는 속성은 시각화 문서를 참고하세요.

  • properties는 테이블의 추가 속성이 있는 Object (이름/값 맵)입니다. null가 지정되면 테이블의 모든 추가 속성이 삭제됩니다.

참고 항목: setTableProperty getTableProperty

setValue(rowIndex, columnIndex, value) 없음

셀 값을 설정합니다. 이 메서드는 기존 셀 값을 덮어쓰는 것 외에도 셀의 서식 있는 값과 속성을 모두 지웁니다.

  • rowIndex는 0보다 크거나 같고 getNumberOfRows() 메서드에서 반환된 행 수보다 작아야 합니다.
  • columnIndex는 0보다 크거나 같고 getNumberOfColumns() 메서드에서 반환하는 열 수보다 작아야 합니다. 이 메서드로는 이 셀에 서식 있는 값을 설정할 수 없습니다. 이렇게 하려면 setFormattedValue()를 호출하세요.
  • value는 지정된 셀에 할당된 값입니다. 반환된 값의 유형은 열 유형에 따라 다릅니다(getColumnType 참조).
    • 열 유형이 '문자열'이면 값은 문자열이어야 합니다.
    • 열 유형이 'number'이면 값은 숫자여야 합니다.
    • 열 유형이 'boolean'인 경우 값은 부울이어야 합니다.
    • 열 유형이 'date' 또는 'datetime'인 경우 값은 날짜 객체여야 합니다.
    • 열 유형이 'timeofday'이면 값은 4개의 배열([시간, 분, 초, 밀리초])이어야 합니다.
    • 모든 열 유형의 값을 null로 설정할 수 있습니다.

참고 항목: setCell, setFormattedValue, setProperty, setProperties

sort(sortColumns) 없음 지정된 정렬 열에 따라 행을 정렬합니다. DataTable는 이 메서드에 의해 수정됩니다. 정렬 세부정보에 관한 설명은 getSortedRows()를 참고하세요. 이 메서드는 정렬된 데이터를 반환하지 않습니다.
참고: getSortedRows
예: 세 번째 열을 기준으로 정렬한 후 두 번째 열을 기준으로 정렬하려면 data.sort([{column: 2}, {column: 1}]);를 사용합니다.
toJSON() 문자열 DataTable 생성자에 전달할 수 있는 DataTable의 JSON 표현을 반환합니다. 예를 들면 다음과 같습니다. 
{"cols":[{"id":"Col1","label":"","type":"date"}],
 "rows":[
   {"c":[{"v":"a"},{"v":"Date(2010,10,6)"}]},
   {"c":[{"v":"b"},{"v":"Date(2010,10,7)"}]}
 ]
}

생성자의 자바스크립트 리터럴 data 매개변수 형식

자바스크립트 문자열 리터럴 객체를 data 매개변수에 전달하여 DataTable를 초기화할 수 있습니다. 이 객체를 data 객체라고 합니다. 아래 설명에 따라 이 객체를 직접 코딩할 수도 있고, Python 사용 방법을 알고 있고 사이트에서 사용할 수 있는 경우 도우미 Python 라이브러리를 사용할 수 있습니다. 그러나 객체를 수동으로 구성하려면 이 섹션에서 구문을 설명합니다.

먼저 행 3개와 열 3개 (문자열, 숫자, 날짜 유형)가 있는 테이블을 설명하는 간단한 자바스크립트 객체의 예를 살펴보겠습니다. 

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ],
  p: {foo: 'hello', bar: 'world!'}
}

이제 구문을 설명하겠습니다.

data 객체는 필수 속성 두 개(cols 및 rows)와 임의의 값 매핑인 p 속성(선택사항)으로 구성됩니다.

참고: 표시된 모든 속성 이름과 문자열 상수는 대소문자를 구분합니다. 또한 문자열 값을 취하는 것으로 설명된 속성은 값을 따옴표로 묶어야 합니다. 예를 들어 유형 속성을 숫자로 지정하려면 type: 'number'와 같이 표현해야 합니다. 그러나 값 자체는 숫자로 표현됩니다(예: v: 42).

cols 속성

cols는 각 열의 ID와 유형을 설명하는 객체의 배열입니다. 각 속성은 대소문자를 구분하는 다음과 같은 속성이 있는 객체입니다.

  • type[필수] 열에 있는 데이터의 데이터 유형입니다. 다음 문자열 값을 지원합니다 (아래에 v: 속성이 포함되어 있음).
    • 'boolean' - 자바스크립트 부울 값('true' 또는 'false'). 예시 값: v:'true'
    • 'number' - 자바스크립트 숫자 값입니다. 예시 값: v:7 , v:3.14, v:-55
    • 'string' - 자바스크립트 문자열 값입니다. 예시 값: v:'hello'
    • 'date' - 시간이 잘린 자바스크립트 날짜 객체 (0 기반 월) 예시 값: v:new Date(2008, 0, 15)
    • 'datetime' - 시간을 포함한 자바스크립트 날짜 객체입니다. 예시 값: v:new Date(2008, 0, 15, 14, 30, 45)
    • 'timeofday' - 숫자 3개의 배열이며 선택사항인 4번째 배열로 시간(0은 자정), 분, 초, 밀리초(선택사항)를 나타냅니다. 예시 값: v:[8, 15, 0], v: [6, 12, 1, 144]
  • id[선택사항] 열의 문자열 ID입니다. 표에서 고유해야 합니다. 기본 영숫자 문자를 사용하면 호스트 페이지가 자바스크립트의 열에 액세스하기 위해 화려한 이스케이프가 필요하지 않습니다. 자바스크립트 키워드를 선택하지 않도록 주의하세요. 예: id:'col_1'
  • label[선택사항] 일부 시각화가 이 열에 표시하는 문자열 값입니다. 예: label:'Height'
  • pattern[선택사항] 데이터 소스에서 숫자, 날짜 또는 시간 열 값의 형식을 지정하는 데 사용된 문자열 패턴 이는 참조용일 뿐입니다. 패턴을 읽을 필요가 없으며 존재하지 않아도 됩니다. Google 시각화 클라이언트는 이 값을 사용하지 않으며 셀의 형식 값을 읽습니다. DataTable가 format 절이 있는 쿼리에 대한 응답으로 데이터 소스에서 가져온 경우, 이 절에서 지정한 패턴이 이 값에 반환될 가능성이 높습니다. 권장되는 패턴 표준은 ICU DecimalFormat 및 SimpleDateFormat입니다.
  • p [선택사항] 셀에 적용된 맞춤 값의 맵인 객체. 이 값은 모든 자바스크립트 유형일 수 있습니다. 셀 수준 속성을 지원하는 경우 이를 설명하는 내용이 셀 수준 속성을 설명하며, 그렇지 않으면 이 속성이 무시됩니다. 예: p:{style: 'border: 1px solid green;'}.

cols 예

cols: [{id: 'A', label: 'NEW A', type: 'string'},
       {id: 'B', label: 'B-label', type: 'number'},
       {id: 'C', label: 'C-label', type: 'date'}]

rows 속성

rows 속성에는 행 객체의 배열이 포함됩니다.

각 행 객체에는 c라는 필수 속성 하나가 있으며, 이는 해당 행의 셀 배열입니다. 전체 행에 할당할 임의의 맞춤 값의 맵을 정의하는 p 속성(선택사항)도 있습니다. 시각화에서 행 수준 속성을 지원하는 경우 이 속성은 설명을 설명하며, 그렇지 않은 경우 이 속성은 무시됩니다.

셀 객체

표의 각 셀은 다음 속성을 가진 객체로 설명됩니다.

  • v[선택사항] 셀 값입니다. 데이터 유형은 열 데이터 유형과 일치해야 합니다. 셀이 null이면 v 속성은 null이어야 하지만 여전히 f 및 p 속성이 있을 수 있습니다.
  • f[선택사항] 표시하기 위해 형식이 지정된 v 값의 문자열 버전입니다. 일반적으로 값은 일치하지 않아도 되므로 v에 Date(2008, 0, 1)를 지정하면 '2008년 1월 1일' 또는 이 속성에 몇 가지 문자열을 지정해야 합니다. 이 값은 v 값과 비교하여 확인되지 않습니다. 시각화는 이 값을 계산에 사용하지 않고 표시 라벨로만 사용합니다. 생략하면 v의 문자열 버전이 기본 형식 지정 도구를 사용하여 자동으로 생성됩니다. f 값은 자체 형식 지정 도구를 사용하여 수정하거나 setFormattedValue() 또는 setCell()로 설정하거나 getFormattedValue()으로 검색할 수 있습니다.
  • p [선택사항] 셀에 적용된 맞춤 값의 맵인 객체. 이 값은 모든 자바스크립트 유형일 수 있습니다. 시각화에서 셀 수준 속성을 지원하는 경우 이를 설명합니다. 이러한 속성은 getProperty() 메서드와 getProperties() 메서드로 검색할 수 있습니다. 예: p:{style: 'border: 1px solid green;'}

행 배열의 셀은 cols의 열 설명과 순서가 동일해야 합니다. null 셀을 나타내려면 null를 지정하거나, 배열의 셀에 공백을 남겨두거나, 후행 배열 멤버를 생략할 수 있습니다. 따라서 처음 두 셀에 null이 있는 행을 나타내려면 [ , , {cell_val}] 또는 [null, null, {cell_val}]를 지정하면 됩니다.

다음은 3개의 열과 3개의 데이터로 채워진 샘플 테이블 객체입니다.

{
  cols: [{id: 'A', label: 'NEW A', type: 'string'},
         {id: 'B', label: 'B-label', type: 'number'},
         {id: 'C', label: 'C-label', type: 'date'}
  ],
  rows: [{c:[{v: 'a'},
             {v: 1.0, f: 'One'},
             {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
        ]},
         {c:[{v: 'b'},
             {v: 2.0, f: 'Two'},
             {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
        ]},
         {c:[{v: 'c'},
             {v: 3.0, f: 'Three'},
             {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
        ]}
  ]
}

p 속성

테이블 수준 p 속성은 전체 DataTable에 적용된 커스텀 값의 맵입니다. 이 값은 모든 자바스크립트 유형일 수 있습니다. 시각화가 데이터 테이블 수준 속성을 지원하는 경우 이를 설명하며, 지원하지 않으면 이 속성을 애플리케이션에서 사용할 수 있습니다. 예: p:{className: 'myDataTable'}

DataView 클래스

기본 DataTable의 읽기 전용 뷰입니다. DataView를 사용하면 열 또는 행의 하위 집합만 선택할 수 있습니다. 또한 열/행을 재정렬하고 열/행을 복제할 수 있습니다.

뷰는 기본 DataTable에 있는 실시간 창으로, 데이터의 정적 스냅샷이 아닙니다. 하지만 여기에 설명된 대로 테이블 자체의 구조를 변경할 때는 주의해야 합니다.

  • 기본 테이블에 열을 추가하거나 삭제하면 뷰에 반영되지 않으며 뷰에서 예기치 않은 동작이 발생할 수 있습니다. 이러한 변경사항을 적용하려면 DataTable에서 새 DataView를 만들어야 합니다.
  • 기본 테이블에서 행을 추가하거나 삭제하는 것은 안전하고 변경사항이 즉시 뷰에 전파됩니다. 하지만 이 변경 후에 시각화에서 draw()를 호출하여 새 행을 렌더링해야 합니다. 뷰에서 setRows() or hideRows() 메서드 중 하나를 호출하여 행을 필터링하고 기본 테이블에서 행을 추가 또는 삭제하면 예기치 않은 동작이 발생합니다. 즉, 새 테이블을 반영하도록 새 DataView를 만들어야 합니다.
  • 기존 셀의 셀 값은 안전하게 변경되며 변경사항이 즉시 DataView에 전파됩니다. 하지만 이 변경 후에는 모든 시각화에서 draw()를 호출하여 새 셀 값을 렌더링해야 합니다.

다른 DataView에서 DataView를 만들 수도 있습니다. 기본 테이블 또는 뷰가 언급될 때마다 이 수준의 바로 아래 레벨을 참조합니다. 즉, 이 DataView를 구성하는 데 사용되는 데이터 객체를 의미합니다.

DataView은 계산된 열도 지원합니다. 사용자가 제공한 함수를 사용하여 즉석에서 값이 계산되는 열입니다. 예를 들어 앞에 있는 두 열의 합계 또는 다른 열에 있는 날짜의 분기를 계산하여 표시하는 열을 포함할 수 있습니다. 자세한 내용은 setColumns()를 참조하세요.

행 또는 열을 숨기거나 표시하여 DataView를 수정하면 시각화에서 draw()를 다시 호출할 때까지 시각화에 영향을 미치지 않습니다.

다음과 같이 DataView.getFilteredRows()를 DataView.setRows()와 결합하여 흥미로운 데이터 하위 집합이 있는 DataView를 만들 수 있습니다. 

var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(6);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));
data.setCell(3, 0, 'Frank');
data.setCell(3, 1, new Date(2007, 11, 28));
data.setCell(4, 0, 'Floyd');
data.setCell(4, 1, new Date(2005, 3, 13));
data.setCell(5, 0, 'Fritz');
data.setCell(5, 1, new Date(2007, 9, 2));

// Create a view that shows everyone hired since 2007.
var view = new google.visualization.DataView(data);
view.setRows(view.getFilteredRows([{column: 1, minValue: new Date(2007, 0, 1)}]));
var table = new google.visualization.Table(document.getElementById('test_dataview'));
table.draw(view, {sortColumn: 1});

생성자

새 DataView 인스턴스를 만드는 방법에는 두 가지가 있습니다.

생성자 1

var myView = new google.visualization.DataView(data)
data
뷰를 초기화하는 데 사용되는 DataTable 또는 DataView입니다. 기본적으로 뷰에는 기본 데이터 테이블 또는 뷰의 모든 열과 행이 원래 순서로 포함됩니다. 이 뷰에서 행 또는 열을 숨기거나 표시하려면 적절한 set...() 또는 hide...() 메서드를 호출하세요.

참고:

setColumn(), hideColumn(), setRows(), hideRows().

 

생성자 2

이 생성자는 직렬화된 DataView를 DataTable에 할당하여 새 DataView를 만듭니다. DataView.toJSON()를 사용하여 직렬화된 DataView를 다시 만드는 데 도움이 됩니다. 

var myView = google.visualization.DataView.fromJSON(data, viewAsJson)
데이터
DataView.toJSON()를 호출한 DataView를 생성하는 데 사용한 DataTable 객체. 이 테이블이 원본 테이블과 다르면 예측할 수 없는 결과를 얻게 됩니다.
ViewAsJson
DataView.toJSON()에서 반환된 JSON 문자열입니다. data DataTable에서 표시하거나 숨길 수 있는 행에 관한 설명입니다.

방법

메서드 반환 값 설명
DataTable의 설명을 참고하세요. 행/열 색인이 기본 테이블/뷰가 아니라 뷰의 색인을 참조한다는 점을 제외하고 동등한 DataTable 메서드와 동일합니다.
getTableColumnIndex(viewColumnIndex) 숫자

이 뷰의 색인에서 지정된 특정 열의 기본 테이블 (또는 뷰)에 있는 색인을 반환합니다. viewColumnIndex는 0보다 크거나 같고 getNumberOfColumns() 메서드에서 반환하는 열 수보다 작아야 합니다. 생성된 열이면 -1을 반환합니다.

예: setColumns([3, 1, 4])가 이전에 호출되었다면 getTableColumnIndex(2)는 4를 반환합니다.

getTableRowIndex(viewRowIndex) 숫자

이 뷰의 색인에서 지정된 특정 행의 기본 테이블 (또는 뷰)의 색인을 반환합니다. viewRowIndex는 0보다 크거나 같고 getNumberOfRows() 메서드에서 반환된 행 수보다 작아야 합니다.

예: setRows([3, 1, 4])가 이전에 호출되었다면 getTableRowIndex(2)는 4를 반환합니다.

getViewColumnIndex(tableColumnIndex) 숫자

이 뷰에서 기본 테이블 (또는 뷰)의 색인에 지정된 특정 열에 매핑되는 색인을 반환합니다. 이러한 색인이 두 개 이상 있으면 첫 번째 (가장 작은) 색인을 반환합니다. 이러한 색인이 없으면 (지정된 열이 뷰에 없음) -1을 반환합니다. tableColumnIndex는 0보다 크거나 같아야 하고 기본 테이블/뷰의 getNumberOfColumns() 메서드에서 반환하는 열 수보다 작아야 합니다.

예: setColumns([3, 1, 4])가 이전에 호출되었다면 getViewColumnIndex(4)는 2를 반환합니다.

getViewColumns() 숫자 배열

이 뷰의 열을 순서대로 반환합니다. 즉, 일부 배열로 setColumns를 호출한 다음 getViewColumns()를 호출하면 동일한 배열을 가져와야 합니다.

getViewRowIndex(tableRowIndex) 숫자

이 뷰에서 기본 테이블 (또는 뷰)의 색인에 지정된 행에 매핑되는 색인을 반환합니다. 이러한 색인이 두 개 이상 있으면 첫 번째 (가장 작은) 색인을 반환합니다. 이러한 색인이 없으면 (지정된 행이 뷰에 없음) -1을 반환합니다. tableRowIndex는 기본 테이블/뷰의 getNumberOfRows() 메서드에서 반환하는 행 수보다 0보다 크거나 같아야 합니다.

예: setRows([3, 1, 4])가 이전에 호출되었다면 getViewRowIndex(4)는 2를 반환합니다.

getViewRows() 숫자 배열

이 뷰의 행을 순서대로 반환합니다. 즉, 일부 배열을 사용하여 setRows를 호출한 다음 getViewRows()를 호출하면 동일한 배열이 표시됩니다.

hideColumns(columnIndexes) 없음

현재 보기에서 지정된 열을 숨깁니다. columnIndexes는 숨길 열의 색인을 나타내는 숫자 배열입니다. 이러한 색인은 기본 테이블/뷰의 색인 번호입니다. columnIndexes의 숫자는 순서가 아니어도 됩니다. 즉, [3,4,1] 을 사용해도 됩니다. 나머지 열은 반복 작업을 수행할 때 색인 순서를 유지합니다. 이미 숨겨진 열의 색인 번호를 입력해도 오류가 발생하지 않지만 기본 테이블/뷰에 없는 색인을 입력하면 오류가 발생합니다. 열 숨기기를 해제하려면 setColumns()를 호출합니다.

예: 10개의 열이 있는 테이블이 있고 setColumns([2,7,1,7,9])를 호출한 다음 hideColumns([7,9])를 호출하면 뷰의 열은 [2,1]이 됩니다.

hideRows(min, max) 없음

현재 보기에서 최솟값과 최댓값 사이의 색인이 있는 모든 행을 숨깁니다. 위 hideRows(rowIndexes)의 편의 구문입니다. 예를 들어 hideRows(5, 10)는 hideRows([5, 6, 7, 8, 9, 10])와 동일합니다.

hideRows(rowIndexes) 없음

현재 행에서 지정된 행을 숨깁니다. rowIndexes는 숨길 행의 색인을 나타내는 숫자 배열입니다. 이러한 색인은 기본 테이블/뷰의 색인 번호입니다. rowIndexes의 숫자는 순서가 아니어도 됩니다. 즉, [3,4,1] 을 사용해도 됩니다. 나머지 행은 색인 순서를 유지합니다. 이미 숨겨진 행의 색인 번호를 입력해도 오류가 발생하지 않지만 기본 테이블/뷰에 없는 색인을 입력하면 오류가 발생합니다. 행을 숨김 해제하려면 setRows()를 호출합니다.

예: 행이 10개 있는 테이블이 있고 setRows([2,7,1,7,9]), hideRows([7,9])를 호출하면 뷰의 행은 [2,1]이 됩니다.

setColumns(columnIndexes) 없음

이 뷰에 표시할 열을 지정합니다. 지정되지 않은 열은 숨겨집니다. 기본 테이블/뷰 또는 계산된 열의 열 색인 배열입니다. 이 메서드를 호출하지 않으면 기본적으로 모든 열이 표시됩니다. 배열에 중복된 항목이 포함되어 동일한 열을 여러 번 표시할 수도 있습니다. 열은 지정된 순서대로 표시됩니다.

  • columnIndexes - 숫자 또는 객체의 배열 (혼합 가능)
    • 숫자는 뷰에 포함할 소스 데이터 열의 색인을 지정합니다. 데이터는 수정되지 않은 상태로 가져옵니다. 역할 또는 추가 열 속성을 명시적으로 정의해야 하는 경우 sourceColumn 속성을 사용하여 객체를 지정합니다.
    • 객체는 계산된 열을 지정합니다. 계산된 열은 각 행에 대해 값을 즉시 생성하고 뷰에 추가합니다. 객체에는 다음 속성이 있어야 합니다.
      • calc [function] - 열의 값을 계산하기 위해 열의 각 행에 호출될 함수입니다. 함수 서명은 func(dataTable, row)입니다. 여기서 dataTable는 소스 DataTable이고 row는 소스 데이터 행의 색인입니다. 이 함수는 type로 지정된 유형의 단일 값을 반환해야 합니다.
      • type [string] - calc 함수가 반환하는 값의 자바스크립트 유형입니다.
      • label[선택사항, 문자열] - 생성된 열에 할당할 선택적 라벨입니다. 지정하지 않으면 뷰 열에 라벨이 없습니다.
      • id[선택사항, 문자열] - 생성된 열에 할당할 선택적 ID입니다.
      • sourceColumn - [선택사항, 숫자] 값으로 사용할 소스 열입니다. 지정된 경우 calc 또는 type 속성을 지정하지 않습니다. 객체 대신 숫자를 전달하는 것과 비슷하지만 새 열에 역할과 속성을 지정할 수 있습니다.
      • properties[선택사항, 객체] - 이 열에 할당할 임의의 속성이 포함된 객체입니다. 지정하지 않으면 뷰 열에 속성이 없습니다.
      • role[선택사항, 문자열] - 이 열에 할당할 역할 지정하지 않으면 기존 역할을 가져오지 않습니다.

예:

// Show some columns directly from the underlying data.
// Shows column 3 twice.
view.setColumns([3, 4, 3, 2]);

// Underlying table has a column specifying a value in centimeters.
// The view imports this directly, and creates a calculated column
// that converts the value into inches.
view.setColumns([1,{calc:cmToInches, type:'number', label:'Height in Inches'}]);
function cmToInches(dataTable, rowNum){
  return Math.floor(dataTable.getValue(rowNum, 1) / 2.54);
}
setRows(min, max) 없음

이 뷰의 행이 min과 max (포함) 사이에 있는 모든 색인 (기본 테이블/뷰)이 되도록 설정합니다. 다음은 setRows(rowIndexes)의 편의 구문입니다. 예를 들어 setRows(5, 10)는 setRows([5, 6, 7, 8, 9, 10])와 동일합니다.

setRows(rowIndexes) 없음

기본 테이블/뷰의 색인 번호를 기준으로 이 뷰에 표시되는 행을 설정합니다. rowIndexes는 뷰에 표시할 행을 지정하는 색인 번호의 배열이어야 합니다. 배열은 행을 표시할 순서를 지정하며 행은 중복될 수 있습니다. rowIndexes에 지정된 행만 표시됩니다. 이 메서드는 뷰에서 다른 모든 행을 지웁니다. 또한 이 배열에는 이 뷰에 지정된 행을 효과적으로 복제하는 중복 항목이 포함될 수 있습니다. 예를 들어 setRows([3, 4, 3, 2])는 이 행에서 3 행이 두 번 표시되도록 합니다. 따라서 배열은 기본 테이블/뷰에서 이 뷰로 행의 매핑을 제공합니다. getFilteredRows() 또는 getSortedRows()를 사용하여 이 메서드에 관한 입력을 생성할 수 있습니다.

예: 기본 테이블/뷰의 행 3과 0이 있는 뷰를 만들려면 다음 안내를 따르세요. view.setRows([3, 0])

toDataTable() 데이터 테이블 DataView의 표시된 행과 열로 채워진 DataTable 객체를 반환합니다.
toJSON() 문자열 이 DataView의 문자열 표현을 반환합니다. 이 문자열에는 실제 데이터가 포함되지 않으며, 표시되는 행 및 열과 같은 DataView 관련 설정만 포함됩니다. 이 문자열을 저장하고 정적 DataView.fromJSON() 생성자에 전달하여 이 뷰를 다시 만들 수 있습니다. 여기에는 생성된 열이 포함되지 않습니다.

ChartWrapper 클래스

ChartWrapper 클래스는 차트를 래핑하고 차트의 모든 로드, 그리기, 데이터 소스 쿼리를 처리하는 데 사용됩니다. 클래스는 차트에 값을 설정하고 그리기 위한 편의 메서드를 노출합니다. 이 클래스는 쿼리 콜백 핸들러를 만들 필요가 없기 때문에 데이터 소스에서의 읽기를 간소화합니다. 또한 차트를 쉽게 재사용할 수 있도록 차트를 저장할 수도 있습니다.

ChartWrapper를 사용하는 또 다른 이점은 동적 로드를 사용하여 라이브러리 로드 수를 줄일 수 있다는 것입니다. 또한 ChartWrapper가 차트 패키지 조회 및 로드를 자동으로 처리하므로 패키지를 명시적으로 로드할 필요가 없습니다. 자세한 내용은 아래 예를 참고하세요.

그러나 ChartWrapper는 현재 차트에 의해 발생한 이벤트의 하위 집합(선택, 준비, 오류)만 전파합니다. 다른 이벤트는 ChartWrapper 인스턴스를 통해 전송되지 않습니다. 다른 이벤트를 가져오려면 다음과 같이 차트 핸들에서 직접 getChart()를 호출하고 이벤트를 구독해야 합니다. 

var wrapper;
function drawVisualization() {

  // Draw a column chart
  wrapper = new google.visualization.ChartWrapper({
    chartType: 'ColumnChart',
    dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                [700, 300, 400, 500, 600, 800]],
    options: {'title': 'Countries'},
    containerId: 'visualization'
  });

  // Never called.
  google.visualization.events.addListener(wrapper, 'onmouseover', uselessHandler);

  // Must wait for the ready event in order to
  // request the chart and subscribe to 'onmouseover'.
  google.visualization.events.addListener(wrapper, 'ready', onReady);

  wrapper.draw();

  // Never called
  function uselessHandler() {
    alert("I am never called!");
  }

  function onReady() {
    google.visualization.events.addListener(wrapper.getChart(), 'onmouseover', usefulHandler);
  }

  // Called
  function usefulHandler() {
    alert("Mouseover event!");
  }
}

생성자

ChartWrapper(opt_spec)
opt_spec
[선택사항] - 차트를 정의하는 JSON 객체 또는 해당 객체의 직렬화된 문자열 버전입니다. 이 객체의 형식은 drawChart() 문서에 나와 있습니다. 지정하지 않으면 이 객체에서 노출된 set... 메서드를 사용하여 적절한 속성을 모두 설정해야 합니다.

방법

ChartWrapper는 다음과 같은 추가 메서드를 노출합니다.

메서드 반환 유형 설명
draw(opt_container_ref) 없음

차트를 그립니다. 차트 또는 데이터를 변경한 후 이 메서드를 호출하여 변경사항을 표시해야 합니다.

  • opt_container_ref[선택] - 페이지의 유효한 컨테이너 요소에 대한 참조 지정된 경우 차트가 그려집니다. 그렇지 않으면 containerId로 지정된 ID를 가진 요소에 차트가 그려집니다.
toJSON() 문자열 차트의 JSON 표현 문자열 버전을 반환합니다.
clone() 차트 래퍼 차트 래퍼의 딥 카피를 반환합니다.
getDataSourceUrl() 문자열 이 차트가 데이터 소스에서 데이터를 가져오면 이 데이터 소스의 URL이 반환됩니다. 그렇지 않으면 null을 반환합니다.
getDataTable() google.visualization.DataTable

이 차트가 로컬에서 정의된 DataTable에서 데이터를 가져오면 차트의 DataTable에 대한 참조를 반환합니다. 이 차트가 데이터 소스에서 데이터를 가져오면 null이 반환됩니다.

반환된 객체를 변경하면 다음번 ChartWrapper.draw() 호출 시 차트에 변경사항이 반영됩니다.

getChartType() 문자열 래핑된 차트의 클래스 이름입니다. Google 차트인 경우 이름이 google.visualization로 한정되지 않습니다. 예를 들어 트리맵 차트인 경우 'google.visualization.treemap'이 아닌 'Treemap'을 반환합니다.
getChartName() 문자열 setChartName()에서 할당한 차트 이름을 반환합니다.
getChart() 차트 객체 참조 이 ChartWrapper로 만든 차트에 대한 참조(예: google.visualization.BarChart 또는 google.visualization.ColumnChart )를 반환합니다. 이렇게 하면 ChartWrapper 객체에서 draw()를 호출할 때까지 null이 반환되고 준비된 이벤트가 발생합니다. 반환된 객체에서 호출한 메서드는 페이지에 반영됩니다.
getContainerId() 문자열 차트의 DOM 컨테이너 요소 ID입니다.
getQuery() 문자열 이 차트의 쿼리 문자열(있는 경우, 데이터 소스를 쿼리하는 경우)
getRefreshInterval() 숫자 데이터 소스를 쿼리하는 경우 이 차트의 모든 새로고침 간격입니다. 0은 새로고침이 없음을 나타냅니다.
getOption(key, opt_default_val) 모든 유형

지정된 차트 옵션 값을 반환합니다.

  • 키 - 검색할 옵션의 이름입니다. 정규화된 이름일 수 있습니다(예: 'vAxis.title').
  • opt_default_value[선택] - 지정된 값이 정의되지 않았거나 null이면 이 값이 반환됩니다.
getOptions() 객체 이 차트의 옵션 객체를 반환합니다.
getView() 객체 OR 배열 DataView 이니셜라이저 객체 또는 dataview.toJSON()와 같은 형식의 객체 또는 이러한 객체의 배열을 반환합니다.
setDataSourceUrl(url) 없음 이 차트에 사용할 데이터 소스의 URL을 설정합니다. 이 객체에 데이터 표도 설정한 경우 데이터 소스 URL은 무시됩니다.
setDataTable(table) 없음 차트의 DataTable을 설정합니다. null, DataTable 객체, DataTable의 JSON 표현, arrayToDataTable() 문법을 따르는 배열을 전달합니다.
setChartType(type) 없음 차트 유형을 설정합니다. 래핑된 차트의 클래스 이름을 전달합니다. Google 차트인 경우 google.visualization로 한정하지 마세요. 예를 들어 원형 차트의 경우 'PieChart'를 전달합니다.
setChartName(name) 없음 차트의 임의 이름을 설정합니다. 맞춤 차트에서 명시적으로 사용하도록 디자인되지 않은 한 차트의 어디에도 표시되지 않습니다.
setContainerId(id) 없음 차트에 포함된 DOM 요소의 ID를 설정합니다.
setQuery(query_string) 없음 이 차트가 데이터 소스를 쿼리하는 경우 쿼리 문자열을 설정합니다. 이 값을 지정하는 경우 데이터 소스 URL도 설정해야 합니다.
setRefreshInterval(interval) 없음 데이터 소스를 쿼리하는 경우 이 차트의 새로고침 간격을 설정합니다. 이 값을 지정하는 경우 데이터 소스 URL도 설정해야 합니다. 0은 새로고침이 없음을 나타냅니다.
setOption(key, value) 없음 단일 차트 옵션 값을 설정합니다. 여기서 key는 옵션 이름이고 value는 값입니다. 옵션을 설정 해제하려면 값에 null을 전달합니다. key는 정규화된 이름(예: 'vAxis.title')일 수 있습니다.
setOptions(options_obj) 없음 차트의 전체 옵션 객체를 설정합니다.
setView(view_spec) 없음 기본 데이터에 대한 필터 역할을 하는 DataView 이니셜라이저 객체를 설정합니다. 차트 래퍼에는 이 뷰를 적용할 DataTable 또는 데이터 소스의 기본 데이터가 있어야 합니다. dataview.toJSON()에서 반환하는 것과 같이 문자열 또는 DataView 이니셜라이저 객체를 전달할 수 있습니다. DataView 이니셜라이저 객체의 배열을 전달할 수도 있습니다. 이 경우 배열의 첫 번째 DataView가 기본 데이터에 적용되어 새 데이터 테이블이 생성되고, 두 번째 DataView이 첫 번째 DataView의 적용으로 인한 데이터 테이블에 적용됩니다.

이벤트

ChartWrapper 객체에서 다음 이벤트가 발생합니다. 이벤트가 발생하기 전에 ChartWrapper.draw()를 호출해야 합니다.

이름 설명 속성
error 차트를 렌더링하려고 할 때 오류가 발생하면 실행됩니다. ID, 메시지
ready 차트에서 외부 메서드 호출을 사용할 수 있습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 draw 메서드를 호출하기 전에 이 이벤트에 대한 리스너를 설정하고 이벤트가 시작된 후에만 호출해야 합니다. 없음
select 사용자가 막대 또는 범례를 클릭하면 실행됩니다. 차트 요소가 선택되면 데이터 테이블의 해당 셀이 선택됩니다. 범례가 선택되면 데이터 테이블의 해당 열이 선택됩니다. 어떤 항목이 선택되었는지 알아보려면 ChartWrapper.getChart(). getSelection()를 호출하세요. 이 이벤트는 기본 차트 유형에서 선택 이벤트를 발생시킬 때만 발생합니다. 없음

예

다음 두 스니펫은 동등한 선 차트를 만듭니다. 첫 번째 예시에서는 JSON 리터럴 표기법을 사용하여 차트를 정의하고 두 번째 예에서는 ChartWrapper 메서드를 사용하여 이러한 값을 설정합니다. 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Visualization API Sample</title>
<!--
  One script tag loads all the required libraries!
-->
<script type="text/javascript"
      src='https://www.gstatic.com/charts/loader.js'></script>
<script>
  google.charts.load('current);
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    var wrap = new google.visualization.ChartWrapper({
       'chartType':'LineChart',
       'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
       'containerId':'visualization',
       'query':'SELECT A,D WHERE D > 100 ORDER BY D',
       'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
       });
     wrap.draw();
  }
</script>
</head>
<body>
  <div id="visualization" style="height: 400px; width: 400px;"></div>
</body>
</html>

이제 동일한 차트로 setter 메서드를 사용합니다.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<title>Google Visualization API Sample</title>
<!-- One script tag loads all the required libraries!
-->
<script type="text/javascript"
    src='https://www.gstatic.com/charts/loader.js'></script>
<script type="text/javascript">
  google.charts.load('current');
  google.charts.setOnLoadCallback(drawVisualization);
  function drawVisualization() {
    // Define the chart using setters:
    var wrap = new google.visualization.ChartWrapper();
    wrap.setChartType('LineChart');
    wrap.setDataSourceUrl('http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');
    wrap.setContainerId('visualization');
    wrap.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    wrap.setOptions({'title':'Population Density (people/km^2)', 'legend':'none'});
    wrap.draw();
  }
</script>
</head>
<body>
  <div id='visualization' style='height: 400px; width: 400px;'></div>
</body>
</html>

ChartEditor 클래스

ChartEditor 클래스는 사용자가 즉시 시각화를 맞춤설정할 수 있는 인페이지 대화상자를 여는 데 사용됩니다.

ChartEditor를 사용하는 방법은 다음과 같습니다.

  1. charteditor 패키지를 로드합니다. google.charts.load()에서 'charteditor' 패키지를 로드합니다. 편집기에서 렌더링하는 차트 유형의 패키지를 로드할 필요가 없습니다. 차트 편집기는 필요에 따라 모든 패키지를 로드합니다.
  2. 사용자가 맞춤설정할 수 있는 차트를 정의하는 ChartWrapper 객체를 만듭니다. 이 차트가 대화상자에 표시되며, 사용자가 편집기를 사용하여 차트를 재설계하고, 차트 유형을 변경하거나, 소스 데이터를 변경합니다.
  3. 새 ChartEditor 인스턴스를 만들고 등록하여 'ok' 이벤트를 수신 대기합니다. 이 이벤트는 사용자가 대화상자의 'OK' 버튼을 클릭하면 발생합니다. 이 플래그를 수신하면 ChartEditor.getChartWrapper()를 호출하여 사용자가 수정한 차트를 검색해야 합니다.
  4. ChartEditor.openDialog()를 호출하여 ChartWrapper을 전달합니다. 대화상자가 열립니다. 대화상자 버튼을 사용하면 사용자가 편집기를 닫을 수 있습니다. ChartEditor 인스턴스는 범위 내에 있으면 사용할 수 있으며 사용자가 대화상자를 닫은 후에는 자동으로 폐기되지 않습니다.
  5. 코드에서 차트를 업데이트하려면 setChartWrapper()를 호출합니다.

방법

메서드 반환 값 설명
openDialog(chartWrapper, opt_options) null

페이지에 삽입된 대화상자로 차트 편집기를 엽니다. 함수는 즉시 반환되며 대화상자가 닫힐 때까지 기다리지 않습니다. 인스턴스 범위를 잃지 않으면 ChartWrapper 객체를 다시 전달해야 하지만 openDialog()를 다시 호출하여 대화상자를 다시 열 수 있습니다.

  • chartWrapper - 창에서 렌더링할 초기 차트를 정의하는 ChartWrapper 객체입니다. 차트에 채워진 DataTable가 있거나 유효한 데이터 소스에 연결되어 있어야 합니다. 이 래퍼는 내부적으로 차트 편집기에 복사되므로 나중에 ChartWrapper 핸들을 변경해도 차트 편집기의 사본에 반영되지 않습니다.
  • opt_options - [선택사항] 차트 편집기의 옵션이 포함된 객체입니다. 아래 옵션 표를 참고하세요.
getChartWrapper() ChartWrapper 사용자 수정사항이 적용된 차트를 나타내는 ChartWrapper를 반환합니다.
setChartWrapper(chartWrapper) null

이 메서드를 사용하여 편집기에서 렌더링된 차트를 업데이트합니다.

chartWrapper - 렌더링할 새 차트를 나타내는 ChartWrapper 객체입니다. 차트에 채워진 DataTable가 있거나 유효한 데이터 소스에 연결되어 있어야 합니다.

closeDialog() null 차트 편집기 대화상자를 닫습니다.

옵션

차트 편집기는 다음 옵션을 지원합니다.

이름 유형 기본 설명
dataSourceInput 요소 핸들 또는 'URLbox' null

사용자가 차트의 데이터 소스를 지정할 수 있게 하는 데 사용합니다. 이 속성은 다음 두 값 중 하나일 수 있습니다.

  • 'urlbox' - 수정 가능한 텍스트 상자에 차트의 데이터 소스 URL을 표시합니다. 사용자가 이를 수정할 수 있으며, 차트는 새 데이터 소스를 기반으로 다시 그려집니다.
  • DOM 요소 - 데이터 소스를 선택하는 데 사용할 맞춤 HTML 요소를 제공할 수 있습니다. 코드에서 생성하거나 페이지에서 복사한 HTML 요소에 핸들을 전달합니다. 이 요소가 대화상자에 표시됩니다. 이를 통해 사용자가 차트의 데이터 소스를 선택할 수 있습니다. 예를 들어 여러 데이터 소스 URL 또는 사용자가 선택할 수 있는 사용자 친화적인 이름이 포함된 목록 상자를 만듭니다. 이 요소는 선택 핸들러를 구현하고 이를 사용하여 차트의 데이터 소스를 변경해야 합니다. 예를 들어 기본 DataTable를 변경하거나 차트의 dataSourceUrl 필드를 수정합니다.

이벤트

차트 편집기에서 다음과 같은 이벤트가 발생합니다.

이름 설명 속성
ok 사용자가 대화상자에서 'OK' 버튼을 클릭하면 실행됩니다. 이 메서드를 수신한 후 getChartWrapper()를 호출하여 사용자 구성 차트를 검색해야 합니다. 없음
cancel 사용자가 대화상자의 'Cancel' 버튼을 클릭하면 실행됩니다. 없음

예

다음 예시 코드는 채워진 선 차트가 있는 차트 편집기 대화상자를 엽니다. 사용자가 '확인'을 클릭하면 수정된 차트가 페이지의 지정된 <div>에 저장됩니다. 

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <title>
    Google Visualization API Sample
  </title>
  <script type="text/javascript"
    src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
    google.charts.load('current', {packages: ['charteditor']});
  </script>
  <script type="text/javascript">
    google.charts.setOnLoadCallback(loadEditor);
    var chartEditor = null;

    function loadEditor() {
      // Create the chart to edit.
      var wrapper = new google.visualization.ChartWrapper({
         'chartType':'LineChart',
         'dataSourceUrl':'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
         'query':'SELECT A,D WHERE D > 100 ORDER BY D',
         'options': {'title':'Population Density (people/km^2)', 'legend':'none'}
      });

      chartEditor = new google.visualization.ChartEditor();
      google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
      chartEditor.openDialog(wrapper, {});
    }

    // On "OK" save the chart to a <div> on the page.
    function redrawChart(){
      chartEditor.getChartWrapper().draw(document.getElementById('vis_div'));
    }

  </script>
</head>
<body>
  <div id="vis_div" style="height: 400px; width: 600px;"></div>
</body>
</html>

데이터 조작 방식

google.visualization.data 네임스페이스는 정적 객체를 보유하여 DataTable 객체에 SQL과 유사한 작업을 수행합니다(예: 조인 또는 열 값별 그룹화).

google.visualization.data 네임스페이스는 다음 메서드를 노출합니다.

메서드 설명
google.visualization.data.group SQL GROUP BY 작업을 수행하여 지정된 열의 값으로 그룹화된 테이블을 반환합니다.
google.visualization.data.join 하나 이상의 키 열에서 데이터 테이블 두 개를 조인합니다.

group()

채워진 DataTable 객체를 사용하고 SQL과 유사한 GROUP BY 작업을 수행하여 지정된 열 값으로 그룹화된 행이 있는 테이블을 반환합니다. 이렇게 해도 입력 DataTable은 수정되지 않습니다.

반환된 테이블에는 지정된 키 열의 각 값 조합에 대한 행이 하나씩 포함됩니다. 각 행에는 키 열, 그리고 키 조합과 일치하는 모든 행에 대해 집계된 열 값이 있는 열 1개가 포함됩니다 (예: 지정된 열에 있는 모든 값의 합계 또는 개수).

google.visualization.data 네임스페이스에는 여러 집계 값(예: sum 및 count)이 포함되지만 직접 정의할 수도 있습니다 (예: standardDeviation 또는 secondHighest). 자체 애그리게이터를 정의하는 방법에 관한 안내는 메서드 설명 다음에 제공됩니다.

문법

google.visualization.data.group(data_table, keys, columns)
데이터_테이블
입력 DataTable입니다. group()를 호출해도 수정되지 않습니다.
keys
그룹화할 열을 지정하는 숫자 또는 객체의 배열입니다. 결과 테이블에는 이 배열의 모든 열과 열의 모든 열이 포함됩니다. 숫자인 경우 그룹화할 입력 DataTable의 열 색인입니다. 객체인 경우 지정된 열을 수정할 수 있는 함수가 포함됩니다 (예: 해당 열의 값에 1을 추가). 객체에는 다음 속성이 있어야 합니다.
  • column - 변환을 적용할 dt의 열 색인입니다.
  • modifier - 하나의 값 (각 행에 대한 열의 셀 값)을 받아 수정된 값을 반환하는 함수입니다. 이 함수는 그룹화에 도움이 되도록 열 값을 수정하는 데 사용됩니다. 예를 들어 날짜 열에서 분기를 계산하는 whenQuarter 함수를 호출하여 API가 분기별로 행을 그룹화할 수 있습니다. 계산된 값은 반환된 테이블의 키 열에 표시됩니다. 이 함수는 이 객체 내에서 인라인으로 선언되거나 코드의 다른 곳에서 정의하는 함수일 수 있습니다 (호출 범위 내에 있어야 함). API는 하나의 간단한 수정자 함수를 제공합니다. 여기에서 더 유용한 자체 함수를 만드는 방법을 확인할 수 있습니다. 이 함수가 수용할 수 있는 데이터 유형을 알고 있고 해당 유형의 열에서만 호출해야 합니다. 또한 이 함수의 반환 유형을 알고 있어야 하며 다음에서 설명하는 type 속성에서 이를 선언해야 합니다.
  • type - 함수 modifier에서 반환된 유형입니다. 자바스크립트 문자열 유형 이름이어야 합니다(예: 'number' 또는 'boolean').
  • label - [선택사항] 반환된 DataTable에 이 열을 할당할 문자열 라벨.
  • id - [선택사항] 반환된 DataTable에 이 열을 할당할 문자열 ID.

예: [0], [0,2], [0,{column:1, modifier:myPlusOneFunc, type:'number'},2]
열
[선택사항] 키 열 외에 출력 테이블에 포함할 열을 지정할 수 있습니다. 행 그룹의 모든 행은 단일 출력 행으로 압축되므로 해당 행 그룹에 표시할 값을 결정해야 합니다. 예를 들어 집합의 첫 번째 행의 열 값 또는 해당 그룹의 모든 행의 평균값을 표시하도록 선택할 수 있습니다. columns는 객체의 배열로, 다음과 같은 속성을 포함합니다.
  • 열 - 표시할 열의 색인을 지정하는 숫자입니다.
  • aggregation - 이 행 그룹에 있는 이 열의 모든 값 배열을 허용하고 결과 행에 표시할 단일 값을 반환하는 함수입니다. 반환 값은 객체의 type 속성에서 지정한 유형이어야 합니다. 자체 집계 함수를 만드는 방법은 아래에 나와 있습니다. 이 메서드에서 허용하는 데이터 유형을 확인하고 적절한 유형의 열에만 호출해야 합니다. API는 몇 가지 유용한 집계 함수를 제공합니다. 목록은 제공된 집계 함수를 참고하거나 자체 집계 함수를 작성하는 방법을 알아보려면 집계 함수 만들기를 참고하세요.
  • type - 집계 함수의 반환 유형입니다. 자바스크립트 문자열 유형 이름이어야 합니다(예: 'number' 또는 'boolean').
  • label - [선택사항] 반환된 테이블의 이 열에 적용할 문자열 라벨입니다.
  • id - [선택사항] 반환된 테이블의 이 열에 적용할 문자열 ID입니다.

반환 값

keys에 나열된 열마다 열이 하나씩 있으며, 열에 나열된 열마다 열이 하나씩 있는 DataTable. 표는 키 행을 기준으로 왼쪽에서 오른쪽으로 정렬됩니다.

예

// This call will group the table by column 0 values.
// It will also show column 3, which will be a sum of
// values in that column for that row group.
var result = google.visualization.data.group(
  dt,
  [0],
  [{'column': 3, 'aggregation': google.visualization.data.sum, 'type': 'number'}]
);

*Input table*
1  'john'  'doe'            10
1  'jane'  'doe'           100
3  'jill'  'jones'          50
3  'jack'  'jones'          75
5  'al'    'weisenheimer'  500

*Output table*
1  110
3  125
5  500

수정자 함수 제공

API는 키에 전달할 수 있는 다음과 같은 수정자 함수를 제공합니다. modifier 매개변수를 사용하여 그룹화 동작을 맞춤설정합니다.

함수 입력 배열 유형 반환 유형 설명
google.visualization.data.month 날짜 숫자 날짜가 주어지면 0부터 시작하는 월 값 (0, 1, 2 등)을 반환합니다.

제공된 집계 함수

API는 열에 전달할 수 있는 다음과 같은 집계 함수를 제공합니다. aggregation 매개변수 배열.

함수 입력 배열 유형 반환 유형 설명
google.visualization.data.avg 숫자 숫자 전달된 배열의 평균 값입니다.
google.visualization.data.count 모든 유형 숫자 그룹의 행 수입니다. Null 및 중복 값이 계산됩니다.
google.visualization.data.max 숫자, 문자열, 날짜 숫자, 문자열, 날짜, null 배열의 최댓값입니다. 문자열의 경우 사전순으로 정렬된 목록의 첫 번째 항목입니다. 날짜 값의 경우 가장 최근 날짜입니다. null은 무시됩니다. 최댓값이 없는 경우 null을 반환합니다.
google.visualization.data.min 숫자, 문자열, 날짜 숫자, 문자열, 날짜, null 배열의 최솟값입니다. 문자열의 경우 사전순으로 정렬된 목록의 마지막 항목입니다. 날짜 값의 경우 가장 빠른 날짜입니다. null은 무시됩니다. 최솟값이 없으면 null을 반환합니다.
google.visualization.data.sum 숫자 숫자 배열에 있는 모든 값의 합계입니다.

수정자 함수 만들기

group() 함수가 행을 그룹화하기 전에 수정자 함수를 만들어 간단한 변환 onkey 값을 수행할 수 있습니다. 이 함수는 단일 셀 값을 가져와서 작업을 수행하고 (예: 값에 1을 더한 값) 반환합니다. 입력 유형과 반환 유형이 같을 필요는 없지만 호출자는 입력 및 출력 유형을 알아야 합니다. 다음은 날짜를 받아 분기를 반환하는 함수의 예입니다. 

// Input type: Date
// Return type: number (1-4)
function getQuarter(someDate) {
  return Math.floor(someDate.getMonth()/3) + 1;
}

집계 함수 만들기

행 그룹의 열 값 집합을 수락하고 단일 숫자를 반환하는 집계 함수를 만들 수 있습니다(예: 개수 또는 평균 값 반환). 다음은 행 수에 있는 행의 수를 반환하는 제공된 개수 집계 함수의 구현입니다. 

// Input type: Array of any type
// Return type: number
function count(values) {
  return values.length;
}

join()

이 메서드는 SQL JOIN 문과 마찬가지로 데이터 테이블 2개 (DataTable 또는 DataView 객체)를 단일 결과 테이블에 조인합니다. 두 표 사이에 하나 이상의 열 쌍(키 열)을 지정하면 지정한 결합 방법에 따라 두 키가 일치하는 행만 표시되고, 한 표의 모든 행이나 두 열의 모든 행이 키 일치 여부와 관계없이 출력 테이블에 포함됩니다. 결과 테이블에는 키 열과 추가로 지정한 열만 포함됩니다. dt2는 중복 키를 가질 수 없지만 dt1은 중복 키를 가질 수 있습니다. '키'라는 용어는 특정 키 열 값이 아닌 모든 키 열 값의 조합을 의미합니다. 따라서 행에 셀 값이 A | B | C이고 0과 1 열이 키 열이면 해당 행의 키는 AB가 됩니다.

문법

google.visualization.data.join(dt1, dt2, joinMethod,
                                 keys, dt1Columns, dt2Columns);
dt1
dt2와 조인할 채워진 DataTable입니다.
dt2
dt1과 조인할 채워진 DataTable입니다. 이 테이블에는 동일한 키 (키는 키 열 값의 조합)를 여러 개 가질 수 없습니다.
joinMethod
조인 유형을 지정하는 문자열입니다. dt1에 dt2 행과 일치하는 행이 여러 개 있는 경우 출력 테이블에 일치하는 모든 dt1 행이 포함됩니다. 다음 값 중에서 선택합니다.
  • 'full' - 키가 일치하는지에 관계없이 출력 테이블에 두 테이블의 모든 행이 포함됩니다. 일치하지 않는 행에는 null 셀 항목이 있으며 일치하는 행은 조인됩니다.
  • 'inner' - 키가 일치하는 행만 포함하도록 필터링된 전체 조인입니다.
  • 'left' - dt2에서 일치하는 행이 있는지와 상관없이 출력 테이블에 dt1의 모든 행이 포함됩니다.
  • 'right' - dt1에서 일치하는 행이 있는지와 상관없이 출력 테이블에 dt2의 모든 행이 포함됩니다.
keys
두 테이블에서 비교할 키 열의 배열입니다. 각 쌍은 요소 2개의 배열입니다. 첫 번째는 dt1의 키이고 두 번째는 dt2의 키입니다. 이 배열은 색인, ID 또는 라벨로 열을 지정할 수 있습니다. getColumnIndex를 참조하세요.
두 테이블의 열이 동일한 유형이어야 합니다. 지정된 모든 키가 테이블의 행을 포함하려면 joinMethod에 지정된 규칙에 따라 일치해야 합니다. 키 열은 항상 출력 테이블에 포함됩니다. 왼쪽 표인 dt1만 중복 키를 포함할 수 있습니다. dt2의 키는 고유해야 합니다. 여기에서 '키'라는 용어는 개별 열 값이 아닌 고유한 키 열 집합을 의미합니다. 예를 들어 키 열이 A와 B였다면 다음 테이블에는 고유한 키 값만 있어 dt2로 사용할 수 있습니다.
A B
젠 빨간색
젠 Blue
Fred 빨간색
예: [[0,0], [2,1]]는 두 테이블의 첫 번째 열과 dt1의 세 번째 열을 dt2의 두 번째 열과 비교합니다.
dt1열
dt1의 키 열 외에도 출력 테이블에 포함할 dt1의 열 배열입니다. 이 배열은 색인, ID 또는 라벨로 열을 지정할 수 있습니다. getColumnIndex를 참조하세요.
dt2열
dt2의 키 열 외에 출력 테이블에 포함할 dt2의 열 배열입니다. 이 배열은 색인, ID 또는 라벨로 열을 지정할 수 있습니다. getColumnIndex를 참조하세요.

반환 값

키 열 dt1Column 및 dt2Column이 포함된 DataTable 이 표는 키 열을 기준으로 왼쪽에서 오른쪽으로 정렬됩니다. joinMethod가 'inner'인 경우 모든 키 셀을 채워야 합니다. 다른 조인 메서드의 경우 일치하는 키를 찾을 수 없으면 표에 일치하지 않는 키 셀이 null일 수 있습니다.

예

*Tables*
dt1                        dt2
bob  | 111 | red           bob   | 111 | point
bob  | 111 | green         ellyn | 222 | square
bob  | 333 | orange        jane  | 555 | circle
fred | 555 | blue          jane  | 777 | triangle
jane | 777 | yellow        fred  | 666 | dodecahedron
* Note that right table has duplicate Jane entries, but the key we will use is
* columns 0 and 1. The left table has duplicate key values, but that is
* allowed.

*Inner join* google.visualization.data.join(dt1, dt2, 'inner', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red    | point
bob  | 111 | green  | point
jane | 777 | yellow | triangle
* Note that both rows from dt1 are included and matched to
* the equivalent dt2 row.


*Full join* google.visualization.data.join(dt1, dt2, 'full', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red    | point
bob   | 111 | green  | point
bob   | 333 | orange | null
ellyn | 222 | null | square
fred  | 555 | blue   | null
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle


*Left join*  google.visualization.data.join(dt1, dt2, 'left', [[0,0],[1,1]], [2], [2]);
bob  | 111 | red | point
bob  | 111 | green | point
bob  | 333 | orange | null
fred | 555 | blue | null
jane | 777 | yellow | triangle


*Right join*  google.visualization.data.join(dt1, dt2, 'right', [[0,0],[1,1]], [2], [2]);
bob   | 111 | red | point
bob   | 111 | green | point
ellyn | 222 | null | square
fred  | 666 | null | dodecahedron
jane  | 555 | null | circle
jane  | 777 | yellow | triangle

포맷러

Google 시각화 API는 시각화에서 데이터 형식을 다시 지정하는 데 사용할 수 있는 형식 지정 도구를 제공합니다. 이러한 형식 지정 도구는 모든 행에서 지정된 열의 서식 있는 값을 변경합니다. 참고:

  • 형식 지정자는 서식 있는 값만 수정하며 기본 값은 수정하지 않습니다. 예를 들어 표시되는 값은 '$1,000.00'이지만 기본 값은 계속 '1000'입니다.
  • 형식 지정 도구는 한 번에 하나의 열에만 영향을 미칩니다. 여러 열의 형식을 다시 지정하려면 변경하려는 각 열에 형식 지정 도구를 적용하세요.
  • 사용자 정의 형식 지정 도구도 사용하는 경우 특정 Google 시각화 형식 지정 도구가 모든 사용자 정의 형식 지정 도구보다 우선합니다.

    • 데이터에 적용되는 실제 형식은 API가 로드된 언어에서 파생됩니다. 자세한 내용은 특정 언어로 차트 로드하기를 참고하세요.

    중요: 형식 지정 도구는 DataTable에서만 사용할 수 있으며 DataView와 함께 사용할 수 없습니다 (DataView 객체는 읽기 전용임).

    형식 지정 도구를 사용하는 일반적인 단계는 다음과 같습니다.

    1. 채워진 DataTable 객체를 가져옵니다.
    2. 형식을 다시 지정하려는 각 열에 대해 다음을 수행합니다.
      1. 형식 지정 도구의 모든 옵션을 지정하는 객체를 만듭니다. 이는 속성 및 값 집합이 있는 기본 자바스크립트 객체입니다. 지원되는 형식 지정 방법은 형식 지정 도구의 도움말을 참고하세요. (선택사항) 옵션을 지정하는 객체 리터럴 표기법 객체를 전달할 수도 있습니다.
      2. 형식 지정 도구를 만들고 옵션 객체를 전달합니다.
      3. formatter.format(table, colIndex)를 호출하여 형식을 다시 지정할 데이터의 DataTable과 0부터 시작하는 열 번호를 전달합니다. 각 열에 하나의 형식 지정 도구만 적용할 수 있으며 두 번째 형식 지정 도구를 적용하면 첫 번째 형식 지정 도구의 효과를 덮어쓰게 됩니다.
        중요: 많은 형식 지정 도구가 특별한 형식을 표시하기 위해 HTML 태그를 요구합니다. 시각화에서 allowHtml 옵션을 지원하는 경우 true로 설정해야 합니다.

    다음은 날짜 열의 날짜 값 형식을 변경하여 긴 날짜 형식('2009년 1월 1일')을 사용하는 예입니다. 

    var data = new google.visualization.DataTable();
data.addColumn('string', 'Employee Name');
data.addColumn('date', 'Start Date');
data.addRows(3);
data.setCell(0, 0, 'Mike');
data.setCell(0, 1, new Date(2008, 1, 28));
data.setCell(1, 0, 'Bob');
data.setCell(1, 1, new Date(2007, 5, 1));
data.setCell(2, 0, 'Alice');
data.setCell(2, 1, new Date(2006, 7, 16));

// Create a formatter.
// This example uses object literal notation to define the options.
var formatter = new google.visualization.DateFormat({formatType: 'long'});

// Reformat our data.
formatter.format(data, 1);

// Draw our data
var table = new google.visualization.Table(document.getElementById('dateformat_div'));
table.draw(data, {showRowNumber: true});

    대부분의 형식 지정 도구는 다음 두 가지 메서드를 노출합니다.

    메서드 설명
    google.visualization.formatter_name(options)

    생성자(formatter_name은 특정 formatterclass 이름임)

    • options - 형식 지정 도구의 옵션을 지정하는 일반 자바스크립트 객체입니다. 이 객체는 해당 형식 지정 도구에 특정한 속성과 함께 속성/값 쌍을 갖는 일반 객체입니다. 지원되는 형식 지정에 대한 자세한 내용은 특정 형식 지정 도구에 대한 문서를 참조하세요. 다음은 DateFormat 객체의 생성자를 호출하여 두 속성을 전달하는 두 가지 예입니다. 
    // Object literal technique
var formatter = new google.visualization.DateFormat({formatType: 'long', timeZone: -5});

// Equivalent property setting technique
var options = new Object();
options['formatType'] = 'long';
options['timeZone'] = -5;
var formatter = new google.visualization.DateFormat(options);
    format(data, colIndex)

    지정된 열의 데이터 형식을 다시 지정합니다.

    • data - 형식을 다시 지정할 데이터가 포함된 DataTable입니다. 여기에서 DataView를 사용할 수 없습니다.
    • colIndex - 형식을 지정할 열의 0부터 시작하는 색인입니다. 여러 열의 형식을 지정하려면 colIndex 값을 달리하여 이 메서드를 여러 번 호출해야 합니다.

     

    Google 시각화 API는 다음과 같은 형식 지정 도구를 제공합니다.

    형식 지정 도구 이름 설명
    화살표 형식 위쪽 또는 아래쪽 화살표를 추가하여 셀 값이 지정된 값보다 높은지 아니면 낮은지를 나타냅니다.
    막대 형식 셀 값이 지정된 값보다 크거나 작은지 여부를 나타내는 색상 막대를 추가합니다.
    색상 형식 값이 지정된 범위에 속하는지 여부에 따라 셀 색상을 지정합니다.
    날짜 형식 '2009년 1월 1일', '1/1/09', '2009년 1월 1일' 등 다양한 방식으로 날짜 또는 날짜/시간 값의 형식을 지정합니다.
    숫자 형식 숫자 값의 다양한 측면 형식을 지정합니다.
    패턴 형식 동일한 행의 셀 값을 임의의 텍스트와 함께 지정된 셀에 연결합니다.

    화살표 서식

    값이 지정된 밑 값보다 높은지 아니면 낮은지에 따라 숫자 셀에 위쪽 또는 아래쪽 화살표를 추가합니다. 기본값과 일치하면 화살표가 표시되지 않습니다.

    옵션

    ArrowFormat는 생성자에 전달되는 다음 옵션을 지원합니다.

    옵션 설명
    base

    밑값을 나타내는 숫자로, 셀 값과 비교하는 데 사용됩니다. 셀 값이 높은 경우 셀에 녹색 위쪽 화살표가 포함됩니다. 셀 값이 낮은 경우 빨간색 아래쪽 화살표가 포함됩니다. 동일한 경우 화살표가 없습니다.

    샘플 코드

    var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues Change');
data.addRows([
  ['Shoes', {v:12, f:'12.0%'}],
  ['Sports', {v:-7.3, f:'-7.3%'}],
  ['Toys', {v:0, f:'0%'}],
  ['Electronics', {v:-2.1, f:'-2.1%'}],
  ['Food', {v:22, f:'22.0%'}]
]);

var table = new google.visualization.Table(document.getElementById('arrowformat_div'));

var formatter = new google.visualization.ArrowFormat();
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true});

    막대 형식

    셀 값이 지정된 밑 값보다 높거나 낮은지 여부를 나타내는 숫자 막대에 색상 막대를 추가합니다.

    옵션

    BarFormat는 생성자에 전달되는 다음 옵션을 지원합니다.

    옵션

    예

    설명
    base 셀 값을 비교할 밑 값인 숫자입니다. 셀 값이 높으면 베이스의 오른쪽에 그려지며, 값이 낮으면 왼쪽으로 그려집니다. 기본값은 0입니다.
    colorNegative 막대의 음의 값 섹션을 나타내는 문자열입니다. 가능한 값은 'red', 'green', 'blue'이며 기본값은 'red'입니다.
    colorPositive 막대의 양수 값 섹션의 색상을 나타내는 문자열입니다. 가능한 값은 'red', 'green', 'blue'입니다. 기본값은 '파란색'입니다.
    drawZeroLine 음수 값이 있을 때 1픽셀의 어두운 기본 선을 그릴지를 나타내는 부울입니다. 막대를 시각적으로 스캔하기 위해 어두운 선이 표시됩니다. 기본값은 'false'입니다.
    max 막대 범위의 최댓값입니다. 기본값은 표에서 가장 높은 값입니다.
    min 막대 범위의 최소 숫자 값입니다. 기본값은 표에서 가장 낮은 값입니다.
    showValue true인 경우 값과 막대를 표시합니다. false인 경우 막대만 표시합니다. 기본값은 true입니다.
    width 각 막대의 두께(픽셀)입니다. 기본값은 100입니다.

    샘플 코드

    var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('barformat_div'));

var formatter = new google.visualization.BarFormat({width: 120});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

    색상 형식

    셀 값에 따라 숫자 셀의 전경 또는 배경에 색상을 할당합니다. 이 형식 지정 도구는 생성자에서 관련 옵션을 취하지 않는다는 점에서 이례적입니다. 대신 format()를 호출하기 전에 addRange() 또는 addGradientRange()를 원하는 만큼 호출하여 색상 범위를 추가해야 합니다. 색상은 허용되는 모든 HTML 형식(예: 'black', '#000000', '#000')으로 지정할 수 있습니다.

    방법

    ColorFormat는 다음 메서드를 지원합니다.

    메서드 설명
    google.visualization.ColorFormat() 생성자입니다. 인수를 사용하지 않습니다.
    addRange(from, to, color, bgcolor)

    셀 값에 따라 셀의 전경 색상 또는 배경 색상을 지정합니다. 지정된 from~to 범위에 속하는 값이 있는 모든 셀에는 color 및 bgcolor가 할당됩니다. 범위가 1~1,000이고 1,000이 아닌 2,000은 1,000을 포함하지 않으므로 범위가 포괄적이지 않음을 인지해야 합니다.

    • from - [문자열, 숫자, 날짜, 날짜 시간 또는 타임오데이] 범위의 하한(포함)이거나 null입니다. null인 경우 -∞과 일치합니다. 문자열 경계가 문자열 값과 알파벳순으로 비교됩니다.
    • to - [String, Number, Date, DateTime, TimeOfDay] 범위의 상한(비포괄적) 또는 null입니다. null인 경우 +∞와 일치합니다. 문자열 경계는 문자열 값과 알파벳 순으로 비교됩니다.
    • color: 일치하는 셀의 텍스트에 적용할 색상입니다. 값은 '#RRGGBB' 값 또는 정의된 색상 상수(예: '#FF0000' 또는 'red')일 수 있습니다.
    • bgcolor - 일치하는 셀의 배경에 적용할 색상 값은 '#RRGGBB' 값 또는 정의된 색상 상수(예: '#FF0000' 또는 'red')일 수 있습니다.
    addGradientRange(from, to, color, fromBgColor, toBgColor)

    셀 값에 따라 범위에서 배경 색상을 할당합니다. 색상은 하한 경계 색상에서 상한 색상에 이르는 범위 내의 셀 값과 일치하도록 조정됩니다. 이 메서드는 addRange()와 달리 문자열 값을 비교할 수 없습니다. 도움말: 색상 범위는 보통 시청자가 정확하게 측정하는 것이 어렵습니다. 가장 간단하고 읽기 쉬운 범위는 완전한 채도의 색상에서 흰색까지의 색상입니다 (예: #FF0000—FFFFFF)입니다.

    • from - [숫자, 날짜, 날짜 시간 또는 타임오데이] 범위의 하한(포함) 또는 null입니다. null인 경우 -∞과 일치합니다.
    • to - [숫자, 날짜, 날짜 시간 또는 타임오데이] 범위의 상한(비포괄적) 또는 null입니다. null인 경우 +∞와 일치합니다.
    • color: 일치하는 셀의 텍스트에 적용할 색상입니다. 이 색상은 값에 관계없이 모든 셀에서 동일합니다.
    • fromBgColor - 그라데이션의 가장 낮은 부분에 있는 값을 포함하는 셀의 배경색입니다. 값은 '#RRGGBB' 값 또는 정의된 색상 상수(예: '#FF0000' 또는 'red')일 수 있습니다.
    • toBgColor - 그라데이션의 높은 부분에 있는 값을 포함하는 셀의 배경색입니다. 값은 '#RRGGBB' 값 또는 정의된 색상 상수(예: '#FF0000' 또는 'red')일 수 있습니다.

     
    format(dataTable, columnIndex) 지정된 열에 서식을 적용하는 표준 format() 메서드입니다.

    샘플 코드

    var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('colorformat_div'));

var formatter = new google.visualization.ColorFormat();
formatter.addRange(-20000, 0, 'white', 'orange');
formatter.addRange(20000, null, 'red', '#33ff33');
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

    날짜 형식

    '2016년 1월 1일', '1/1/16', '2016년 1월 1일' 등 다양한 방식으로 자바스크립트 Date 값의 형식을 지정합니다.

    옵션

    DateFormat는 생성자에 전달되는 다음 옵션을 지원합니다.

    옵션 설명
    formatType

    날짜의 빠른 서식 옵션. 다음과 같은 문자열 값이 지원됩니다. 2016년 2월 28일의 형식을 다음과 같이 다시 지정합니다.

    • 'short' - 짧은 형식: 예: '2016년 2월 28일'
    • 'medium' - 매체 형식: 예: '2016년 2월 28일'
    • 'long' - 긴 형식: 예: '2016년 2월 28일'

    formatType와 pattern을 모두 지정할 수는 없습니다.
    pattern

    ICU 날짜 및 시간 형식과 마찬가지로 값에 적용할 커스텀 형식 패턴입니다. 예를 들면 var formatter3 = new google.visualization.DateFormat({pattern: "EEE, MMM d, ''yy"});입니다.

    formatType와 pattern을 모두 지정할 수는 없습니다. 패턴에 관한 자세한 내용은 다음 섹션을 참조하세요.

    timeZone 날짜 값을 표시할 시간대입니다. GMT + 이 시간대 수 (음수일 수 있음)를 나타내는 숫자 값입니다. 날짜 객체는 기본적으로 객체가 생성되는 컴퓨터의 가정된 시간대를 사용하여 생성됩니다. 이 옵션은 다른 시간대에서 이 값을 표시하는 데 사용됩니다. 예를 들어 영국 그리니치에 있는 컴퓨터에서 정오 오후 5시의 날짜 객체를 만들고 timeZone을 -5(미국에서는 options['timeZone'] = -5 또는 미국 태평양 표준시)로 지정했다면 값은 정오 12가 됩니다.

    방법

    DateFormat는 다음 메서드를 지원합니다.

    메서드 설명
    google.visualization.DateFormat(options)

    생성자입니다. 자세한 내용은 위 옵션 섹션을 참고하세요.
    format(dataTable, columnIndex) 지정된 열에 형식을 적용하는 표준 format() 메서드입니다.
    formatValue(value)

    지정된 값의 서식 있는 값을 반환합니다. 이 메서드에는 DataTable가 필요하지 않습니다.

    샘플 코드

    function drawDateFormatTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date (Long)');
  data.addColumn('date', 'Start Date (Medium)');
  data.addColumn('date', 'Start Date (Short)');
  data.addRows([
    ['Mike', new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26),
             new Date(2008, 1, 28, 0, 31, 26)],
    ['Bob', new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0),
            new Date(2007, 5, 1, 0)],
    ['Alice', new Date(2006, 7, 16),
              new Date(2006, 7, 16),
              new Date(2006, 7, 16)]
  ]);

  // Create three formatters in three styles.
  var formatter_long = new google.visualization.DateFormat({formatType: 'long'});
  var formatter_medium = new google.visualization.DateFormat({formatType: 'medium'});
  var formatter_short = new google.visualization.DateFormat({formatType: 'short'});

  // Reformat our data.
  formatter_long.format(data, 1);
  formatter_medium.format(data,2);
  formatter_short.format(data, 3);

  // Draw our data
  var table = new google.visualization.Table(document.getElementById('dateformat_div'));
  table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}

    날짜 패턴 자세히 알아보기

    지원되는 패턴에 대한 자세한 내용은 다음과 같습니다.

    패턴은 ICU 날짜 및 시간 형식과 비슷하지만 A D F g Y u w W와 같은 패턴은 아직 지원되지 않습니다. 패턴과의 충돌을 방지하려면 출력에 표시하려는 리터럴 텍스트는 작은따옴표로 묶어야 합니다.단, 큰따옴표는 작은따옴표로 묶어야 합니다. "K 'o''clock.'"

    패턴 설명 출력 예시
    GG 시대를 대표하는 인물. 'AD'
    yy 또는 yyyy 합니다. 1996
    M

    1년 기준 월 1월:

    • M은 1을 생성
    • MM: 01
    • 마케팅 믹스 모델링이 1월
    • MMMM이 1월 출시

    '7월'

    '07'
    d 일 불필요한 'd' 값은 앞에 0을 추가합니다. 10
    h 12시간 기준 시. 추가 'h' 값은 앞에 0을 추가합니다. 12
    H 24시간 기준 시. 추가 Hk 값은 앞에 0을 추가합니다. 0
    m 1시간 기준의 분. 추가 'M' 값은 앞에 0을 추가합니다. 30
    s 1분 기준의 초 추가 's' 값은 선행 0을 추가합니다. 55
    S 분 단위 추가 'S' 값은 오른쪽에 0으로 패딩됩니다. 978
    E

    요일입니다. '화요일'의 출력은 다음과 같습니다.

    • E가 T를 생산함
    • EE 또는 EEE 생산 TU 또는 Tus
    • EEEE 화요일 생성

    '화요일'

    '화요일'
    aa 오전/오후 'PM'
    k 시간 (1~24) 추가 'k' 값은 앞에 0을 추가합니다. 24
    K 오전/오후 시간 (0~11)으로 표시됩니다. 추가 'k' 값은 앞에 0을 추가합니다. 0
    z

    시간대 시간대 5의 경우 'UTC+5'를 생성합니다.

    		 'UTC+5'
    Z

    RFC 822 형식의 시간대입니다. 시간대 -5:

    Z, ZZ, ZZZ, 생산 -0500

    ZZZZ 등 'GMT -05:00' 생성

    '-0800'

    'GMT -05:00'
    v

    시간대 (일반)

    		 '기타/GMT-5'
    ' 텍스트에서 이스케이프 '날짜='
    '' 작은따옴표 이

    숫자 형식

    숫자 열의 형식을 지정하는 방법을 설명합니다. 형식 지정 옵션에는 달러 기호와 같은 접두사 기호나 천 단위 마커로 사용할 구두점을 지정하는 작업이 있습니다.

    옵션

    NumberFormat는 생성자에 전달되는 다음 옵션을 지원합니다.

    옵션 설명
    decimalSymbol

    십진수 마커로 사용할 문자입니다. 기본값은 점 (.)입니다.
    fractionDigits

    10진수 다음에 표시할 자릿수를 지정하는 숫자입니다. 기본값은 2입니다. 숫자에 포함된 수보다 더 많은 자릿수를 지정하면 더 작은 값이 0으로 표시됩니다. 잘린 값은 반올림됩니다 (5자리 반올림).

    groupingSymbol 소수점 왼쪽의 숫자를 세 세트로 그룹화하는 데 사용할 문자입니다. 기본값은 쉼표 (,)입니다.
    negativeColor 음수 값의 텍스트 색상입니다. 기본값이 없습니다. 값은 '빨간색' 또는 '#FF0000'과 같이 허용되는 HTML 색상 값이 될 수 있습니다.
    negativeParens 부울. 여기서 true는 음수 값을 괄호로 묶어야 함을 나타냅니다. 기본값은 true입니다.
    pattern

    형식 문자열입니다. 이 플래그를 지정하면 negativeColor을 제외한 다른 모든 옵션이 무시됩니다.

    형식 문자열은 ICU 패턴 세트의 하위 집합입니다. 예를 들어 {pattern:'#,###%'}은 값 10, 7.5, 0.5의 출력 값 '1,000%', '750%', '50%'를 생성합니다.

    prefix 값의 문자열 프리픽스입니다(예: '$').
    suffix 값의 문자열 접미사입니다(예: '%').

    방법

    NumberFormat는 다음 메서드를 지원합니다.

    메서드 설명
    google.visualization.NumberFormat(options)

    생성자입니다. 자세한 내용은 위 옵션 섹션을 참고하세요.
    format(dataTable, columnIndex) 지정된 열에 서식을 적용하는 표준 format() 메서드입니다.
    formatValue(value)

    지정된 값의 서식 있는 값을 반환합니다. 이 메서드에는 DataTable가 필요하지 않습니다.

    샘플 코드

    var data = new google.visualization.DataTable();
data.addColumn('string', 'Department');
data.addColumn('number', 'Revenues');
data.addRows([
  ['Shoes', 10700],
  ['Sports', -15400],
  ['Toys', 12500],
  ['Electronics', -2100],
  ['Food', 22600],
  ['Art', 1100]
]);

var table = new google.visualization.Table(document.getElementById('numberformat_div'));

var formatter = new google.visualization.NumberFormat(
    {prefix: '$', negativeColor: 'red', negativeParens: true});
formatter.format(data, 1); // Apply formatter to second column

table.draw(data, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

    패턴 형식

    지정된 열의 값을 임의의 텍스트와 함께 단일 열로 병합할 수 있습니다. 예를 들어 성 열과 성 열이 있으면 세 번째 열을 {성}({이름})으로 채울 수 있습니다. 이 형식 지정 도구는 생성자 및 format() 메서드의 규칙을 따르지 않습니다. 자세한 내용은 아래의 메서드 섹션을 참조하세요.

    방법

    PatternFormat는 다음 메서드를 지원합니다.

    메서드 설명
    google.visualization.PatternFormat(pattern)

    생성자입니다. 옵션 객체를 사용하지 않습니다. 대신 문자열 pattern 매개변수를 사용합니다. 임의의 열과 함께 대상 열에 입력할 열 값을 설명하는 문자열입니다. 문자열에 자리표시자를 삽입하여 삽입할 다른 열의 값을 나타냅니다. 자리표시자는 {#}이며, 여기서 # 는 사용할 소스 열의 색인입니다. 색인은 아래 format() 메서드의 srcColumnIndices 배열에 있는 색인입니다. 리터럴 { 또는 } 문자를 포함하려면 \{ 또는 \}와 같이 이스케이프 처리합니다. 리터럴 \ 마크를 포함하려면 \\로 이스케이프합니다.

    샘플 코드

    다음 예는 format() 메서드에서 가져온 첫 번째와 두 번째 요소를 사용하여 앵커 요소를 만드는 패턴의 생성자를 보여줍니다. 

    var formatter = new google.visualization.PatternFormat(
  '<a href="mailto:{1}">{0}</a>');
    format(dataTable, srcColumnIndices, opt_dstColumnIndex)

    표준 형식 지정 호출, 몇 가지 추가 매개변수:

    • dataTable - 작업할 DataTable입니다.
    • srcColumnIndices - 기본 DataTable에서 소스로 가져올 하나 이상의 열 기반 색인입니다 (0부터 시작). 이는 생성자에서 pattern 매개변수의 데이터 소스로 사용됩니다. 열 번호는 정렬된 순서가 아니어도 됩니다.
    • opt_dstColumnIndex - [선택사항] 패턴 조작 결과를 배치할 대상 열입니다. 지정하지 않으면 srcColumIndices의 첫 번째 요소가 대상으로 사용됩니다.

    표 다음에 나오는 서식 예를 참고하세요.

    다음은 4열 테이블의 몇 가지 입력 및 출력 예시입니다.

    Row before formatting (4 columns, last is blank):
John  |  Paul  |  Jones  |  [empty]

var formatter = new google.visualization.PatternFormat("{0} {1} {2}");
formatter.format(data, [0,1,2], 3);
Output:
  John  |  Paul  |  Jones  |  John Paul Jones

var formatter = new google.visualization.PatternFormat("{1}, {0}");
formatter.format(data, [0,2], 3);
Output:
  John  |  Paul  |  Jones  |  Jones, John

    샘플 코드

    다음 예시에서는 두 열의 데이터를 결합하여 이메일 주소를 만드는 방법을 보여줍니다. DataView 객체를 사용하여 원본 소스 열을 숨깁니다. 

    var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('string', 'Email');
data.addRows([
  ['John Lennon', 'john@beatles.co.uk'],
  ['Paul McCartney', 'paul@beatles.co.uk'],
  ['George Harrison', 'george@beatles.co.uk'],
  ['Ringo Starr', 'ringo@beatles.co.uk']
]);

var table = new google.visualization.Table(document.getElementById('patternformat_div'));

var formatter = new google.visualization.PatternFormat(
    '<a href="mailto:{1}">{0}</a>');
// Apply formatter and set the formatted value of the first column.
formatter.format(data, [0, 1]);

var view = new google.visualization.DataView(data);
view.setColumns([0]); // Create a view with the first column only.

table.draw(view, {allowHtml: true, showRowNumber: true, width: '100%', height: '100%'});

    가젯 도우미

    Google Visualization API를 사용하는 가젯의 작성을 단순화하는 도우미 클래스입니다.

    생성자

    google.visualization.GadgetHelper()

    방법

    메서드 반환 값 설명
    createQueryFromPrefs(prefs) google.visualization.쿼리 정적. 가젯 환경설정의 값에 따라 google.visualization.Query의 새 인스턴스를 만들고 속성을 설정합니다. 매개변수 prefs의 유형은 _IG_Prefs입니다.
    1. 환경설정 _table_query_url은 쿼리 데이터 소스 URL을 설정하는 데 사용됩니다.
    2. 환경설정 _table_query_refresh_interval는 쿼리 새로고침 간격 (초)을 설정하는 데 사용됩니다.
    validateResponse(response) 불리언 정적. response 매개변수는 google.visualization.QueryResponse 유형입니다. 응답에 데이터가 포함되어 있으면 true를 반환합니다. 쿼리 실행이 실패하고 응답에 데이터가 포함되지 않으면 false를 반환합니다. 오류가 발생하면 이 메서드는 오류 메시지를 표시합니다.

    쿼리 클래스

    다음 객체는 데이터 쿼리를 Google Sheets와 같은 외부 데이터 소스로 보내는 데 사용할 수 있습니다.

    • 쿼리 - 발신 데이터 요청을 래핑합니다.
    • QueryResponse - 데이터 소스의 응답을 처리합니다.

    쿼리

    데이터 소스로 전송되는 쿼리를 나타냅니다.

    생성자

    google.visualization.Query(dataSourceUrl, opt_options)

    매개변수

    데이터 소스 URL
    [필수, 문자열] 쿼리를 전송할 URL입니다. Google 스프레드시트 차트 및 스프레드시트 문서를 참고하세요.
    opt_options
    [선택사항, 객체] 요청 옵션의 맵입니다. 참고: 제한된 데이터 소스에 액세스하는 경우에는 이 매개변수를 사용해서는 안 됩니다. 지원되는 속성은 다음과 같습니다.
    • sendMethod - [선택사항, 문자열] 쿼리를 보내는 데 사용할 메서드를 지정합니다. 다음 문자열 값 중 하나를 선택합니다.
      • 'xhr' - XmlHttpRequest를 사용하여 쿼리를 보냅니다.
      • 'scriptInjection' - 스크립트 삽입을 사용하여 쿼리를 전송합니다.
      • 'makeRequest' - [지원 중단된 가젯에만 사용 가능] Gadget API makeRequest() 메서드를 사용하여 쿼리를 보냅니다. 지정된 경우 makeRequestParams도 지정해야 합니다.
      • 'auto' - 데이터 소스 URL에서 tqrt URL 매개변수로 지정된 메서드를 사용합니다. tqrt에는 'xhr', 'scriptInjection', 'makeRequest' 값이 포함될 수 있습니다. tqrt가 누락되었거나 잘못된 값이 있는 경우 동일 도메인 요청의 기본값은 'xhr'이고, 교차 도메인 요청의 경우 'scriptInjection'입니다.
    • makeRequestParams - [객체] makeRequest() 쿼리의 매개변수 맵입니다. sendMethod가 'makeRequest'인 경우에만 사용 및 필요합니다.

    방법

    메서드 반환 값 설명
    abort() 없음 setRefreshInterval()로 시작된 자동 쿼리 전송을 중지합니다.
    setRefreshInterval(seconds) 없음

    send에 대한 첫 번째 명시적 호출부터 지정된 기간(초 단위)마다 send 메서드를 자동으로 호출하도록 쿼리를 설정합니다. seconds는 0보다 크거나 같은 숫자입니다.

    이 메서드를 사용하는 경우 send 메서드를 호출하기 전에 호출해야 합니다.

    0으로 다시 호출하거나 (기본값) abort()를 호출하여 이 메서드를 취소합니다.

    setTimeout(seconds) 없음 시간 초과 오류가 발생하기 전에 데이터 소스가 응답할 때까지 대기하는 시간(초)을 설정합니다. seconds는 0보다 큰 숫자입니다.
    기본 제한 시간은 30초입니다. 이 메서드를 사용하는 경우 send 메서드를 호출하기 전에 호출해야 합니다.
    setQuery(string) 없음 쿼리 문자열을 설정합니다. string 매개변수의 값은 유효한 쿼리여야 합니다.
    이 메서드를 사용하는 경우 send 메서드를 호출하기 전에 호출해야 합니다. 쿼리 언어 자세히 알아보기
    send(callback) 없음 쿼리를 데이터 소스로 보냅니다. callback는 데이터 소스가 응답할 때 호출되는 함수여야 합니다. 콜백 함수는 google.visualization.QueryResponse 유형의 단일 매개변수를 수신합니다.

    쿼리 응답

    데이터 소스에서 수신된 쿼리 실행 응답을 나타냅니다. 이 클래스의 인스턴스는 Query.send가 호출되었을 때 설정된 콜백 함수에 인수로 전달됩니다.

    방법

    메서드 반환 값 설명
    getDataTable() 데이터 표 데이터 소스에서 반환된 데이터 표를 반환합니다. 쿼리 실행이 실패하고 데이터가 반환되지 않으면 null를 반환합니다.
    getDetailedMessage() 문자열 실패한 쿼리에 대한 자세한 오류 메시지를 반환합니다. 쿼리 실행에 성공하면 이 메서드가 빈 문자열을 반환합니다. 반환되는 메시지는 개발자를 위한 메시지로서 기술 정보가 포함될 수 있습니다(예: '{salary} 열이 존재하지 않음').
    getMessage() 문자열 실패한 쿼리에 대한 짧은 오류 메시지를 반환합니다. 쿼리 실행에 성공하면 이 메서드가 빈 문자열을 반환합니다. 반환되는 메시지는 최종 사용자를 위한 짧은 메시지(예: '잘못된 쿼리' 또는 '액세스 거부')입니다.
    getReasons() 문자열 배열 0개 이상의 항목 배열을 반환합니다. 각 항목은 쿼리를 실행하는 동안 발생한 오류 또는 경고 코드가 포함된 짧은 문자열입니다. 가능한 코드는 다음과 같습니다.
    • access_denied 사용자에게 데이터 소스에 대한 액세스 권한이 없습니다.
    • invalid_query 지정된 쿼리에 구문 오류가 있습니다.
    • data_truncated 출력 크기 제한으로 인해 쿼리 선택과 일치하는 하나 이상의 데이터 행이 반환되지 않았습니다. (경고)
    • timeout 쿼리가 예상한 시간 내에 응답하지 않았습니다.
    hasWarning() 불리언 쿼리 실행에 경고 메시지가 있으면 true를 반환합니다.
    isError() 불리언 쿼리 실행이 실패했으며 응답에 데이터 테이블이 포함되어 있지 않으면 true를 반환합니다. 쿼리 실행이 성공하고 응답에 데이터 테이블이 포함된 경우 <false>를 반환합니다.

    오류 표시

    API는 사용자에게 맞춤 오류 메시지를 표시하는 데 도움이 되는 여러 함수를 제공합니다. 이러한 함수를 사용하려면 페이지에 컨테이너 요소 (일반적으로 <div>)를 제공하여 API에서 형식이 지정된 오류 메시지를 그립니다. 이 컨테이너는 시각화 컨테이너 요소일 수도 있고 오류 전용 컨테이너일 수도 있습니다. 시각화 포함 요소를 지정하면 시각화 위에 오류 메시지가 표시됩니다. 그런 다음 아래의 적절한 함수를 호출하여 오류 메시지를 표시하거나 삭제합니다.

    모든 함수는 google.visualization.errors 네임스페이스의 정적 함수입니다.

    많은 시각화 과정에서 오류 이벤트가 발생할 수 있습니다. 아래의 오류 이벤트를 참고하여 자세히 알아보세요.

    쿼리 래퍼 예에서 커스텀 오류의 예를 확인할 수 있습니다.

    함수 반환 값 설명
    addError(container, message, opt_detailedMessage, opt_options) 생성된 오류 객체를 식별하는 문자열 ID 값입니다. 페이지의 고유한 값이며 오류를 삭제하거나 포함된 요소를 찾는 데 사용할 수 있습니다.

    지정된 텍스트 요소에 특정 형식 및 형식으로 오류 표시 블록을 추가합니다.

    • container - 오류 메시지를 삽입할 DOM 요소입니다. 컨테이너를 찾을 수 없는 경우 함수에서 자바스크립트 오류가 발생합니다.
    • message - 표시할 문자열 메시지입니다.
    • opt_detailedMessage - 선택적 세부 메시지 문자열입니다. 기본적으로 마우스 오버 텍스트이지만 아래 설명된 opt_options.showInToolTip 속성에서 변경할 수 있습니다.
    • opt_options - 메시지에 다양한 표시 옵션을 설정하는 속성이 있는 선택적 객체. 다음과 같은 옵션이 지원됩니다.
      • showInTooltip - true인 경우 세부 메시지가 도움말 텍스트로만 표시됩니다. false이면 짧은 메시지 뒤에 컨테이너 본문에 자세한 메시지가 표시됩니다. 기본값은 true입니다.
      • type - 오류 유형을 설명하는 문자열로, 메시지에 적용해야 하는 CSS 스타일을 결정합니다. 지원되는 값은 'error' 및 'warning'입니다. 기본값은 'error'입니다.
      • style - 오류 메시지의 스타일 문자열입니다. 이 스타일은 경고 유형 (opt_options.type)에 적용된 모든 스타일을 재정의합니다. 예: 'background-color: #33ff99; padding: 2px;'기본값은 빈 문자열입니다.
      • removable - 불리언 값입니다. true인 경우 사용자가 마우스 클릭으로 메시지를 닫을 수 있습니다. 기본값은 false입니다.
    addErrorFromQueryResponse(container, response)

    생성된 오류 객체를 식별하는 문자열 ID 값입니다. 응답이 오류를 나타내지 않으면 null입니다. 페이지의 고유한 값이며 오류를 삭제하거나 포함된 요소를 찾는 데 사용할 수 있습니다.

    쿼리 응답 및 오류 메시지 컨테이너를 이 메서드에 전달합니다. 쿼리 응답이 쿼리 오류를 나타내면 지정된 페이지 요소에 오류 메시지를 표시합니다. 쿼리 응답이 null이면 메서드에서 자바스크립트 오류가 발생합니다. 쿼리 핸들러에서 수신한 QueryResponse를 이 메시지에 전달하여 오류를 표시합니다. 또한 유형에 적합한 디스플레이 스타일을 설정합니다 (addError(opt_options.type)와 유사한 오류 또는 경고).

    • container - 오류 메시지를 삽입할 DOM 요소입니다. 컨테이너를 찾을 수 없는 경우 함수에서 자바스크립트 오류가 발생합니다.
    • response - 쿼리에 대한 응답으로 쿼리 핸들러가 수신한 QueryResponse 객체 null이면 메서드에서 자바스크립트 오류가 발생합니다.
    removeError(id) 부울: 오류가 제거된 경우 true, 그렇지 않은 경우 false입니다.

    페이지에서 ID로 지정된 오류를 삭제합니다.

    • id - addError() 또는 addErrorFromQueryResponse()를 사용하여 생성된 오류의 문자열 ID.
    removeAll(container) 없음

    지정된 컨테이너에서 모든 오류 블록을 삭제합니다. 지정된 컨테이너가 없으면 오류가 발생합니다.

    • container - 삭제할 오류 문자열이 포함된 DOM 요소입니다. 컨테이너를 찾을 수 없는 경우 함수에서 자바스크립트 오류가 발생합니다.
    getContainer(errorId) 지정된 오류가 있는 DOM 요소를 처리합니다. 찾을 수 없는 경우 null을 처리합니다.

    errorID로 지정된 오류가 있는 컨테이너 요소에 대한 핸들을 검색합니다.

    • errorId - addError() 또는 addErrorFromQueryResponse()를 사용하여 생성된 오류의 문자열 ID.

    이벤트

    대부분의 시각화는 이벤트를 실행하여 무언가가 발생했음을 나타냅니다. 차트의 사용자는 이러한 이벤트를 수신 대기하는 것이 좋습니다. 자체 시각화를 코딩하는 경우 이러한 이벤트를 직접 트리거할 수도 있습니다.

    다음 메서드를 통해 개발자는 시각화를 통해 이벤트를 수신 대기하거나 기존 이벤트 핸들러를 삭제하거나 이벤트를 트리거할 수 있습니다.

    addListener()

    이 메서드를 호출하여 페이지에서 호스팅되는 시각화에서 실행된 이벤트를 수신하도록 등록합니다. 어떤 이벤트 인수가 처리 함수에 전달될지 문서화해야 합니다. 

    google.visualization.events.addListener(source_visualization,
  event_name, handling_function)
    소스_시각화
    소스 시각화 인스턴스의 핸들입니다.
    event_name
    수신할 이벤트의 문자열 이름입니다. 시각화에서는 발생한 이벤트를 문서화해야 합니다.
    handling_function
    source_visualization이 event_name 이벤트를 실행할 때 호출할 로컬 자바스크립트 함수의 이름입니다. 처리 함수에는 이벤트 인수가 매개변수로 전달됩니다.

    반환

    새 리스너의 리스너 핸들러입니다. 필요에 따라 나중에 google.visualization.events.removeListener()를 호출하여 이 리스너를 삭제하는 데 핸들러를 사용할 수 있습니다.

    예

    다음은 선택 이벤트를 수신하도록 등록하는 예입니다.

    var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);

google.visualization.events.addListener(table, 'select', selectHandler);

function selectHandler() {
  alert('A table row was selected');
}

    addOneTimeListener()

    이는 addListener()과 동일하지만 한 번만 수신 대기해야 하는 이벤트에 사용됩니다. 이후 이벤트가 발생하면 처리 함수가 호출되지 않습니다.

    이것이 유용한 경우의 예: 모든 그리기에서 ready 이벤트가 발생합니다. 첫 번째 ready만 코드를 실행하려면 addListener가 아닌 addOneTimeListener가 필요합니다.

    removeListener()

    이 메서드를 호출하여 기존 이벤트 리스너를 등록 취소합니다.

    google.visualization.events.removeListener(listener_handler)
    listener_handler
    삭제할 리스너 핸들러로, google.visualization.events.addListener()에 의해 반환됩니다.

    removeAllListeners()

    특정 시각화 인스턴스의 모든 이벤트 리스너를 등록 취소하려면 이 메서드를 호출합니다.

    google.visualization.events.removeAllListeners(source_visualization)
    소스_시각화
    모든 이벤트 리스너를 삭제해야 하는 소스 시각화 인스턴스의 핸들입니다.

    trigger()

    시각화 구현자가 호출합니다. 시각화에서 이 메서드를 호출하여 임의의 이름과 값 집합을 사용하여 이벤트를 실행합니다. 

    google.visualization.events.trigger(source_visualization, event_name,
  event_args)
    소스_시각화
    소스 시각화 인스턴스의 핸들입니다. 전송 시각화에서 정의한 메서드 내에서 이 함수를 호출하는 경우 this 키워드를 전달하기만 하면 됩니다.
    event_name
    이벤트를 호출할 문자열 이름입니다. 원하는 문자열 값을 선택할 수 있습니다.
    이벤트_인수
    [선택사항] 수신 메서드에 전달할 이름/값 쌍의 맵입니다. 예:{message: "안녕하세요!", Score: 10, name: "Fred"}. 필요한 이벤트가 없는 경우 null을 전달할 수 있습니다. 수신자는 이 매개변수에 null을 허용할 준비가 되어 있어야 합니다.

    예

    다음은 onclick 메서드가 호출될 때 'select'라는 메서드를 발생시키는 시각화의 예입니다. 어떤 값도 전달하지 않습니다. 

    MyVisualization.prototype.onclick = function(rowIndex) {
  this.highlightRow(this.selectedRow, false); // Clear previous selection
  this.highlightRow(rowIndex, true); // Highlight new selection

  // Save the selected row index in case getSelection is called.
  this.selectedRow = rowIndex;

  // Trigger a select event.
  google.visualization.events.trigger(this, 'select', null);
}

    표준 시각화 메서드 및 속성

    모든 시각화는 다음과 같은 필수 및 선택적 메서드와 속성을 표시해야 합니다. 하지만 이러한 표준을 시행하기 위한 유형 검사가 없으므로 각 시각화에 관한 문서를 읽어야 합니다.

    참고: 이러한 메서드는 google.visualization 네임스페이스가 아니라 시각화의 네임스페이스에 있습니다.

    생성자

    생성자에는 시각화 클래스의 이름이 있어야 하며 해당 클래스의 인스턴스를 반환해야 합니다. 

    visualization_class_name(dom_element)
    요소_
    시각화를 삽입해야 하는 DOM 요소를 가리키는 포인터입니다.

    예

    var org = new google.visualization.OrgChart(document.getElementById('org_div'));

    그리기()

    페이지에 시각화를 그립니다. 내부적으로 서버에서 그래픽을 가져오거나 연결된 시각화 코드를 사용하여 페이지에서 그래픽을 만들 수 있습니다. 데이터 또는 옵션이 변경될 때마다 이 메서드를 호출해야 합니다. 객체는 생성자에 전달된 DOM 요소 내에 그려져야 합니다. 

    draw(data[, options])
    데이터
    차트를 그리는 데 사용할 데이터를 보유한 DataTable 또는 DataView입니다. 차트에서 DataTable를 추출하는 표준 메서드는 없습니다.
    options
    [선택사항] 맞춤 옵션의 이름/값 쌍의 맵입니다. 예를 들어 높이 및 너비, 배경 색상, 자막 등이 있습니다. 시각화 문서에서는 사용 가능한 옵션을 나열해야 하며, 이 매개변수를 지정하지 않는 경우 기본 옵션을 지원해야 합니다. 자바스크립트 객체 리터럴 구문을 사용하여 옵션 맵을 전달할 수 있습니다. 예: {x:100, y:200, title:'An Example'}

    예

    chart.draw(myData, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});

    getAction()

    이는 도움말을 포함하고 도움말 작업을 허용하는 시각화에 의해 선택적으로 노출됩니다.

    요청된 actionID가 있는 도움말 작업 객체를 반환합니다.

    예:

    // Returns the action object with the ID 'alertAction'.
chart.getAction('alertAction');

    getSelection()

    필요에 따라 그래픽에서 현재 선택된 데이터에 액세스할 수 있는 시각화를 통해 노출됩니다. 

    selection_array getSelection()

    반환

    selection_array: 선택한 객체의 배열. 각 객체는 시각화를 만드는 데 사용되는 기본 테이블의 데이터 요소 (DataView 또는 DataTable)를 설명합니다. 각 객체에는 기본 DataTable에서 선택된 항목의 행 또는 열 색인과 함께 row 또는 column 속성이 있습니다. row 속성이 null이면 선택 항목이 열입니다. column 속성이 null이면 선택 항목이 행입니다. 둘 다 null이 아니면 특정 데이터 항목입니다. DataTable.getValue() 메서드를 호출하여 선택한 항목의 값을 가져올 수 있습니다. 검색된 배열은 setSelection()에 전달할 수 있습니다.

    예

    function myClickHandler(){
  var selection = myVis.getSelection();
  var message = '';

  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {
      message += '{row:' + item.row + ',column:' + item.column + '}';
    } else if (item.row != null) {
      message += '{row:' + item.row + '}';
    } else if (item.column != null) {
      message += '{column:' + item.column + '}';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message);
}

    removeAction()

    이는 도움말을 포함하고 도움말 작업을 허용하는 시각화에 의해 선택적으로 노출됩니다.

    요청된 actionID가 있는 도움말 작업 객체를 차트에서 삭제합니다.

    예:

    // Removes an action from chart with the ID of 'alertAction'.
chart.removeAction('alertAction');

    setAction()

    이는 도움말을 포함하고 도움말 작업을 허용하는 시각화에 의해 선택적으로 노출됩니다. 핵심 차트 (막대, 열, 선, 영역, 분산형, 콤보, 풍선, 원형, 도넛, 원통, 히스토그램, 계단식 영역)에서만 작동합니다.

    사용자가 작업 텍스트를 클릭할 때 실행할 도움말 작업을 설정합니다. 

    setAction(action object)

    setAction 메서드는 객체를 작업 매개변수로 사용합니다. 이 객체는 설정 중인 작업의 ID인 id, 작업의 도움말에 표시되어야 하는 텍스트, action, 사용자가 작업 텍스트를 클릭할 때 실행해야 하는 함수 등 3가지 속성을 지정해야 합니다.

    모든 팁 작업은 차트의 draw() 메서드를 호출하기 전에 설정해야 합니다.

    예:

    // Sets a tooltip action which will pop an alert box on the screen when triggered.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  }
});

    setAction 메서드는 두 가지 추가 속성(visible 및 enabled)도 정의할 수 있습니다. 이러한 속성은 도움말 값을 표시하거나 사용 설정할지 여부를 나타내는 boolean 값을 반환하는 함수여야 합니다.

    예:

    // The visible/enabled functions can contain any logic to determine their state
// as long as they return boolean values.
chart.setAction({
  id: 'alertAction',
  text: 'Trigger Alert',
  action: function() {
    alert('You have triggered an alert');
  },
  visible: function() {
    return true;
  },
  enabled: function() {
    return true;
  }
});

    setSelection()

    원하는 경우 시각화에서 데이터 항목을 선택합니다(예: 영역 차트의 한 지점 또는 막대 그래프의 막대). 이 메서드가 호출되면 시각화는 새 선택이 무엇인지 시각적으로 나타내야 합니다. setSelection()의 구현은 'select' 이벤트를 실행해서는 안 됩니다. 시각화에서 선택 항목의 일부를 무시할 수도 있습니다. 예를 들어 선택한 행만 표시할 수 있는 표는 setSelection() 구현에서 셀 또는 열 요소를 무시하거나 전체 행을 선택할 수 있습니다.

    이 메서드가 호출될 때마다 선택된 모든 항목이 선택 해제되며, 전달된 새 선택 목록이 적용되어야 합니다. 개별 항목을 선택 해제하는 명확한 방법은 없습니다. 개별 항목을 선택 해제하려면 항목을 선택된 상태로 setSelection()를 호출하고 모든 요소를 선택 해제하려면 setSelection(), setSelection(null) 또는 setSelection([])를 호출합니다. 

    setSelection(selection_array)
    선택_배열
    객체의 배열로, 각각 숫자 행 또는 열 속성이 있습니다. row과 column은 선택할 데이터 테이블에서 0부터 시작하는 행 또는 열 번호입니다. 전체 열을 선택하려면 row를 null로 설정합니다. 전체 행을 선택하려면 column를 null로 설정합니다. 예: setSelection([{row:0,column:1},{row:1, column:null}])은 (0,1)에 있는 셀과 전체 행 1을 선택합니다.

    여러 가지 정적 메서드

    이 섹션에는 google.visualization 네임스페이스에 노출된 여러 유용한 메서드가 포함되어 있습니다.

    arrayToDataTable()

    이 메서드는 2차원 배열을 가져와 DataTable로 변환합니다.

    열 데이터 유형은 제공된 데이터에 따라 자동으로 결정됩니다. 배열의 첫 번째 행 (열 헤더 행)에 있는 객체 리터럴 표기법 (예: {label: 'Start Date', type: 'date'})을 사용하여 열 데이터 유형을 지정할 수도 있습니다. 선택적 데이터 역할도 사용할 수 있지만 객체 리터럴 표기법을 사용하여 명시적으로 정의해야 합니다. 모든 셀에 객체 리터럴 표기법을 사용하여 셀 객체를 정의할 수도 있음).

    문법

    google.visualization.arrayToDataTable(twoDArray, opt_firstRowIsData)
    2D배열
    각 행이 데이터 테이블의 행을 나타내는 2차원 배열. opt_firstRowIsData가 false (기본값)인 경우 첫 번째 행은 헤더 라벨로 해석됩니다. 각 열의 데이터 유형은 지정된 데이터에서 자동으로 해석됩니다. 셀에 값이 없으면 null 또는 빈 값을 적절하게 지정합니다.
    opt_firstRowIsData
    첫 번째 행이 헤더 행을 정의하는지 여부를 나타냅니다. true인 경우 모든 행이 데이터로 간주됩니다. false인 경우 첫 번째 행은 헤더 행인 것으로 가정되며, 값은 열 라벨로 지정됩니다. 기본값은 false입니다.

    반환

    새 DataTable

    예

    다음 코드는 동일한 DataTable 객체를 만드는 세 가지 방법을 보여줍니다.

    // Version 1: arrayToDataTable method
var data2 = google.visualization.arrayToDataTable([
  [{label: 'Country', type: 'string'},
   {label: 'Population', type: 'number'},
   {label: 'Area', type: 'number'},
   {type: 'string', role: 'annotation'}],
  ['CN', 1324, 9640821, 'Annotated'],
  ['IN', 1133, 3287263, 'Annotated'],
  ['US', 304, 9629091, 'Annotated'],
  ['ID', 232, 1904569, 'Annotated'],
  ['BR', 187, 8514877, 'Annotated']
]);

// Version 2: DataTable.addRows
var data3 = new google.visualization.DataTable();
data3.addColumn('string','Country');
data3.addColumn('number','Population');
data3.addColumn('number','Area');
data3.addRows([
  ['CN', 1324, 9640821],
  ['IN', 1133, 3287263],
  ['US', 304, 9629091],
  ['ID', 232, 1904569],
  ['BR', 187, 8514877]
]);

// Version 3: DataTable.setValue
var data = new google.visualization.DataTable();
data.addColumn('string','Country');
data.addColumn('number', 'Population');
data.addColumn('number', 'Area');
data.addRows(5);
data.setValue(0, 0, 'CN');
data.setValue(0, 1, 1324);
data.setValue(0, 2, 9640821);
data.setValue(1, 0, 'IN');
data.setValue(1, 1, 1133);
data.setValue(1, 2, 3287263);
data.setValue(2, 0, 'US');
data.setValue(2, 1, 304);
data.setValue(2, 2, 9629091);
data.setValue(3, 0, 'ID');
data.setValue(3, 1, 232);
data.setValue(3, 2, 1904569);
data.setValue(4, 0, 'BR');
data.setValue(4, 1, 187);
data.setValue(4, 2, 8514877);

    drawChart()

    이 메서드는 단일 호출로 차트를 만듭니다. 이 방법의 장점은 코드가 약간 더 적으며 재사용을 위해 시각화를 텍스트 문자열로 직렬화하고 저장할 수 있다는 것입니다. 이 메서드는 생성된 차트에 핸들을 반환하지 않으므로 차트 이벤트를 포착하도록 메서드 리스너를 할당할 수 없습니다.

    문법

    google.visualization.drawChart(chart_JSON_or_object)
    chart_JSON_or_object
    JSON 리터럴 문자열 또는 자바스크립트 객체이며 다음 속성을 포함합니다 (대소문자 구분).
    속성 유형 필수 기본 설명
    차트 유형 문자열 필수 없음 시각화의 클래스 이름입니다. Google 차트에서는 google.visualization 패키지 이름을 생략할 수 있습니다. 적절한 시각화 라이브러리가 아직 로드되지 않은 경우 이 메서드는 Google 시각화인 경우 라이브러리를 로드합니다. 타사 시각화를 명시적으로 로드해야 합니다. 예: Table, PieChart, example.com.CrazyChart
    containerId 문자열 필수 없음 시각화를 호스팅할 페이지의 DOM 요소 ID입니다.
    옵션 객체 선택사항 없음 시각화 옵션을 설명하는 객체입니다. 자바스크립트 리터럴 표기법을 사용하거나 객체에 핸들을 제공할 수 있습니다. 예: "options": {"width": 400, "height": 240, "is3D": true, "title": "Company Performance"}
    데이터 테이블 객체 선택사항 없음 시각화를 채우는 데 사용되는 DataTable입니다. 위에서 설명한 DataTable의 리터럴 JSON 문자열 표현, 채워진 google.visualization.DataTable 객체의 핸들 또는 arrayToDataTable(opt_firstRowIsData=false) 에서 허용하는 2차원 배열일 수 있습니다. 이 속성 또는 dataSourceUrl 속성을 지정해야 합니다.
    데이터 소스 URL 문자열 선택사항 없음 차트 데이터를 채우는 데이터 소스 쿼리입니다 (예: Google 스프레드시트). 이 속성 또는 dataTable 속성을 지정해야 합니다.
    쿼리 문자열 선택사항 없음 dataSourceUrl를 지정하는 경우 시각화 쿼리 언어를 사용하여 데이터를 필터링하거나 조작할 수 있도록 SQL과 유사한 쿼리 문자열을 선택적으로 지정할 수 있습니다.
    새로고침 간격 숫자 선택사항 없음 시각화가 쿼리 소스를 새로고침하는 빈도(초)입니다. dataSourceUrl를 지정하는 경우에만 사용하세요.
    뷰 객체 OR 배열 선택사항 없음 dataTable 또는 dataSourceUrl 매개변수에 의해 정의된 대로 기본 데이터에 대한 필터 역할을 하는 DataView 이니셜라이저 객체를 설정합니다. dataview.toJSON()에서 반환하는 것과 같이 문자열이나 DataView 이니셜라이저 객체를 전달할 수 있습니다. 예: "view": {"columns": [1, 2]} DataView 이니셜라이저 객체의 배열을 전달할 수도 있습니다. 이 경우 배열의 첫 번째 DataView는 기본 데이터에 적용되어 새 데이터 테이블을 만들고, 두 번째 DataView는 첫 번째 DataView의 적용으로 생성된 데이터 테이블에 적용됩니다.

    예

    스프레드시트 데이터 소스를 기반으로 테이블 차트를 만들고 SELECT A,D WHERE D > 100 ORDER BY D 쿼리를 포함합니다. 

    <script type="text/javascript">
  google.charts.load('current');  // Note: No need to specify chart packages.
  function drawVisualization() {
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
      "query":"SELECT A,D WHERE D > 100 ORDER BY D",
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true
      }
   });
 }
google.charts.setOnLoadCallback(drawVisualization);
</script>

    다음 예에서는 동일한 테이블을 만들되 로컬에서 DataTable을 만듭니다.

    <script type='text/javascript'>
  google.charts.load('current');
  function drawVisualization() {
    var dataTable = [
      ["Country", "Population Density"],
      ["Indonesia", 117],
      ["China", 137],
      ["Nigeria", 142],
      ["Pakistan", 198],
      ["India", 336],
      ["Japan", 339],
      ["Bangladesh", 1045]
    ];
    google.visualization.drawChart({
      "containerId": "visualization_div",
      "dataTable": dataTable,
      "refreshInterval": 5,
      "chartType": "Table",
      "options": {
        "alternatingRowStyle": true,
        "showRowNumber" : true,
      }
    });
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

    이 예에서는 파일에서 로드했을 수 있는 차트의 JSON 문자열 표현을 전달합니다. 

    <script type="text/javascript">
  google.charts.load('current');
  var myStoredString = '{"containerId": "visualization_div",' +
    '"dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",' +
    '"query":"SELECT A,D WHERE D > 100 ORDER BY D",' +
    '"refreshInterval": 5,' +
    '"chartType": "Table",' +
    '"options": {' +
    '   "alternatingRowStyle": true,' +
    '   "showRowNumber" : true' +
    '}' +
  '}';
  function drawVisualization() {
    google.visualization.drawChart(myStoredString);
  }
  google.charts.setOnLoadCallback(drawVisualization);
</script>

    drawToolbar()

    다양한 시각화에 연결할 수 있는 툴바 요소의 생성자입니다. 이 툴바를 사용하면 사용자가 시각화 데이터를 다른 형식으로 내보내거나 여러 위치에서 사용할 수 있는 삽입 가능한 시각화 버전을 제공할 수 있습니다. 자세한 내용과 코드 예는 툴바 페이지를 참고하세요.