개요
정렬 및 페이징할 수 있는 표 형식 문자열은 서식 문자열을 사용하거나 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
|
| AltratingRowStyle |
교차 색상 스타일을 홀수 및 짝수 행에 할당할지 결정합니다. 유형: 부울
기본값: true
|
| css 클래스 이름 |
각 속성 이름이 테이블 요소를 설명하고, 속성 값이 문자열이며, 해당 테이블 요소에 할당할 클래스를 정의합니다. 이 속성을 사용하여 맞춤 CSS를 테이블의 특정 요소에 할당합니다. 이 속성을 사용하려면 객체를 할당하세요. 여기서 속성 이름은 테이블 요소를 지정하고 속성 값은 문자열입니다. 해당 요소에 할당할 클래스 이름을 지정합니다. 그런 다음 페이지에서 해당 클래스의 CSS 스타일을 정의해야 합니다. 지원되는 속성 이름은 다음과 같습니다.
예:
참고: CSS에서 일부 요소는 다른 요소보다 우선합니다. 예를 들어, 유형: 객체
기본값: null
|
| 첫 번째 행 번호 |
dataTable의 첫 번째 행의 행 번호입니다. ShowRowNumber가 true인 경우에만 사용됩니다. 유형: 숫자
기본값: 1
|
| frozenColumn |
왼쪽부터 고정된 열 수입니다. 이러한 열은 나머지 열을 가로로 스크롤할 때 제자리에 그대로 유지됩니다. 유형: 숫자
기본값: null
|
| 높이 |
시각화의 컨테이너 요소의 높이를 설정합니다. 표준 HTML 단위를 사용할 수 있습니다(예: '100px', '80em', '60'). 단위를 지정하지 않으면 숫자가 픽셀로 간주됩니다. 지정하지 않으면 브라우저가 표에 맞게 높이를 자동으로 조정하여 프로세스에서 최대한 줄입니다. 필요한 높이보다 작게 설정되면 표에 세로 스크롤바가 추가됩니다 (헤더 행도 고정됨). '100%'로 설정하면 테이블이 컨테이너 요소로 최대한 확장됩니다. 유형: 문자열
기본값: 자동
|
| 페이지 |
데이터를 통해 페이징을 사용 설정하는 방법 및 방법 다음 문자열 값 중 하나를 선택합니다.
유형: 문자열
기본값: 'disable'
|
| 페이지 크기 |
페이지 옵션으로 페이징을 사용 설정한 경우 각 페이지의 행 수입니다. 유형: 숫자
기본값: 10
|
| Pagingings 버튼 |
Paging 버튼에 지정된 옵션을 설정합니다. 옵션은 다음과 같습니다.
유형: 문자열 또는 숫자
기본값: 'auto'
|
| RTL테이블 |
열의 열 순서를 0으로 하고 가장 오른쪽 열이 되고 마지막 열이 가장 왼쪽 열이 되도록 오른쪽에서 왼쪽으로 쓰는 언어 (아랍어 또는 히브리어)에 대한 기본 지원을 추가합니다. 이는 기본 데이터의 열 색인에는 영향을 주지 않으며 표시 순서에만 영향을 미칩니다. 이 옵션을 사용하더라도 테이블 시각화에서는 전체 양방향 (BiDi) 언어 표시를 지원하지 않습니다. 페이지 옵션을 사용하여 페이징을 사용 설정하거나 필요한 표 크기보다 작은 높이 및 너비 옵션을 지정하여 표에 스크롤바가 있는 경우 이 옵션은 무시됩니다. 유형: 부울
기본값: false
|
| scrollLeftStartPosition |
너비 속성을 설정했으므로 테이블에 가로 스크롤바가 있는 경우 가로 스크롤 위치를 픽셀로 설정합니다. 표가 가장 왼쪽 열을 지나 스크롤한 픽셀로 열립니다. 유형: 숫자
기본값: 0
|
| 행 번호 표시 |
true로 설정하면 테이블의 첫 번째 열로 행 번호가 표시됩니다. 유형: 부울
기본값: false
|
| sort |
사용자가 열 제목을 클릭할 때 열을 정렬하는 방법과 방법을 설명합니다. 정렬이 사용 설정된 경우 alignAscending 및 정렬 열 속성도 설정하는 것이 좋습니다. 다음 문자열 값 중 하나를 선택하세요.
유형: 문자열
기본값: '사용'
|
| 오름차순 정렬 |
초기 정렬 열이 정렬된 순서입니다. 오름차순의 경우 true, 내림차순의 경우 false입니다. 유형: 부울
기본값: true
|
| 열 정렬 |
처음에 표를 기준으로 정렬되는 데이터 표에 있는 열의 색인입니다. 정렬 순서를 나타내는 작은 화살표가 열에 표시됩니다. 유형: 숫자
기본값: -1
|
| 시작 페이지 |
표시할 첫 번째 표 페이지입니다. 유형: 숫자
기본값: 0
|
| 너비 |
시각화의 컨테이너 요소의 너비를 설정합니다. 표준 HTML 단위를 사용할 수 있습니다(예: '100px', '80em', '60'). 단위를 지정하지 않으면 숫자가 픽셀로 간주됩니다. 지정하지 않으면 브라우저가 테이블에 맞게 너비를 자동으로 조정하여 프로세스에서 크기를 최대한 줄입니다. 필요한 너비보다 작게 설정되면 표에 가로 스크롤바가 추가됩니다. '100%'로 설정하면 표가 컨테이너 요소로 최대한 확장됩니다. 유형: 문자열
기본값: 자동
|
방법
| 메서드 | |
|---|---|
draw(data, options) |
표를 그립니다. 반환 유형: 없음
|
getSelection() |
표준 getSelection 구현입니다. 선택 요소는 모두 행 요소입니다. 2개 이상의 선택된 행을 반환할 수 있습니다. 선택 객체의 행 색인은 사용자 상호작용 (정렬, 페이징 등)과 관계없이 원본 데이터 테이블을 참조합니다. 선택 전환: 셀을 처음 클릭하면 다시 선택됩니다. 셀을 다시 클릭하면 선택 해제되어 선택 이벤트가 발생하지만 가져온 선택 객체에 선택한 항목이 없습니다. 반환 유형: 선택 요소의 배열
|
getSortInfo() |
이 메서드를 호출하여 정렬된 테이블의 현재 정렬 상태에 대한 정보를 검색합니다. 이 동작은 일반적으로 사용자가 열 제목을 클릭하여 특정 열을 기준으로 행을 정렬한 것입니다. 정렬을 사용 중지하면 이 방법이 작동하지 않습니다. 코드에서 데이터를 정렬하지 않았거나 사용자가 코드를 선택하여 데이터를 정렬하지 않은 경우 기본 정렬 값이 반환됩니다. 반환 유형: 다음 속성을 가진 객체입니다.
|
setSelection(selection) |
표준 반환 유형: 없음
|
clearChart() |
차트를 삭제하고 할당된 모든 리소스를 해제합니다. 반환 유형: 없음
|
이벤트
| 이름 | |
|---|---|
| select |
표준 선택 이벤트이지만 전체 행만 선택할 수 있습니다. 속성: 없음
|
| 페이지 |
사용자가 페이지 탐색 버튼을 클릭하면 트리거됩니다. 속성:
page: 숫자. 이동할 페이지의 색인입니다. |
| sort |
사용자가 열 헤더를 클릭한 후 정렬 옵션이 '사용 중지'되지 않을 때 트리거됩니다. 속성: 다음 속성을 가진 객체입니다.
|
| 준비됨 |
차트에서 외부 메서드 호출을 사용할 수 있습니다. 차트와 상호작용하고 차트를 그린 후 메서드를 호출하려면 draw 메서드를 호출하기 전에 이 이벤트에 대한 리스너를 설정하고 이벤트가 시작된 후에만 호출해야 합니다. 속성: 없음
|
포맷러
참고: 테이블 시각화에는 일반 형식 지정 도구로 대체된 모든 형식 지정 도구 객체가 있으며, 이러한 형식은 동일한 방식으로 작동하지만 모든 시각화에서 사용할 수 있습니다.
다음 표에서는 기존 테이블 형식 지정 도구와 이에 상응하는 일반 형식 지정 형식을 보여줍니다. 새 코드를 작성할 때는 일반 형식 지정 도구를 사용해야 합니다.
| 테이블 형식 지정 도구 | |
|---|---|
| 테이블 화살표 형식 | google.visualization.arrowFormat |
| 테이블 바 형식 | google.visualization.BarFormat |
| 테이블 색상 형식 | google.visualization.ColorFormat |
| 테이블 날짜 형식 | google.visualization.DateFormat |
| 테이블 번호 형식 | google.visualization.NumberFormat |
| 테이블 패턴 형식 | google.visualization.PatternFormat |
중요: 형식 지정 도구는 HTML을 사용하여 텍스트의 형식을 지정하는 경우가 많으므로 allowHtml 옵션을 true로 설정해야 합니다.
데이터 정책
모든 코드와 데이터가 브라우저에서 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다.