툴바

  1. 개요
  2. 예
  3. 사용량
    1. 출력 유형
    2. 문법
  4. 데이터 정책

개요

모든 시각화에 툴바 요소를 추가하여 사용자가 기본 데이터를 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() 메서드에 전달합니다.

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

출력 유형

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

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

문법

google.visualization.drawToolbar(container, components)

매개변수

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

데이터 정책

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

현지화

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