툴바

개요

시각화에 툴바 요소를 추가하여 사용자가 기본 데이터를 CSV 파일 또는 HTML 테이블로 내보내거나, 코드를 입력하여 임의의 웹페이지 또는 가젯에 삽입할 수 있도록 할 수 있습니다.

개발자: Google

툴바에서 옵션 중 하나를 선택합니다.

<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']});
    var visualization;

    function draw() {
      drawVisualization();
      drawToolbar();
    }

    function drawVisualization() {
      var container = document.getElementById('visualization_div');
      visualization = new google.visualization.PieChart(container);
      new google.visualization.Query('https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA').
          send(queryCallback);
    }

    function queryCallback(response) {
      visualization.draw(response.getDataTable(), {is3D: true});
    }

    function drawToolbar() {
      var components = [
          {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1}},
          {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
          {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
           gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
           userprefs: {'3d': 1},
           style: 'width: 800px; height: 700px; border: 3px solid purple;'}
      ];

      var container = document.getElementById('toolbar_div');
      google.visualization.drawToolbar(container, components);
    };

    google.charts.setOnLoadCallback(draw);
  </script>
</head>
<body>
  <div id="visualization_div" style="width: 270px; height: 200px;"></div>
  <div id="toolbar_div"></div>
</body>
</html>

사용

google.visualization.drawToolbar() 메서드를 호출하고 허용되는 내보내기 유형과 각각 필요한 데이터를 입력하여 툴바를 페이지에 추가합니다.

툴바를 사용하려면 시각화에서 URL에서 데이터를 가져와야 합니다. 수동으로 입력된 DataTable 또는 DataView 객체를 전달할 수 없습니다. 시각화를 채우는 데 사용된 데이터의 URL을 drawToolbar() 메서드에 전달합니다.

iGoogle 구성요소가 있거나 삽입할 수 있는 삽입 가능한 iFrame을 제공하려면 가젯의 시각화 버전 URL이 있어야 합니다.

출력 유형

drawToolbar() 메서드에서 툴바를 구성하는 방법에 따라 툴바는 사용자에게 다음 출력 유형 중 하나 이상을 선택할 수 있습니다.

  • 브라우저 구성에 따라 브라우저에서 렌더링하거나 다운로드 및 저장하도록 제안하는 데이터의 간단한 CSV 버전
  • 데이터가 포함된 HTML 테이블이며 새 브라우저 창에서 열립니다.
  • 이 시각화를 웹페이지에 삽입하기 위한 HTML <iframe> 코드
  • 사용자가 본인의 iGoogle 페이지에 이 가제트를 삽입할 수 있도록 하는 페이지 링크입니다.

구문

google.visualization.drawToolbar(container, components)

매개변수

컨테이너
페이지에서 DOM 요소를 처리하는 핸들입니다. API는 이 요소에 툴바를 그립니다. 이는 표준 시각화의 컨테이너 매개변수와 유사합니다. 툴바를 사용하는 시각화 옆에 툴바를 배치해야 합니다.
구성요소
객체의 배열로, 각각 데이터나 시각화를 내보낼 수 있는 형식을 설명합니다. 툴바는 배열에 추가된 순서대로 사용자에게 옵션을 노출합니다. 각 객체에는 형식을 설명하는 유형 속성과 유형에 따라 하나 이상의 추가 속성이 있습니다.
  • type: 'csv' - 이 옵션은 쉼표로 구분된 값 파일로 데이터를 내보냅니다. 브라우저에서 '다른 이름으로 저장' 대화상자가 열립니다.
    • datasource: '문자열' - 데이터 소스 URL
  • type: html': 이 옵션은 데이터를 HTML 테이블로 내보냅니다. 데이터 표가 있는 페이지가 브라우저의 새 창에서 열립니다.
    • datasource: 데이터 소스 URL 문자열입니다.
  • type: igoogle - 사용자가 자신의 iGoogle 페이지에 시각화를 추가할 수 있는 옵션입니다. 브라우저에서 'iGoogle에 추가' 페이지가 열립니다. 가젯 버전에서 시각화를 사용할 수 있는 경우에만 사용하세요.
    • datasource: 데이터 소스 URL 문자열입니다.
    • gadget: 가젯화된 버전의 xml URL 문자열입니다. 툴바와 연결된 시각화가 가젯 버전일 필요는 없습니다.
    • userprefs: 이 시각화에 적합한 환경설정 객체(선택사항)로, 시각화 환경설정을 지정합니다.
  • type: htmlcode - 이 옵션은 사용자가 웹페이지에 삽입하여 iframe 내에 시각화를 표시할 수 있는 HTML 코드 블록을 만듭니다. 가젯의 정확한 html 요소가 포함된 팝업 창이 브라우저에서 열립니다.시각화가 가젯 버전에서 사용 가능한 경우에만 이 옵션을 사용하세요.
    • datasource: 데이터 소스 URL 문자열입니다.
    • gadget: 가젯 xml URL 문자열입니다.
    • userprefs: 이 시각화에 적합한 환경설정 객체(선택사항)로, 시각화 환경설정을 지정합니다.
    • style: iframe 스타일의 문자열(선택사항)입니다. 예: 'width: 300px; height: 500px;'.

function drawToolbar() {
  var components = [
      {type: 'igoogle', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml',
       userprefs: {'3d': 1}},
      {type: 'html', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'csv', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA'},
      {type: 'htmlcode', datasource: 'https://spreadsheets.google.com/tq?key=pCQbetd-CptHnwJEfo8tALA',
       gadget: 'https://www.google.com/ig/modules/pie-chart.xml'}
  ];

  var container = document.getElementById('toolbar_div');
  google.visualization.drawToolbar(container, components);
};

데이터 정책

모든 코드와 데이터가 브라우저에서 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다. 일부 구성요소의 경우 툴바에 제공된 각 데이터 소스에서 데이터를 가져옵니다.

현지화

현재 툴바는 미국 영어만 지원합니다.