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

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

  1. 概要
  2. サンプル
  3. 読み込み中
  4. データ形式
  5. 構成オプション
  6. Methods
  7. イベント
  8. データポリシー

概要

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:["imageareachart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

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

        chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

読み込み中

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

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

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

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

データ形式

各列はグラフの線を表します。各エントリは同じ X 軸の点の Y 軸の値で、ビジュアリゼーションは直線で接続し、線の下の領域を塗りつぶします。

データは列ごとに処理され、列 0 から始まります。最初に下の行を描画し、次に下の行を描画してください。先に下位線を描画すると、上位の線は下線を覆い隠します。したがって、列 1 には列 2 よりポイントを高くし、列 2 を列 3 よりも高くします。右の列で左の列より 1 ～ 2 ポイント高い場合、下の行が部分的に見えなくなる可能性がありますが、表示されるはずです。

最初のデータ（数値または文字列）を除き、すべてのデータは数値型でなければなりません。最初の列が文字列型の場合、最初の列のエントリは X にラベルとして表示されます。最初の列が数値の場合、X 軸のラベルは表示されません。1 列目を除くすべての列は数字にする必要があります。列の数に制限はありません。

設定オプション

名前 タイプ Default 説明
backgroundColor 文字列 「#FFFFFF」（白） グラフの背景色。Chart API の色形式で指定します。
色 配列 <文字列> 自動 これを使用して、各データ系列に特定の色を割り当てます。色は、Chart API のカラー形式で指定します。色 i はデータ列 i に使用され、色よりもデータ列が多い場合は先頭にラップされます。同じ色のバリエーションがすべてのシリーズで許容される場合は、代わりに color オプションを使用します。
enableEvents boolean false グラフにより、クリックやマウスオーバーなど、ユーザーがトリガーしたイベントをスローします。特定のグラフの種類でのみサポートされます。下記のイベントをご覧ください。
高さ 数値 コンテナの高さ グラフの高さ（ピクセル単位）
凡例 文字列 「右」 凡例の位置と種類。次のいずれかです
  • 「右」- グラフの右側。
  • 「left」- グラフの左側です。
  • top - グラフの上部。
  • 「bottom」 - グラフの下。
  • 'none' - 凡例は表示されません。
最高 数値 自動前処理と Y 軸に表示する最大値。
分 数値 自動前処理と Y 軸に表示する最小値。
表示カテゴリラベル boolean true false に設定すると、カテゴリのラベル（X 軸のラベル）が削除されます。
ShowValueLabels boolean true false に設定すると、値（Y 軸のラベル）のラベルが削除されます。
title 文字列 タイトルなし グラフの上に表示するテキスト。
valueLabelsInterval 数値 自動 値軸のラベルを表示する間隔。たとえば、min が 0、max が 100、valueLabelsInterval が 20 の場合、グラフの軸ラベルは（0、20、40、60、80,100）です。
width 数値 コンテナの幅 グラフの幅（ピクセル単位）です。

メソッド

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

イベント

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

データポリシー

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