ツールバー

  1. Overview
  2. 例
  3. 使用方法
    1. 出力タイプ
    2. 構文
  4. データポリシー

概要

ビジュアリゼーションにツールバー要素を追加することで、基になるデータを CSV ファイルや HTML テーブルにエクスポートしたり、任意のウェブページやガジェットにビジュアリゼーションを埋め込むコードを提供したりできます。

作成者: Google

例

ツールバーのオプションを 1 つ選択します。

<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() メソッドに渡します。

ガジェットを保持する Blogger コンポーネントまたは埋め込み可能な iFrame を提供する場合は、ビジュアリゼーションのガジェット化されたバージョンの URL が必要です。

出力タイプ

drawToolbar() メソッドでのツールバーの構成方法に応じて、ユーザーはツールバーで次の出力タイプを 1 つ以上選択できます。

  • データのシンプルな CSV バージョン（ブラウザの設定に応じて、ブラウザがレンダリングするか、ダウンロードして保存するかを選択すること）。
  • データを保持する HTML テーブルを新しいブラウザ ウィンドウで開き、
  • このビジュアリゼーションをウェブページに埋め込む HTML <iframe> コード
  • ユーザーがこのガジェットを自分の iGoogle ページに埋め込めるページへのリンク。

構文

google.visualization.drawToolbar(container, components)

パラメータ

コンテナ
ページ上の DOM 要素へのハンドル。API により、この要素内にツールバーが描画されます。これは、標準の可視化のコンテナ パラメータに似ています。ツールバーは、そのツールバーを使用するビジュアリゼーションに隣接して配置する必要があります。
コンポーネント
オブジェクトの配列。各オブジェクトは、データまたはビジュアリゼーションのエクスポート先形式を記述します。ツールバーには、配列に追加された順序でオプションがユーザーに表示されます。各オブジェクトには、形式を記述する type プロパティと、型に応じて 1 つ以上のプロパティがあります。
  • type: 'csv' - このオプションでは、データをカンマ区切り値のファイルにエクスポートします。ブラウザで [名前を付けて保存] ダイアログが開きます。
    • datasource: 'string' - データソースの URL。
  • type: html' - このオプションを選択すると、データを HTML テーブルにエクスポートします。データ表を含むページがブラウザで新しいウィンドウで開きます。
    • datasource: データソースの URL 文字列。
  • type: igoogle - このオプションを使用すると、ユーザーは自分の iGoogle ページにビジュアリゼーションを追加できます。ブラウザで「iGoogle に追加」ページが開きます。これは、ガジェット化されたバージョンでビジュアリゼーションが利用できる場合にのみ使用してください。
    • datasource: データソースの URL 文字列。
    • gadget: ガジェット化されたバージョンの XML URL 文字列。ツールバーが関連付けられているビジュアリゼーションは、ガジェット化されたバージョンである必要はありません。
    • userprefs: 可視化の設定を指定する、この可視化に適したオプションの設定オブジェクト。
  • type: htmlcode - このオプションでは、HTML コードのブロックが作成されます。ユーザーはこれをウェブページに埋め込んで、iframe 内にビジュアリゼーションを表示できます。ブラウザで、ガジェットの正確な 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);
};

データポリシー

すべてのコードとデータはブラウザで処理されてレンダリングされます。データはどのサーバーにも送信されません。 一部のコンポーネントでは、ツールバーに表示されているそれぞれのデータソースからデータが取得されています。

ローカライズ

現在、ツールバーは英語（米国）にのみ対応しています。