このページは Cloud Translation API によって翻訳されました。

ツールバー

概要
サンプル
使用方法
1. 出力タイプ
2. 構文
データポリシー

概要

ビジュアリゼーションにツールバー要素を追加して、基になるデータを 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);
};

データポリシー

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

ローカライズ

現在、ツールバーはアメリカ英語にのみ対応しています。