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

視覚化: 円グラフ（画像）

重要: Google グラフツールの画像グラフ部分は、2012 年 4 月 20 日をもって正式に非推奨になりました。サポート終了ポリシーに従って、引き続き機能します。

概要
サンプル
読み込み中
データ形式
構成オプション
Methods
イベント
データポリシー

概要

Google Charts API を使って画像としてレンダリングされる円グラフ。

例

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["imagepiechart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',        11],
          ['Eat',         2],
          ['Commute',     2],
          ['Watch TV',    2],
          ['Sleep',       7]
        ]);

        var chart = new google.visualization.ImagePieChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

読み込み中

google.charts.load パッケージ名は "imagepiechart" です。

  google.charts.load('current', {packages: ['imagepiechart']});

ビジュアリゼーションのクラス名は google.visualization.ImagePieChart です。

  var visualization = new google.visualization.ImagePieChart(container);

データ形式

2 列最初の列は文字列ラベルで、スライスラベルが含まれている必要があります。2 列目は数値で、スライス値が含まれているはずです。

設定オプション

可視化の draw() メソッドに渡される options オブジェクトの一部として、以下のオプションを指定できます。

名前	タイプ	Default	説明
backgroundColor	文字列	「#FFFFFF」（白）	グラフの背景色。Chart API の色形式で指定します。
色	文字列	自動	すべての系列で使用する基本色を指定します。各系列は、指定された色のグラデーションになります。色は Chart API のカラー形式で指定します。`colors` が指定されている場合は無視されます。
色	配列 <文字列>	自動	これを使用して、各データ系列に特定の色を割り当てます。色は、Chart API のカラー形式で指定します。色 i はデータ列 i に使用され、色よりもデータ列が多い場合は先頭にラップされます。同じ色のバリエーションがすべてのシリーズで許容される場合は、代わりに `color` オプションを使用します。
enableEvents	boolean	false	グラフにより、クリックやマウスオーバーなど、ユーザーがトリガーしたイベントをスローします。特定のグラフの種類でのみサポートされます。下記のイベントをご覧ください。
高さ	数値	コンテナの高さ	グラフの高さ（ピクセル単位）
is3D	boolean	false	true に設定すると、3 次元グラフが表示されます。
ラベル	文字列	「none」	各スライスに表示するラベル（ある場合）。次の値から選択します。 'none' - ラベルなし。 'value' - スライス値をラベルとして使用します。 'name' - スライス名（列名）。
凡例	文字列	「右」	グラフの凡例の位置。「top」、「bottom」、「left」、「right」、「none」のいずれかの値を選択します。
title	文字列	タイトルなし	グラフの上に表示するテキスト。
width	数値	コンテナの幅	グラフの幅（ピクセル単位）です。

メソッド

メソッド	戻り値の型	説明
`draw(data, options)`	none	グラフを描画します。

イベント

登録すると、汎用画像グラフページに記載されているイベントを聞くことができます。

データポリシー

Chart API のロギングポリシーをご参照ください。