이 페이지에서는 차트에서 사용하는 내부 데이터 표현, 데이터를 차트로 전달하는 데 사용되는 DataTable
및 DataView
클래스, DataTable
를 인스턴스화하고 채우는 다양한 방법을 설명합니다.
목차
- 차트에서 데이터가 표현되는 방식
- 차트에 사용되는 테이블 스키마는 무엇인가요?
- DataTables 및 DataView
- DataTable 만들기 및 채우기
- dataTableToCsv()로 변경
- 추가 정보
차트에서 데이터가 표현되는 방식
모든 차트는 데이터를 테이블에 저장합니다. 다음은 채워진 2열 데이터 테이블을 간략하게 표현한 것입니다.
색인: 0 |
색인: 1 유형: 숫자 라벨: '일일 시간' |
---|---|
'직장' | 11 |
'먹기' | 2 |
'통근' | 2 |
'TV 시청' | 2 |
'수면' | 7 |
데이터는 행, 열로 참조되는 셀에 저장됩니다. 여기서 행은 0부터 시작하는 행 색인이며 열은 0부터 시작하는 열 색인 또는 지정할 수 있는 고유 ID입니다.
다음은 표에 지원되는 요소와 속성의 전체 목록입니다. 자세한 내용은 생성자의 자바스크립트 리터럴 매개변수 형식을 참고하세요.
- 표 - 열과 행의 배열 및 개발자가 할당할 수 있는 임의의 이름/값 쌍의 매핑(선택사항)이 포함됩니다. 차트에서는 현재 표 수준 속성을 사용하지 않습니다.
- 열 - 각 열은 필수 데이터 유형과 임의의 이름/값 속성의 문자열 문자열, ID, 패턴, 맵(선택사항)을 지원합니다. 라벨은 차트에 표시될 수 있는 사용자 친화적인 문자열입니다. ID는 열 색인 대신 사용할 수 있는 선택적 식별자입니다. 코드에서 0부터 시작하는 색인 또는 선택적 ID를 사용하여 열을 참조할 수 있습니다. 지원되는 데이터 유형 목록은
DataTable.addColumn()
를 참고하세요. - 행 - 행은 셀의 배열이며, 할당할 수 있는 선택적 이름/값 쌍의 매핑도입니다.
- 셀 - 각 셀은 열 유형의 실제 값과 더불어 개발자가 제공하는 값의 문자열 형식 옵션(선택사항)을 포함하는 객체입니다. 예를 들어 숫자 열에 값 7과 서식 있는 값 'Seven'이 할당될 수 있습니다.
내 차트에서 사용하는 테이블 스키마는 무엇인가요?
다양한 차트에서는 서로 다른 형식의 테이블을 사용합니다. 예를 들어 원형 차트에는 문자열 열과 숫자 열이 있는 2열 테이블이 필요합니다. 여기서 각 행은 슬라이스를 설명하고, 첫 번째 열은 슬라이스 라벨이고 두 번째 열은 슬라이스 값입니다. 하지만 분산형 차트는 2개의 숫자 열로 구성된 표를 예상합니다. 여기서 각 행은 점이며, 두 열은 점의 X와 Y 값입니다. 필요한 데이터 형식에 대해 알아보려면 차트의 문서를 참조하세요.
DataTables 및 DataView
차트 데이터 테이블은 자바스크립트에서 DataTable
객체 또는 DataView
객체로 표현됩니다. 경우에 따라 데이터를 차트 도구 데이터 소스에서 인터넷을 통해 전송하거나 ChartWrapper
에 사용할 수 있는 입력값으로 사용하는 경우 자바스크립트 리터럴 또는 JSON 버전의 DataTable이 표시될 수 있습니다.
DataTable
는 원본 데이터 테이블을 만드는 데 사용됩니다. DataView
는 DataTable
의 읽기 전용 뷰를 제공하는 편의 클래스로, 연결된 원본 데이터를 수정하지 않고도 행이나 열을 빠르게 숨기거나 재정렬하는 메서드를 제공합니다. 다음은 두 클래스를 간단히 비교한 것입니다.
데이터 테이블 | 데이터 보기 |
---|---|
읽기 쓰기 겸용 | 읽기 전용 |
빈 채로 만든 후 채울 수 있음 | 기존 DataTable 에 대한 참조입니다. 처음부터 채울 수는 없으며 기존 DataTable 에 대한 참조로 인스턴스화해야 합니다. |
데이터는 저장공간을 차지합니다. | 데이터는 기존 DataTable 를 참조하며 공간을 소비하지 않습니다. |
행, 열, 데이터를 추가/수정/삭제할 수 있으며 모든 변경사항은 영구적입니다. | 기본 데이터를 수정하지 않고도 행을 정렬하거나 필터링할 수 있습니다. 행과 열을 숨기고 반복적으로 표시할 수 있습니다. |
클론 가능 | 뷰의 DataTable 버전을 반환할 수 있음 |
소스 데이터임, 참조를 포함하지 않음 | DataTable 의 실시간 참조: DataTable 데이터의 모든 변경사항이 즉시 뷰에 반영됩니다. |
차트에 데이터 소스로 전달할 수 있음 | 차트에 데이터 소스로 전달할 수 있음 |
계산된 열을 지원하지 않음 | 다른 열을 결합하거나 조작하여 즉석에서 계산된 값이 있는 열인 계산된 열을 지원합니다. |
행 또는 열 숨기기 없음 | 선택한 열을 숨기거나 표시할 수 있습니다. |
DataTable 만들기 및 채우기
DataTable을 만들고 채우는 방법에는 여러 가지가 있습니다.
- 새 DataTable을 만든 다음 addColumn()/addRows()/addRow()/setCell() 호출
- 배열 데이터 표()
- 자바스크립트 리터럴 초기화
- 데이터 소스 쿼리 전송
비어 있는 DataTable + addColumn()/addRows()/addRow()/setCell()
단계:
- 새
DataTable
인스턴스화 - 열 추가
- 데이터로 채워진 행을 하나 이상 추가합니다(선택사항). 빈 행을 추가하여 나중에 채울 수 있습니다. 행을 추가 또는 삭제하거나 셀 값을 개별적으로 수정할 수도 있습니다.
장점:
- 각 열의 데이터 유형과 라벨을 지정할 수 있습니다.
- 브라우저에서 테이블을 생성하는 데 적합하며 JSON 리터럴 메서드보다 오타가 적게 발생합니다.
단점:
- 프로그래매틱 방식으로 웹 서버에서 페이지를 생성할 때 DataTable 생성자에 전달할 JSON 리터럴 문자열을 빌드하는 것만큼 유용하지는 않습니다.
- 브라우저의 속도에 따라 다르며 더 큰 테이블 (약 1,000개 이상의 셀)이 있는 JSON 리터럴 문자열보다 느릴 수 있습니다.
예:
다음은 이 기법의 다양한 변형을 활용하여 동일한 데이터 테이블을 만드는 예입니다.
// ------- Version 1------------ // Add rows + data at the same time // ----------------------------- var data = new google.visualization.DataTable(); // Declare columns data.addColumn('string', 'Employee Name'); data.addColumn('datetime', 'Hire Date'); // Add data. data.addRows([ ['Mike', {v:new Date(2008,1,28), f:'February 28, 2008'}], // Example of specifying actual and formatted values. ['Bob', new Date(2007,5,1)], // More typically this would be done using a ['Alice', new Date(2006,7,16)], // formatter. ['Frank', new Date(2007,11,28)], ['Floyd', new Date(2005,3,13)], ['Fritz', new Date(2011,6,1)] ]); // ------- Version 2------------ // Add empty rows, then populate // ----------------------------- var data = new google.visualization.DataTable(); // Add columns data.addColumn('string', 'Employee Name'); data.addColumn('date', 'Start Date'); // Add empty rows data.addRows(6); data.setCell(0, 0, 'Mike'); data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'}); 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));
arrayToDataTable()
이 도우미 함수는 단일 호출을 사용하여 DataTable
를 만들고 채웁니다.
장점:
- 브라우저에서 실행되는 매우 단순하고 읽기 쉬운 코드.
- 각 열의 데이터 유형을 명시적으로 지정하거나 Google 차트가 전달된 데이터에서 유형을 추론하도록 할 수 있습니다.
- 열의 데이터 유형을 명시적으로 지정하려면
type
속성을 사용하여 헤더 행에 객체를 지정합니다. - Google 차트에서 유형을 추론하려면 열 라벨에 문자열을 사용합니다.
- 열의 데이터 유형을 명시적으로 지정하려면
예:
var data = google.visualization.arrayToDataTable([ ['Employee Name', 'Salary'], ['Mike', {v:22500, f:'22,500'}], // Format as "22,500". ['Bob', 35000], ['Alice', 44000], ['Frank', 27000], ['Floyd', 92000], ['Fritz', 18500] ], false); // 'false' means that the first row contains labels, not data.
var data = google.visualization.arrayToDataTable([ [ {label: 'Year', id: 'year'}, {label: 'Sales', id: 'Sales', type: 'number'}, // Use object notation to explicitly specify the data type. {label: 'Expenses', id: 'Expenses', type: 'number'} ], ['2014', 1000, 400], ['2015', 1170, 460], ['2016', 660, 1120], ['2017', 1030, 540]]);
자바스크립트 리터럴 이니셜라이저
자바스크립트 리터럴 객체를 테이블 생성자에 전달하여 테이블 스키마와 선택적으로 데이터도 정의할 수 있습니다.
장점:
- 웹 서버에서 데이터를 생성할 때 유용합니다.
- 더 큰 테이블의 경우 다른 방법보다 빠르게 처리합니다 (약 1,000개 이상의 셀).
단점:
- 구문이 정확하기 때문에 까다롭고 오타가 발생하기 쉽습니다.
- 가독성이 낮은 코드입니다.
- JSON과 조건부로 비슷하지만 동일하지는 않습니다.
예:
var data = new google.visualization.DataTable( { cols: [{id: 'task', label: 'Employee Name', type: 'string'}, {id: 'startDate', label: 'Start Date', type: 'date'}], rows: [{c:[{v: 'Mike'}, {v: new Date(2008, 1, 28), f:'February 28, 2008'}]}, {c:[{v: 'Bob'}, {v: new Date(2007, 5, 1)}]}, {c:[{v: 'Alice'}, {v: new Date(2006, 7, 16)}]}, {c:[{v: 'Frank'}, {v: new Date(2007, 11, 28)}]}, {c:[{v: 'Floyd'}, {v: new Date(2005, 3, 13)}]}, {c:[{v: 'Fritz'}, {v: new Date(2011, 6, 1)}]} ] } )
데이터 소스 쿼리 전송
차트 도구 데이터 소스에 쿼리를 전송할 때 성공적인 응답은 DataTable 인스턴스입니다. 반환된 DataTable은 다른 DataTable과 마찬가지로 DataView에 복사, 수정 또는 복사할 수 있습니다.
function drawVisualization() { var query = new google.visualization.Query( 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1'); // Apply query language statement. query.setQuery('SELECT A,D WHERE D > 100 ORDER BY D'); // Send the query with a callback function. query.send(handleQueryResponse); } function handleQueryResponse(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); visualization = new google.visualization.LineChart(document.getElementById('visualization')); visualization.draw(data, {legend: 'bottom'}); }
dataTableToCsv()
도우미 함수 google.visualization.dataTableToCsv(
data)
는 데이터 테이블의 데이터가 포함된 CSV 문자열을 반환합니다.
이 함수에 대한 입력은 DataTable 또는 DataView일 수 있습니다.
셀의 서식이 지정된 값을 사용합니다. 열 실습은 무시됩니다.
',
', '\n
' 같은 특수 문자는 표준 CSV 이스케이프 규칙을 사용하여 이스케이프 처리됩니다.
다음 코드는 브라우저의 자바스크립트 콘솔에 Ramanujan,1729
Gauss,5050
를 표시합니다.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", {packages:['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Name', 'Number'], ['Ramanujan', 1729], ['Gauss', 5050] ]); var csv = google.visualization.dataTableToCsv(data); console.log(csv); } </script> </head> </html>