이 페이지에서는 차트에서 사용하는 내부 데이터 표현, 차트에 데이터를 전달하는 데 사용되는 DataTable 및 DataView 클래스, DataTable를 인스턴스화하고 채우는 다양한 방법을 설명합니다.
목차
- 차트에서 데이터를 나타내는 방법
- 내 차트에서 사용하는 테이블 스키마는 무엇인가요?
- DataTables 및 DataView
- DataTable 만들기 및 채우기
- dataTableToCsv()에 대해 자세히 알아보세요.
- 추가 정보
차트에서 데이터를 나타내는 방법
모든 차트는 표에 데이터를 저장합니다. 다음은 채워진 2열 데이터 테이블을 단순화한 표현입니다.
색인: 0 |
색인: 1 유형: 숫자 라벨: '하루당 시간' |
|---|---|
| '직장' | 11 |
| '먹기' | 2 |
| '통근' | 2 |
| 'TV 시청' | 2 |
| '수면' | 7 |
데이터는 (row, column)으로 참조되는 셀에 저장됩니다. 여기서 row는 0부터 시작하는 행 색인이고 column은 0부터 시작하는 열 색인 또는 지정할 수 있는 고유 ID입니다.
다음은 테이블에서 지원되는 요소 및 속성의 전체 목록입니다. 자세한 내용은 생성자의 JavaScript 리터럴 매개변수 형식을 참조하세요.
- 표: 열과 행의 배열 및 할당 가능한 임의의 이름/값 쌍의 맵(선택사항)입니다. 현재 차트에서는 표 수준 속성을 사용하지 않습니다.
- 열 - 각 열은 필수 데이터 유형과 문자열 라벨, ID, 패턴, 임의 이름/값 속성의 맵을 지원합니다. 라벨은 차트에 표시할 수 있는 사용자 친화적인 문자열입니다. ID는 열 색인 대신 사용할 수 있는 선택적 식별자입니다. 코드에서 0부터 시작하는 색인이나 선택적 ID로 열을 참조할 수 있습니다. 지원되는 데이터 유형 목록은
DataTable.addColumn()를 참고하세요. - Rows - 행은 셀의 배열이며, 할당할 수 있는 임의의 이름/값 쌍의 맵(선택사항)입니다.
- 셀 - 각 셀은 열 유형의 실제 값과 사용자가 제공한 값의 문자열 형식 버전(선택사항)을 포함하는 객체입니다. 예를 들어 숫자 열에는 값 7과 형식이 지정된 값 'seven'이 할당될 수 있습니다.
내 차트는 어떤 테이블 스키마를 사용하나요?
차트마다 다른 형식의 표를 사용합니다. 예를 들어 원형 차트에는 문자열 열과 숫자 열로 구성된 2열 표가 필요합니다. 여기에서 각 행은 슬라이스를 설명하며 첫 번째 열은 슬라이스 라벨이고 두 번째 열은 슬라이스 값입니다. 하지만 분산형 차트에는 숫자 열 2개로 구성된 테이블이 필요합니다. 각 행은 점이고 두 열은 포인트의 X 및 Y 값입니다. 필요한 데이터 형식은 차트의 문서를 참조하세요.
DataTable 및 DataView
차트 데이터 표는 JavaScript로 DataTable 객체 또는 DataView 객체로 표시됩니다. 경우에 따라 DataTable의 JavaScript 리터럴 또는 JSON 버전이 표시될 수 있습니다. 예를 들어 데이터가 차트 도구 데이터 소스에서 인터넷을 통해 전송되거나 ChartWrapper의 입력 값으로 사용될 수 있습니다.
DataTable는 원본 데이터 테이블을 만드는 데 사용됩니다. DataView는 연결된 원래 데이터를 수정하지 않고도 행이나 열을 빠르게 숨기거나 재정렬하는 메서드가 포함된 DataTable의 읽기 전용 뷰를 제공하는 편의 클래스입니다. 다음은 두 클래스를 간단히 비교한 것입니다.
| DataTable | DataView |
|---|---|
| 읽기 쓰기 겸용 | 읽기 전용 |
| 비어 있는 상태로 만든 다음 채울 수 있습니다. | 기존 DataTable의 참조입니다. 처음부터 채울 수 없습니다. 기존 DataTable 참조로 인스턴스화해야 합니다. |
| 데이터는 저장공간을 차지합니다. | 데이터는 기존 DataTable의 참조이며 공간을 사용하지 않습니다. |
| 행, 열, 데이터를 추가/수정/삭제할 수 있으며 모든 변경사항은 영구적으로 적용됩니다. | 기본 데이터를 수정하지 않고 행을 정렬하거나 필터링할 수 있습니다. 행과 열을 반복적으로 숨기거나 표시할 수 있습니다. |
| 클론 가능 | 뷰의 DataTable 버전을 반환할 수 있습니다. |
| 소스 데이터입니다. 참조를 포함하지 않습니다. | DataTable의 실시간 참조. DataTable 데이터의 변경사항은 뷰에 즉시 반영됩니다. |
| 차트에 데이터 소스로 전달 가능 | 차트에 데이터 소스로 전달 가능 |
| 계산된 열을 지원하지 않음 | 다른 열을 결합하거나 조작하여 즉시 계산된 값이 포함된 열인 계산된 열을 지원합니다. |
| 행 또는 열을 숨기지 않음 | 선택한 열을 숨기거나 표시할 수 있음 |
DataTable 만들기 및 채우기
DataTable을 만들고 채우는 방법에는 여러 가지가 있습니다.
- 새 DataTable을 만든 다음 addColumn()/addRows()/addRow()/setCell() 호출
- arrayToDataTable()
- JavaScript 리터럴 이니셜라이저
- 데이터 소스 쿼리 보내기
비어 있는 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]]);
JavaScript 리터럴 이니셜라이저
JavaScript 리터럴 객체를 테이블 생성자에 전달하여 테이블 스키마와 선택적으로 데이터를 정의할 수 있습니다.
장점:
- 웹 서버에서 데이터를 생성할 때 유용합니다.
- 큰 테이블 (약 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은 다른 데이터 테이블과 마찬가지로 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 이스케이프 규칙을 사용하여 이스케이프 처리됩니다.
다음 코드는 브라우저의 JavaScript 콘솔에 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>