概要
ビジュアリゼーションにツールバー要素を追加して、基になるデータを 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()
メソッドでのツールバーの構成方法に応じて、次の 1 つ以上の出力タイプを選択できます。
- ブラウザの設定に応じて、ブラウザがレンダリングまたはダウンロードと保存を行うシンプルな CSV 形式のデータ
- データを保持する HTML テーブル、新しいブラウザ ウィンドウで開く。
- このビジュアリゼーションをウェブページに埋め込む HTML <iframe> コード、および/または
- ユーザーがこのガジェットを iGoogle ページに埋め込むことができるページへのリンク。
構文
google.visualization.drawToolbar(container, components)
パラメータ
- コンテナ
- ページ上の DOM 要素に対するハンドル。API はツールバーをこの要素に描画します。これは、標準の可視化のコンテナ パラメータに似ています。ツールバーは、それを使用するビジュアリゼーションに隣接して配置する必要があります。
- コンポーネント
- データまたはビジュアリゼーションをエクスポートできる形式を示すオブジェクトの配列。ツールバーでは、配列に追加された順序で、ユーザーにオプションが公開されます。各オブジェクトには、形式を記述する型プロパティと、型に応じて 1 つ以上の追加プロパティがあります。
type: 'csv'
- データをカンマ区切り値ファイルにエクスポートします。ブラウザで [名前を付けて保存] ダイアログが開きます。- datasource: 'string' - データソースの 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 のスタイルのオプションの文字列。例: '幅: 300 ピクセル、高さ: 500 ピクセル;'
例
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); };
データポリシー
すべてのコードとデータはブラウザで処理され、レンダリングされます。データがサーバーに送信されることはありません。一部のコンポーネントでは、ツールバーに表示されている各データソースからデータが取得されます。
ローカライズ
現在、ツールバーはアメリカ英語にのみ対応しています。