DataTables 및 DataView

이 페이지에서는 차트에서 사용하는 내부 데이터 표현, 데이터를 차트로 전달하는 데 사용되는 DataTableDataView 클래스, DataTable를 인스턴스화하고 채우는 다양한 방법을 설명합니다.

목차

  1. 차트에서 데이터가 표현되는 방식
  2. 차트에 사용되는 테이블 스키마는 무엇인가요?
  3. DataTables 및 DataView
  4. DataTable 만들기 및 채우기
    1. 새 DataTable을 만든 다음 addColumn()/addRows()/addRow()/setCell() 호출
    2. 배열 데이터 표()
    3. 자바스크립트 리터럴 초기화
    4. 데이터 소스 쿼리 전송
  5. dataTableToCsv()로 변경
  6. 추가 정보

차트에서 데이터가 표현되는 방식

모든 차트는 데이터를 테이블에 저장합니다. 다음은 채워진 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는 원본 데이터 테이블을 만드는 데 사용됩니다. DataViewDataTable의 읽기 전용 뷰를 제공하는 편의 클래스로, 연결된 원본 데이터를 수정하지 않고도 행이나 열을 빠르게 숨기거나 재정렬하는 메서드를 제공합니다. 다음은 두 클래스를 간단히 비교한 것입니다.

데이터 테이블 데이터 보기
읽기 쓰기 겸용 읽기 전용
빈 채로 만든 후 채울 수 있음 기존 DataTable에 대한 참조입니다. 처음부터 채울 수는 없으며 기존 DataTable에 대한 참조로 인스턴스화해야 합니다.
데이터는 저장공간을 차지합니다. 데이터는 기존 DataTable를 참조하며 공간을 소비하지 않습니다.
행, 열, 데이터를 추가/수정/삭제할 수 있으며 모든 변경사항은 영구적입니다. 기본 데이터를 수정하지 않고도 행을 정렬하거나 필터링할 수 있습니다. 행과 열을 숨기고 반복적으로 표시할 수 있습니다.
클론 가능 뷰의 DataTable 버전을 반환할 수 있음
소스 데이터임, 참조를 포함하지 않음 DataTable의 실시간 참조: DataTable 데이터의 모든 변경사항이 즉시 뷰에 반영됩니다.
차트에 데이터 소스로 전달할 수 있음 차트에 데이터 소스로 전달할 수 있음
계산된 열을 지원하지 않음 다른 열을 결합하거나 조작하여 즉석에서 계산된 값이 있는 열인 계산된 열을 지원합니다.
행 또는 열 숨기기 없음 선택한 열을 숨기거나 표시할 수 있습니다.

DataTable 만들기 및 채우기

DataTable을 만들고 채우는 방법에는 여러 가지가 있습니다.

비어 있는 DataTable + addColumn()/addRows()/addRow()/setCell()

단계:

  1. DataTable 인스턴스화
  2. 열 추가
  3. 데이터로 채워진 행을 하나 이상 추가합니다(선택사항). 빈 행을 추가하여 나중에 채울 수 있습니다. 행을 추가 또는 삭제하거나 셀 값을 개별적으로 수정할 수도 있습니다.

장점:

  • 각 열의 데이터 유형과 라벨을 지정할 수 있습니다.
  • 브라우저에서 테이블을 생성하는 데 적합하며 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>

추가 정보