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

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

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

Overview
例
読み込んでいます
データ形式
構成オプション
メソッド
イベント
データポリシー

概要

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 軸のラベルは表示されません。すべての列（最初の列を除く）は数値である必要があります。列の数に制限はありません。

構成オプション

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

メソッド

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

イベント

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

データポリシー

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