이 페이지에는 Google 시각화 API에 의해 노출된 객체와 모든 시각화에 의해 노출된 표준 메서드가 나와 있습니다.
참고: Google Visualization API 네임스페이스는 google.visualization.*
입니다.
배열 관련 참고사항
일부 브라우저는 자바스크립트 배열에서 후행 쉼표를 제대로 처리하지 않으므로 사용하지 마세요. 배열 중간의 빈 값은 괜찮습니다. 다음은 그 예시입니다.
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
를 만들려면 매개변수 없이 생성자를 호출한 다음 아래 나열된 addColumn()
/addRows()
메서드를 호출하여 값을 추가하거나 채워진 자바스크립트 리터럴 객체를 전달하여 초기화하면 됩니다. 두 방법 모두 아래에 설명되어 있습니다. 어느 것을 사용해야 할까요?
-
addColumn()
,addRow()
,addRows()
를 호출하여 자바스크립트에서 테이블을 만들고 채우는 것은 매우 읽기 쉬운 코드입니다. 이 메서드는 코드를 직접 입력할 때 유용합니다. 다음에 설명된 객체 리터럴 표기법을 사용하는 것보다 느리지만 더 작은 테이블(예: 셀 1,000개)에서는 차이가 크지 않을 것입니다. -
큰 테이블에서 객체 리터럴 표기법을 사용하여
DataTable
객체를 직접 선언하는 것이 훨씬 더 빠릅니다. 하지만 올바른 구문을 선택하는 것은 까다로울 수 있습니다. 코드에서 객체 리터럴 구문을 생성할 수 있으면 이 기능을 사용하여 오류 발생 가능성을 줄일 수 있습니다.
방법
메서드 | 반환 값 | 설명 |
---|---|---|
또는
|
숫자 |
데이터 표에 새 열을 추가하고 새 열의 색인을 반환합니다. 새 열의 모든 셀에 첫 번째 서명에는 다음과 같은 매개변수가 있습니다.
두 번째 서명에는 다음 객체와 함께 단일 객체 매개변수가 있습니다.
참고 항목: getColumnId, getColumnLabel, getColumnType, insertColumn, getColumnRole |
addRow(opt_cellArray) |
숫자 |
데이터 표에 새 행을 추가하고 새 행의 색인을 반환합니다.
예: 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) |
숫자 |
데이터 표에 새 행을 추가하고 마지막으로 추가된 행의 색인을 반환합니다. 이 메서드를 호출하여 새로운 빈 행을 만들거나 아래에 설명된 대로 행을 채우는 데 사용되는 데이터를 사용할 수 있습니다.
예: 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) |
문자열 |
지정된 열의 값 형식을 지정하는 데 사용되는 서식 패턴을 반환합니다.
쿼리로 검색하는 데이터 테이블의 경우, 열 패턴은 데이터 소스나 쿼리 언어의 |
getColumnProperties(columnIndex)
|
객체 |
지정된 열의 모든 속성 맵을 반환합니다. 속성 객체는 참조로 반환되므로 가져온 객체의 값을 변경하면
|
getColumnProperty(columnIndex, name)
|
Auto |
이름이 지정된 속성의 값, 또는 지정된 열에 그러한 속성이 설정되지 않은 경우
|
getColumnRange(columnIndex) |
객체 |
지정된 열에 있는 값의 최솟값과 최댓값을 반환합니다. 반환된 객체에는
|
getColumnRole(columnIndex) |
문자열 | 지정된 열의 역할을 반환합니다. |
getColumnType(columnIndex) |
문자열 |
열 색인에 지정된 특정 열의 유형을 반환합니다.
반환된 열 유형은 |
getDistinctValues(columnIndex) |
객체의 배열 |
특정 열의 고유한 값을 오름차순으로 반환합니다.
반환된 객체의 유형은 |
getFilteredRows(filters) |
객체의 배열 |
지정된 모든 필터와 일치하는 행의 행 색인을 반환합니다. 색인은 오름차순으로 반환됩니다. 이 메서드의 출력은
또 다른 선택 속성인
예: |
getFormattedValue(rowIndex, columnIndex)
|
문자열 |
지정된 행 및 열 색인에 있는 셀의 서식 있는 값을 반환합니다.
열 값의 형식 지정에 대한 자세한 내용은 쿼리 언어 참조를 확인하세요. 참고 항목: setFormattedValue |
getNumberOfColumns() |
숫자 | 테이블의 열 수를 반환합니다. |
getNumberOfRows() |
숫자 | 테이블의 행 수를 반환합니다. |
getProperties(rowIndex, columnIndex)
|
객체 |
지정된 셀의 모든 속성에 대한 지도를 반환합니다. 속성 객체는 참조로 반환되므로 가져온 객체의 값을 변경하면
|
getProperty(rowIndex, columnIndex, name)
|
Auto |
이름이 지정된 속성의 값, 또는 지정된 셀에 이러한 속성이 설정되지 않은 경우
참고 항목: setCell setProperties setProperty |
getRowProperties(rowIndex)
|
객체 |
지정된 행의 모든 속성에 대한 지도를 반환합니다. 속성 객체는 참조로 반환되므로 가져온 객체의 값을 변경하면
|
getRowProperty(rowIndex, name)
|
Auto |
이름이 지정된 속성의 값, 또는 지정된 행에 이러한 속성이 설정되지 않은 경우
참고 항목: setRowProperty setRowProperties |
getSortedRows(sortColumns) |
숫자 배열 |
기본 데이터의 순서를 수정하지 않고 정렬된 버전의 테이블을 반환합니다.
기본 데이터를 영구적으로 정렬하려면
반환된 값은 숫자 배열이며 각 숫자는
정렬은 안정적입니다. 즉, 두 행의 동일한 값을 정렬하면 동일한 정렬에서 매번 동일한 순서로 행을 반환합니다. 예: 세 번째 열을 기준으로 정렬된 행에서 반복하려면 다음을 사용합니다. 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 |
이름이 지정된 속성의 값 또는 테이블에 이러한 속성이 설정되지 않은 경우
|
getValue(rowIndex, columnIndex) |
객체 |
지정된 행 및 열 색인에 있는 셀의 값을 반환합니다.
반환된 값의 유형은 열 유형에 따라 다릅니다 (getColumnType 참조).
|
insertColumn(columnIndex, type [,label [,id]])
|
없음 |
데이터 색인에서 새 열을 데이터 색인에 삽입합니다. 지정된 색인 이후의 모든 기존 열은 더 높은 색인으로 이동합니다.
참고 항목: addColumn |
insertRows(rowIndex, numberOrArray) |
없음 |
지정된 행 색인에 지정된 수의 행을 삽입합니다.
참고 항목: addRows |
removeColumn(columnIndex) |
없음 |
지정된 색인에서 열을 삭제합니다.
참고 항목: removeColumn |
removeColumns(columnIndex, numberOfColumns)
|
없음 |
지정된 색인의 열에서 시작하여 지정된 수의 열을 삭제합니다.
참고 항목: removeColumn |
removeRow(rowIndex) |
없음 |
지정된 색인의 행을 삭제합니다.
참고 항목: removeRows |
removeRows(rowIndex, numberOfRows) |
없음 |
지정된 색인의 행에서 시작되는 지정된 행 수를 삭제합니다.
참고 항목: removeRow |
setCell(rowIndex, columnIndex [, value [, formattedValue [, properties]]])
|
없음 |
셀의 값, 서식 있는 값 및 속성을 설정합니다.
참고 항목: setValue(), setFormattedValue(), setProperty(), setProperties(). |
setColumnLabel(columnIndex, label)
|
없음 |
열의 라벨을 설정합니다.
참고 항목: getColumnLabel |
setColumnProperty(columnIndex, name, value)
|
없음 |
단일 열 속성을 설정합니다. 일부 시각화는 행, 열 또는 셀 속성을 지원하여 표시 또는 동작을 수정할 수 있습니다. 지원되는 속성은 시각화 문서를 참고하세요.
|
setColumnProperties(columnIndex, properties)
|
없음 |
여러 열 속성을 설정합니다. 일부 시각화는 행, 열 또는 셀 속성을 지원하여 표시 또는 동작을 수정할 수 있습니다. 지원되는 속성은 시각화 문서를 참고하세요.
|
setFormattedValue(rowIndex, columnIndex, formattedValue)
|
없음 |
셀의 서식이 지정된 값을 설정합니다.
참고 항목: getFormattedValue |
setProperty(rowIndex, columnIndex, name, value)
|
없음 |
셀 속성을 설정합니다. 일부 시각화는 행, 열 또는 셀 속성을 지원하여 표시 또는 동작을 수정할 수 있습니다. 지원되는 속성은 시각화 문서를 참고하세요.
참고 항목: setCell setProperties getProperty |
setProperties(rowIndex, columnIndex, properties)
|
없음 |
여러 셀 속성을 설정합니다. 일부 시각화는 행, 열 또는 셀 속성을 지원하여 표시 또는 동작을 수정할 수 있습니다. 지원되는 속성은 시각화 문서를 참고하세요.
참고 항목: setCell setProperty getProperty |
setRowProperty(rowIndex, name, value)
|
없음 |
행 속성을 설정합니다. 일부 시각화는 행, 열 또는 셀 속성을 지원하여 표시 또는 동작을 수정할 수 있습니다. 지원되는 속성은 시각화 문서를 참고하세요.
참고 항목: setRowProperties getRowProperty |
setRowProperties(rowIndex, properties)
|
없음 |
여러 행 속성을 설정합니다. 일부 시각화는 행, 열 또는 셀 속성을 지원하여 표시 또는 동작을 수정합니다. 지원되는 속성은 시각화 문서를 참고하세요.
참고 항목: setRowProperty getRowProperty |
setTableProperty(name, value)
|
없음 |
단일 테이블 속성을 설정합니다. 일부 시각화는 표, 행, 열 또는 셀 속성을 지원하여 표시 또는 동작을 수정합니다. 지원되는 속성은 시각화 문서를 참고하세요.
|
setTableProperties(properties) |
없음 |
여러 표 속성을 설정합니다. 일부 시각화는 표, 행, 열 또는 셀 속성을 지원하여 표시 또는 동작을 수정합니다. 지원되는 속성은 시각화 문서를 참고하세요.
참고 항목: setTableProperty getTableProperty |
setValue(rowIndex, columnIndex, value) |
없음 |
셀 값을 설정합니다. 이 메서드는 기존 셀 값을 덮어쓰는 것 외에도 셀의 서식 있는 값과 속성을 모두 지웁니다.
참고 항목: 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]
-
'boolean' - 자바스크립트 부울 값('true' 또는 'false'). 예시 값:
-
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
속성에는 행 객체의 배열이 포함됩니다.
각 행 객체에는 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)
|
숫자 |
이 뷰의 색인에서 지정된 특정 열의 기본 테이블 (또는 뷰)에 있는 색인을 반환합니다.
예: |
getTableRowIndex(viewRowIndex) |
숫자 |
이 뷰의 색인에서 지정된 특정 행의 기본 테이블 (또는 뷰)의 색인을 반환합니다.
예: |
getViewColumnIndex(tableColumnIndex)
|
숫자 |
이 뷰에서 기본 테이블 (또는 뷰)의 색인에 지정된 특정 열에 매핑되는 색인을 반환합니다. 이러한 색인이 두 개 이상 있으면 첫 번째 (가장 작은) 색인을 반환합니다. 이러한 색인이 없으면 (지정된 열이 뷰에 없음) -1을 반환합니다.
예: |
getViewColumns() |
숫자 배열 |
이 뷰의 열을 순서대로 반환합니다. 즉, 일부 배열로 |
getViewRowIndex(tableRowIndex) |
숫자 |
이 뷰에서 기본 테이블 (또는 뷰)의 색인에 지정된 행에 매핑되는 색인을 반환합니다. 이러한 색인이 두 개 이상 있으면 첫 번째 (가장 작은) 색인을 반환합니다. 이러한 색인이 없으면 (지정된 행이 뷰에 없음) -1을 반환합니다.
예: |
getViewRows() |
숫자 배열 |
이 뷰의 행을 순서대로 반환합니다. 즉, 일부 배열을 사용하여 |
hideColumns(columnIndexes) |
없음 |
현재 보기에서 지정된 열을 숨깁니다.
예: 10개의 열이 있는 테이블이 있고 |
hideRows(min, max) |
없음 |
현재 보기에서 최솟값과 최댓값 사이의 색인이 있는 모든 행을 숨깁니다.
위 |
hideRows(rowIndexes) |
없음 |
현재 행에서 지정된 행을 숨깁니다.
예: 행이 10개 있는 테이블이 있고 |
setColumns(columnIndexes) |
없음 |
이 뷰에 표시할 열을 지정합니다. 지정되지 않은 열은 숨겨집니다. 기본 테이블/뷰 또는 계산된 열의 열 색인 배열입니다. 이 메서드를 호출하지 않으면 기본적으로 모든 열이 표시됩니다. 배열에 중복된 항목이 포함되어 동일한 열을 여러 번 표시할 수도 있습니다. 열은 지정된 순서대로 표시됩니다.
예: // 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) |
없음 |
기본 테이블/뷰의 색인 번호를 기준으로 이 뷰에 표시되는 행을 설정합니다.
예: 기본 테이블/뷰의 행 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) |
없음 |
차트를 그립니다. 차트 또는 데이터를 변경한 후 이 메서드를 호출하여 변경사항을 표시해야 합니다.
|
toJSON() |
문자열 | 차트의 JSON 표현 문자열 버전을 반환합니다. |
clone() |
차트 래퍼 | 차트 래퍼의 딥 카피를 반환합니다. |
getDataSourceUrl() |
문자열 | 이 차트가 데이터 소스에서 데이터를 가져오면 이 데이터 소스의 URL이 반환됩니다. 그렇지 않으면 null을 반환합니다. |
getDataTable() |
google.visualization.DataTable |
이 차트가 로컬에서 정의된
반환된 객체를 변경하면 다음번 |
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) |
모든 유형 |
지정된 차트 옵션 값을 반환합니다.
|
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를 사용하는 방법은 다음과 같습니다.
-
charteditor
패키지를 로드합니다.google.charts.load()
에서 'charteditor' 패키지를 로드합니다. 편집기에서 렌더링하는 차트 유형의 패키지를 로드할 필요가 없습니다. 차트 편집기는 필요에 따라 모든 패키지를 로드합니다. -
사용자가 맞춤설정할 수 있는 차트를 정의하는
ChartWrapper
객체를 만듭니다. 이 차트가 대화상자에 표시되며, 사용자가 편집기를 사용하여 차트를 재설계하고, 차트 유형을 변경하거나, 소스 데이터를 변경합니다. -
새 ChartEditor 인스턴스를 만들고 등록하여 'ok' 이벤트를 수신 대기합니다. 이 이벤트는 사용자가 대화상자의 'OK' 버튼을 클릭하면 발생합니다. 이 플래그를 수신하면
ChartEditor.getChartWrapper()
를 호출하여 사용자가 수정한 차트를 검색해야 합니다. -
ChartEditor.openDialog()
를 호출하여ChartWrapper
을 전달합니다. 대화상자가 열립니다. 대화상자 버튼을 사용하면 사용자가 편집기를 닫을 수 있습니다.ChartEditor
인스턴스는 범위 내에 있으면 사용할 수 있으며 사용자가 대화상자를 닫은 후에는 자동으로 폐기되지 않습니다. - 코드에서 차트를 업데이트하려면
setChartWrapper()
를 호출합니다.
방법
메서드 | 반환 값 | 설명 |
---|---|---|
openDialog(chartWrapper, opt_options) |
null |
페이지에 삽입된 대화상자로 차트 편집기를 엽니다. 함수는 즉시 반환되며 대화상자가 닫힐 때까지 기다리지 않습니다. 인스턴스 범위를 잃지 않으면 ChartWrapper 객체를 다시 전달해야 하지만
|
getChartWrapper() |
ChartWrapper |
사용자 수정사항이 적용된 차트를 나타내는 ChartWrapper 를 반환합니다. |
setChartWrapper(chartWrapper) |
null |
이 메서드를 사용하여 편집기에서 렌더링된 차트를 업데이트합니다.
chartWrapper - 렌더링할 새 차트를 나타내는 |
closeDialog() |
null | 차트 편집기 대화상자를 닫습니다. |
옵션
차트 편집기는 다음 옵션을 지원합니다.
이름 | 유형 | 기본 | 설명 |
---|---|---|---|
dataSourceInput |
요소 핸들 또는 'URLbox' | null |
사용자가 차트의 데이터 소스를 지정할 수 있게 하는 데 사용합니다. 이 속성은 다음 두 값 중 하나일 수 있습니다.
|
이벤트
차트 편집기에서 다음과 같은 이벤트가 발생합니다.
이름 | 설명 | 속성 |
---|---|---|
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 시각화 형식 지정 도구가 모든 사용자 정의 형식 지정 도구보다 우선합니다.
- 채워진
DataTable
객체를 가져옵니다. - 형식을 다시 지정하려는 각 열에 대해 다음을 수행합니다.
- 형식 지정 도구의 모든 옵션을 지정하는 객체를 만듭니다. 이는 속성 및 값 집합이 있는 기본 자바스크립트 객체입니다. 지원되는 형식 지정 방법은 형식 지정 도구의 도움말을 참고하세요. (선택사항) 옵션을 지정하는 객체 리터럴 표기법 객체를 전달할 수도 있습니다.
- 형식 지정 도구를 만들고 옵션 객체를 전달합니다.
-
formatter
.format(table, colIndex)
를 호출하여 형식을 다시 지정할 데이터의DataTable
과 0부터 시작하는 열 번호를 전달합니다. 각 열에 하나의 형식 지정 도구만 적용할 수 있으며 두 번째 형식 지정 도구를 적용하면 첫 번째 형식 지정 도구의 효과를 덮어쓰게 됩니다.
중요: 많은 형식 지정 도구가 특별한 형식을 표시하기 위해 HTML 태그를 요구합니다. 시각화에서allowHtml
옵션을 지원하는 경우 true로 설정해야 합니다.
데이터에 적용되는 실제 형식은 API가 로드된 언어에서 파생됩니다. 자세한 내용은 특정 언어로 차트 로드하기를 참고하세요.
중요: 형식 지정 도구는 DataTable
에서만 사용할 수 있으며 DataView
와 함께 사용할 수 없습니다 (DataView
객체는 읽기 전용임).
형식 지정 도구를 사용하는 일반적인 단계는 다음과 같습니다.
다음은 날짜 열의 날짜 값 형식을 변경하여 긴 날짜 형식('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 이름임)
// 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) |
지정된 열의 데이터 형식을 다시 지정합니다.
|
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을 포함하지 않으므로 범위가 포괄적이지 않음을 인지해야 합니다.
|
addGradientRange(from, to, color, fromBgColor,
toBgColor)
|
셀 값에 따라 범위에서 배경 색상을 할당합니다. 색상은 하한 경계 색상에서 상한 색상에 이르는 범위 내의 셀 값과 일치하도록 조정됩니다. 이 메서드는
|
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일의 형식을 다음과 같이 다시 지정합니다.
|
pattern |
ICU 날짜 및 시간 형식과 마찬가지로 값에 적용할 커스텀 형식 패턴입니다.
예를 들면
|
timeZone |
날짜 값을 표시할 시간대입니다. GMT + 이 시간대 수 (음수일 수 있음)를 나타내는 숫자 값입니다. 날짜 객체는 기본적으로 객체가 생성되는 컴퓨터의 가정된 시간대를 사용하여 생성됩니다. 이 옵션은 다른 시간대에서 이 값을 표시하는 데 사용됩니다. 예를 들어 영국 그리니치에 있는 컴퓨터에서 정오 오후 5시의 날짜 객체를 만들고 timeZone을 -5(미국에서는 options['timeZone'] = -5 또는 미국 태평양 표준시)로 지정했다면 값은 정오 12가 됩니다.
|
방법
DateFormat
는 다음 메서드를 지원합니다.
메서드 | 설명 |
---|---|
google.visualization.DateFormat(options) |
생성자입니다. 자세한 내용은 위 옵션 섹션을 참고하세요. |
format(dataTable, columnIndex) |
지정된 열에 형식을 적용하는 표준 format() 메서드입니다. |
formatValue(value) |
지정된 값의 서식 있는 값을 반환합니다.
이 메서드에는 |
샘플 코드
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월:
|
'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 |
요일입니다. '화요일'의 출력은 다음과 같습니다.
|
'화요일' '화요일' |
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 |
형식 문자열입니다. 이 플래그를 지정하면
형식 문자열은 ICU 패턴 세트의 하위 집합입니다.
예를 들어 |
prefix |
값의 문자열 프리픽스입니다(예: '$'). |
suffix |
값의 문자열 접미사입니다(예: '%'). |
방법
NumberFormat
는 다음 메서드를 지원합니다.
메서드 | 설명 |
---|---|
google.visualization.NumberFormat(options) |
생성자입니다. 자세한 내용은 위 옵션 섹션을 참고하세요. |
format(dataTable, columnIndex) |
지정된 열에 서식을 적용하는 표준 format() 메서드입니다. |
formatValue(value) |
지정된 값의 서식 있는 값을 반환합니다. 이 메서드에는 |
샘플 코드
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 매개변수를 사용합니다. 임의의 열과 함께 대상 열에 입력할 열 값을 설명하는 문자열입니다. 문자열에 자리표시자를 삽입하여 삽입할 다른 열의 값을 나타냅니다. 자리표시자는
샘플 코드다음 예는 var formatter = new google.visualization.PatternFormat( '<a href="mailto:{1}">{0}</a>'); |
format(dataTable, srcColumnIndices,
opt_dstColumnIndex)
|
표준 형식 지정 호출, 몇 가지 추가 매개변수:
표 다음에 나오는 서식 예를 참고하세요. |
다음은 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입니다.
|
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'인 경우에만 사용 및 필요합니다.
-
sendMethod - [선택사항, 문자열] 쿼리를 보내는 데 사용할 메서드를 지정합니다. 다음 문자열 값 중 하나를 선택합니다.
방법
메서드 | 반환 값 | 설명 |
---|---|---|
abort() |
없음 |
setRefreshInterval() 로 시작된 자동 쿼리 전송을 중지합니다.
|
setRefreshInterval(seconds)
|
없음 |
이 메서드를 사용하는 경우
0으로 다시 호출하거나 (기본값) |
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개 이상의 항목 배열을 반환합니다. 각 항목은 쿼리를 실행하는 동안 발생한 오류 또는 경고 코드가 포함된 짧은 문자열입니다. 가능한 코드는 다음과 같습니다.
|
hasWarning() |
불리언 | 쿼리 실행에 경고 메시지가 있으면 true 를 반환합니다. |
isError() |
불리언 |
쿼리 실행이 실패했으며 응답에 데이터 테이블이 포함되어 있지 않으면 true 를 반환합니다. 쿼리 실행이 성공하고 응답에 데이터 테이블이 포함된 경우 <false>를 반환합니다.
|
오류 표시
API는 사용자에게 맞춤 오류 메시지를 표시하는 데 도움이 되는 여러 함수를 제공합니다. 이러한 함수를 사용하려면 페이지에 컨테이너 요소 (일반적으로 <div>
)를 제공하여 API에서 형식이 지정된 오류 메시지를 그립니다. 이 컨테이너는 시각화 컨테이너 요소일 수도 있고 오류 전용 컨테이너일 수도 있습니다. 시각화 포함 요소를 지정하면 시각화 위에 오류 메시지가 표시됩니다.
그런 다음 아래의 적절한 함수를 호출하여 오류 메시지를 표시하거나 삭제합니다.
모든 함수는 google.visualization.errors
네임스페이스의 정적 함수입니다.
많은 시각화 과정에서 오류 이벤트가 발생할 수 있습니다. 아래의 오류 이벤트를 참고하여 자세히 알아보세요.
쿼리 래퍼 예에서 커스텀 오류의 예를 확인할 수 있습니다.
함수 | 반환 값 | 설명 |
---|---|---|
addError(container, message, opt_detailedMessage,
opt_options)
|
생성된 오류 객체를 식별하는 문자열 ID 값입니다. 페이지의 고유한 값이며 오류를 삭제하거나 포함된 요소를 찾는 데 사용할 수 있습니다. |
지정된 텍스트 요소에 특정 형식 및 형식으로 오류 표시 블록을 추가합니다.
|
addErrorFromQueryResponse(container, response) |
생성된 오류 객체를 식별하는 문자열 ID 값입니다. 응답이 오류를 나타내지 않으면 null입니다. 페이지의 고유한 값이며 오류를 삭제하거나 포함된 요소를 찾는 데 사용할 수 있습니다. |
쿼리 응답 및 오류 메시지 컨테이너를 이 메서드에 전달합니다. 쿼리 응답이 쿼리 오류를 나타내면 지정된 페이지 요소에 오류 메시지를 표시합니다. 쿼리 응답이 null이면 메서드에서 자바스크립트 오류가 발생합니다. 쿼리 핸들러에서 수신한 QueryResponse를 이 메시지에 전달하여 오류를 표시합니다. 또한 유형에 적합한 디스플레이 스타일을 설정합니다 (
|
removeError(id) |
부울: 오류가 제거된 경우 true, 그렇지 않은 경우 false입니다. |
페이지에서 ID로 지정된 오류를 삭제합니다.
|
removeAll(container) |
없음 |
지정된 컨테이너에서 모든 오류 블록을 삭제합니다. 지정된 컨테이너가 없으면 오류가 발생합니다.
|
getContainer(errorId) |
지정된 오류가 있는 DOM 요소를 처리합니다. 찾을 수 없는 경우 null을 처리합니다. |
errorID로 지정된 오류가 있는 컨테이너 요소에 대한 핸들을 검색합니다.
|
이벤트
대부분의 시각화는 이벤트를 실행하여 무언가가 발생했음을 나타냅니다. 차트의 사용자는 이러한 이벤트를 수신 대기하는 것이 좋습니다. 자체 시각화를 코딩하는 경우 이러한 이벤트를 직접 트리거할 수도 있습니다.
다음 메서드를 통해 개발자는 시각화를 통해 이벤트를 수신 대기하거나 기존 이벤트 핸들러를 삭제하거나 이벤트를 트리거할 수 있습니다.
- google.visualization.events.addListener() 및 google.visualization.events.addOneTimeListener()는 이벤트를 리슨합니다.
- google.visualization.events.removeListener()는 기존 리스너를 삭제합니다.
- google.visualization.events.removeAllListeners()는 특정 차트의 모든 리스너를 삭제합니다.
- google.visualization.events.trigger()는 이벤트를 실행합니다.
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); }
표준 시각화 메서드 및 속성
모든 시각화는 다음과 같은 필수 및 선택적 메서드와 속성을 표시해야 합니다. 하지만 이러한 표준을 시행하기 위한 유형 검사가 없으므로 각 시각화에 관한 문서를 읽어야 합니다.
- 생성자
- 그리기()
- getAction()[선택사항]
- getSelection()[선택사항]
- removeAction()[선택사항]
- setAction()[선택사항]
- setSelection()[선택사항]
참고: 이러한 메서드는 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()
다양한 시각화에 연결할 수 있는 툴바 요소의 생성자입니다. 이 툴바를 사용하면 사용자가 시각화 데이터를 다른 형식으로 내보내거나 여러 위치에서 사용할 수 있는 삽입 가능한 시각화 버전을 제공할 수 있습니다. 자세한 내용과 코드 예는 툴바 페이지를 참고하세요.