개요
정렬 및 페이징할 수 있는 테이블. 표 셀은 형식 문자열을 사용하거나 HTML을 셀 값으로 직접 삽입하여 서식을 지정할 수 있습니다. 숫자 값은 오른쪽 정렬됩니다. 불리언 값은 체크 표시로 표시됩니다. 사용자는 키보드 또는 마우스로 단일 행을 선택할 수 있습니다. 사용자는 열 머리글을 클릭하여 행을 정렬할 수 있습니다. 헤더 행은 사용자가 스크롤할 때 고정된 상태로 유지됩니다. 테이블은 사용자 상호작용에 해당하는 여러 이벤트를 실행합니다.
예
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, true],
['Jim', {v:8000, f: '$8,000'}, false],
['Alice', {v: 12500, f: '$12,500'}, true],
['Bob', {v: 7000, f: '$7,000'}, true]
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
}
</script>
</head>
<body>
<div id="table_div"></div>
</body>
</html>
로드
google.charts.load 패키지 이름은 "table"입니다.
google.charts.load('current', {packages: ['table']});
시각화의 클래스 이름은 google.visualization.Table입니다.
var visualization = new google.visualization.Table(container);
데이터 형식
DataTable은 해당 HTML 테이블로 변환되며, DataTable의 각 행/열은 HTML 테이블의 행/열로 변환됩니다. 각 열의 데이터 유형은 동일해야 하며 모든 표준 시각화 데이터 유형 (문자열, 불리언, 숫자 등)이 지원됩니다.
맞춤 속성
DataTable의 setProperty() 메서드를 사용하여 데이터 표 요소에 다음과 같은 맞춤 속성을 할당할 수 있습니다.
| 속성 이름 | 적용 대상 | 설명 |
|---|---|---|
| className | Cell | 개별 셀에 할당할 문자열 클래스 이름입니다. 개별 셀에 CSS 스타일을 지정할 때 사용합니다. |
| 스타일 | Cell | 셀에 인라인으로 할당할 스타일 문자열입니다. 이렇게 하면 해당 셀에 적용된 CSS 클래스 스타일이 재정의됩니다. 이 기능이 작동하려면 allowHTML=true 속성을 설정해야 합니다. 예: 'border: 1px solid green;' |
예
dataTable.setCell(22, 2, 15, 'Fifteen', {style: 'font-style:bold; font-size:22px;'});
구성 옵션
| 이름 | |
|---|---|
| allowHtml |
true로 설정하면, HTML 태그를 포함하는 셀의 서식이 지정된 값이 HTML로 렌더링됩니다. false로 설정하면 대부분의 맞춤 형식 지정 도구가 제대로 작동하지 않습니다. 유형: 불리언
기본값: false
|
| alternatingRowStyle |
교차 색상 스타일을 홀수 행과 짝수 행에 할당할지를 결정합니다. 유형: 불리언
기본값: true
|
| cssClassNames |
각 속성 이름이 테이블 요소를 설명하고 속성 값은 문자열인 객체. 해당 테이블 요소에 할당할 클래스를 정의합니다. 이 속성을 사용하여 표의 특정 요소에 맞춤 CSS를 할당합니다. 이 속성을 사용하려면 객체를 할당합니다. 여기서 속성 이름은 테이블 요소를 지정하고 속성 값은 문자열입니다. 이 요소에는 해당 요소에 할당할 클래스 이름을 지정합니다. 그런 다음 페이지에서 이 클래스의 CSS 스타일을 정의해야 합니다. 다음과 같은 속성 이름이 지원됩니다.
예:
참고: CSS에서는 일부 요소가 다른 요소보다 우선합니다. 예를 들어 유형: 객체
기본값: null
|
| firstRowNumber |
dataTable의 첫 번째 행에 대한 행 번호입니다. showRowNumber가 true인 경우에만 사용됩니다. 유형: 숫자
기본값: 1
|
| frozenColumns |
왼쪽에서 고정될 열의 개수입니다. 이러한 열은 나머지 열을 가로로 스크롤해도 그대로 유지됩니다. 유형: 숫자
기본값: null
|
| 키 |
시각화의 컨테이너 요소의 높이를 설정합니다. 표준 HTML 단위(예: '100px', '80em', '60')를 사용할 수 있습니다. 단위를 지정하지 않으면 픽셀 수가 픽셀로 간주됩니다. 지정하지 않으면 브라우저가 테이블에 맞게 높이를 자동으로 조정하여 프로세스에서 최대한 줄입니다. 필요한 높이보다 작게 설정하면 표에 세로 스크롤바가 추가됩니다 (헤더 행도 고정됨). '100%'로 설정하면 테이블이 컨테이너 요소로 최대한 확장됩니다. 유형: 문자열
기본값: 자동
|
| 페이지 |
데이터를 통한 페이징 사용 설정 여부 및 방법 다음 문자열 값 중 하나를 선택합니다.
유형: 문자열
기본값: 'disable'
|
| pageSize |
페이지 옵션으로 페이징이 사용 설정된 경우 각 페이지의 행 수입니다. 유형: 숫자
기본값: 10
|
| pagingButtons |
페이징 버튼에 지정된 옵션을 설정합니다. 옵션은 다음과 같습니다.
유형: 문자열 또는 숫자
기본값: 'auto'
|
| rtlTable |
테이블의 열 순서를 반대로 바꾸어 오른쪽에서 왼쪽으로 읽는 언어 (예: 아랍어, 히브리어)에 대한 기본 지원을 추가합니다. 이렇게 하면 0열이 가장 오른쪽 열이 되고 마지막 열이 가장 왼쪽 열이 됩니다. 이는 기본 데이터의 열 색인에 영향을 주지 않으며 표시 순서에만 영향을 미칩니다. 이 옵션을 사용하더라도 테이블 시각화에서는 전체 양방향 (BiDi) 언어 표시가 지원되지 않습니다. 페이징을 사용 설정하거나(페이지 옵션 사용) 높이 및 너비 옵션을 필수 테이블 크기보다 작게 지정했기 때문에 테이블에 스크롤바가 있는 경우 이 옵션은 무시됩니다. 유형: 불리언
기본값: false
|
| scrollLeftStartPosition |
너비 속성을 설정했기 때문에 표에 가로 스크롤바가 있는 경우 가로 스크롤 위치를 픽셀로 설정합니다. 가장 왼쪽 열을 지나 그만큼 많은 픽셀이 지나면 표가 스크롤되어 열립니다. 유형: 숫자
기본값: 0
|
| showRowNumber |
true로 설정하면 행 번호가 표의 첫 번째 열로 표시됩니다. 유형: 불리언
기본값: false
|
| sort |
사용자가 열 제목을 클릭할 때 열을 정렬하는 경우 및 정렬 방법 정렬이 사용 설정된 경우 subjectAscending 및sortColumn 속성도 설정해 보세요. 다음 문자열 값 중 하나를 선택합니다.
유형: 문자열
기본값: 'enable'
|
| sortAscending |
첫 정렬 열이 정렬되는 순서입니다. 오름차순의 경우 true, 내림차순의 경우 false입니다. 유형: 불리언
기본값: true
|
| sortColumn |
데이터 테이블에 있는 열의 색인으로, 테이블이 처음에 정렬되는 기준이 됩니다. 열에는 정렬 순서를 나타내는 작은 화살표가 표시됩니다. 유형: 숫자
기본값: -1
|
| startPage |
표시할 첫 번째 표 페이지입니다. 유형: 숫자
기본값: 0
|
| 너비 |
시각화의 컨테이너 요소의 너비를 설정합니다. 표준 HTML 단위(예: '100px', '80em', '60')를 사용할 수 있습니다. 단위를 지정하지 않으면 픽셀 수가 픽셀로 간주됩니다. 지정하지 않으면 브라우저에서 표에 맞게 너비를 자동으로 조정하여 과정에서 가능한 한 크게 너비를 줄입니다. 필요한 너비보다 작게 설정하면 표에 가로 스크롤바가 추가됩니다. '100%'로 설정하면 테이블이 컨테이너 요소로 최대한 확장됩니다. 유형: 문자열
기본값: 자동
|
메서드
| 메서드 | |
|---|---|
draw(data, options) |
표를 그립니다. 반환 유형: 없음
|
getSelection() |
표준 getSelection 구현입니다. Selection 요소는 모두 행 요소입니다. 선택된 행을 2개 이상 반환할 수 있습니다. 선택 객체의 행 색인은 사용자 상호작용 (정렬, 페이징 등)과 관계없이 원본 데이터 테이블을 참조합니다. 선택 전환: 셀을 처음 클릭하면 선택되고, 다시 셀을 클릭하면 선택이 해제되어 선택 이벤트가 발생하지만, 가져온 선택 객체에는 선택된 항목이 없습니다. 반환 유형: 선택 요소의 배열
|
getSortInfo() |
정렬된 테이블의 현재 정렬 상태에 대한 정보를 검색하려면 이 메서드를 호출합니다. 일반적으로 특정 열을 기준으로 행을 정렬하기 위해 열 제목을 클릭한 사용자에 의해 수행됩니다. 정렬을 비활성화하면 이 방법이 작동하지 않습니다. 코드에서 데이터를 정렬하지 않았거나 사용자가 코드를 선택하여 데이터를 정렬하지 않은 경우 기본 정렬 값이 반환됩니다. 반환 유형: 다음과 같은 속성을 갖는 객체입니다.
|
setSelection(selection) |
표준 반환 유형: 없음
|
clearChart() |
차트를 지우고 할당된 리소스를 모두 해제합니다. 반환 유형: 없음
|
이벤트
| 이름 | |
|---|---|
| select |
표준 선택 이벤트이지만 전체 행만 선택할 수 있습니다. 속성: 없음
|
| 페이지 |
사용자가 페이지 탐색 버튼을 클릭할 때 트리거됩니다. 속성:
page: 숫자. 이동할 페이지의 색인입니다. |
| sort |
사용자가 열 헤더를 클릭할 때 트리거되며 정렬 옵션이 '사용 중지'되어 있지 않습니다. 속성: 다음과 같은 속성을 갖는 객체입니다.
|
| 준비됨 |
차트에서 외부 메서드 호출을 사용할 준비가 되었습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 그리기 메서드를 호출하기 전에 이 이벤트의 리스너를 설정하고 이벤트가 시작된 후에만 호출해야 합니다. 속성: 없음
|
포맷터
참고: 테이블 시각화에는 일반 형식 지정 도구로 대체된 형식 지정 도구 객체 집합이 있습니다. 이 객체는 동일한 방식으로 작동하지만 모든 시각화에 사용할 수 있습니다.
다음 표는 기존 테이블 형식 지정 도구와 이에 상응하는 일반 형식 지정 도구를 보여줍니다. 새 코드를 작성할 때는 일반 형식 지정 도구를 사용해야 합니다.
| 표 형식 지정 도구 | |
|---|---|
| TableArrowFormat | google.visualization.ArrowFormat |
| TableBarFormat | google.visualization.BarFormat |
| TableColorFormat | google.visualization.ColorFormat |
| TableDateFormat | google.visualization.DateFormat |
| TableNumberFormat | google.visualization.NumberFormat |
| TablePatternFormat | google.visualization.PatternFormat |
중요: Formatter는 HTML을 사용하여 텍스트 서식을 지정하는 경우가 많습니다. 따라서 allowHtml 옵션을 true로 설정해야 합니다.
데이터 정책
브라우저에서 모든 코드와 데이터가 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.