개요
시각화에 툴바 요소를 추가하여 사용자가 기본 데이터를 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); };
데이터 정책
모든 코드와 데이터가 브라우저에서 처리되고 렌더링됩니다. 데이터는 서버로 전송되지 않습니다. 일부 구성요소의 경우 툴바에 제공된 각 데이터 소스에서 데이터를 가져옵니다.
현지화
현재 툴바는 미국 영어만 지원합니다.