視覚化: 面グラフ（旧バージョン）

非推奨

このビジュアリゼーションは新しいバージョンに置き換えられました。代わりに使用してください。簡単に移行するには、リリースノート ページをご覧ください。

概要

SVG または VML を使用してブラウザ内でレンダリングされる面グラフ。ポイントをクリックするとヒントが表示されます。凡例のエントリをクリックしたときに、行をアニメーション化します。

デベロッパー: Google

例

Visualization Playground でコーディングする

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["areachart"]});
      google.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.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

読み込み中

google.load のパッケージ名は "areachart". です

  google.load("visualization", "1", {packages: ["areachart"]});

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

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

データ形式

最初の列は、カテゴリラベルを含む文字列である必要があります。任意の数の列を従うことができます。すべて数値にする必要があります。各列は別々の行として表示されます。

設定オプション

名前 タイプ Default 説明
軸の色 文字列またはオブジェクト デフォルトの色 軸の色。 指定可能な値は、backgroundColor 設定値です。
軸の背景の色 文字列またはオブジェクト デフォルトの色 軸の背景を囲む枠線。 指定可能な値は、backgroundColor 設定値です。
軸フォントサイズ 数値 自動前処理と グラフの軸のテキストのフォントサイズ（ピクセル単位）です。
背景の色 文字列またはオブジェクト デフォルトの色 グラフのメイン領域の背景色。次のいずれかです。
  • HTML でサポートされている色の文字列（「red」や「#00cc00」など）
  • stroke fill プロパティと strokeSize プロパティを持つオブジェクト。stroke と fill は色付きの文字列にする必要があります。strokeSize は数値です。例: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}。ストロークなしで塗りつぶしだけを使用するには、stroke:null, strokeSize: 0 を使用します。
枠線の色 文字列またはオブジェクト デフォルトの色 グラフの要素の枠線。 指定可能な値は、backgroundColor 設定値です。
色 文字列の配列 デフォルトの色 グラフの要素に使用する色。 文字列の配列。各要素は、'red' や '#00cc00' などの HTML でサポートされている色である文字列です。
enableTooltip boolean true true に設定すると、ユーザーがデータポイントをクリックすると、ツールチップが表示されます。
focusBorderColor 文字列またはオブジェクト デフォルトの色 フォーカスされているグラフ要素の周りの枠線（マウス操作）。指定可能な値は、backgroundColor 設定値です。
高さ 数値 コンテナの高さ グラフの高さ（ピクセル単位）
isStacked boolean false true に設定すると、行の値はスタックされます（累積）。
凡例 文字列 「右」 凡例の位置と種類。次のいずれかです
  • 「右」- グラフの右側。
  • 「left」- グラフの左側です。
  • top - グラフの上部。
  • 「bottom」 - グラフの下。
  • 'none' - 凡例は表示されません。
凡例の背景の色 文字列またはオブジェクト デフォルトの色 グラフの凡例の領域の背景色。 指定可能な値は、backgroundColor 設定値です。
凡例フォントサイズ 数値 自動前処理と 凡例のフォントサイズ（ピクセル単位）です。
凡例のテキスト色 文字列またはオブジェクト デフォルトの色 凡例のテキストの色。指定可能な値は、backgroundColor 設定値です。
LineSize 数値 2 線の幅（ピクセル単位）すべての線を隠し、点のみを表示するには、ゼロを使用します。
対数目盛 boolean false true の場合、メイン軸は対数でスケーリングする必要があります。
最高 数値 自動前処理と 最も高い Y 軸のグリッド線を指定します。実際のグリッド線は、2 つの値（最大値のオプション値、または次に高いデータ値に切り上げられる最大のデータ値）のうち大きい方になります。
分 数値 自動前処理と 最も低い Y 軸のグリッド線を指定します。実際のグリッド線は、最小値（最小値）またはデータの値（最小値）の 2 つの値のうち、次に低い値に切り捨てられます。
ポイントサイズ 数値 3 表示されるポイントのサイズ（ピクセル単位）。すべての地点を非表示にするには、ゼロを使用します。
verseAxis boolean false true に設定すると、カテゴリが右から左に描画されます。デフォルトでは、左から右に描画します。
番組のカテゴリ boolean true true の場合、カテゴリラベルが表示されます。false の場合、一致しません。
title 文字列 タイトルなし グラフの上に表示するテキスト。
タイトル X 文字列 タイトルなし 横軸の下に表示するテキスト。
タイトル Y 文字列 タイトルなし 縦軸に表示するテキスト。
titleColor 文字列またはオブジェクト デフォルトの色 グラフのタイトルの色。 指定可能な値は、backgroundColor 設定値です。
titleFontSize 数値 自動前処理と グラフのタイトルのフォントサイズ（ピクセル単位）。

tooltipFontSize		 数値 11 ツールチップ テキストのフォントサイズ。ツールチップが小さすぎて指定されたフォントでテキストを保持できない場合は、縮小される可能性があります。
tooltipHeight
 数値 60 ツールチップの高さ（ピクセル単位）。ツールチップの高さは固定されています。ツールチップは、テキストの長さやフォントサイズに合わせて拡大または縮小されません。ただし、グラフの高さが 1/3 を超える場合はトリミングされます。
tooltipWidth 数値 120 ツールチップの幅（ピクセル単位）。ツールチップの幅は固定されています。テキストの長さやフォントサイズに合わせて拡大または縮小されることはありません。ただし、グラフの幅より大きいものはトリミングされます。
width 数値 コンテナの幅 グラフの幅（ピクセル単位）です。

メソッド

メソッド 戻り値の型 説明
draw(data, options) none グラフを描画します。
getSelection() 選択要素の配列 標準の getSelection() 実装。選択した要素は列要素とセル要素です。ユーザーが選択できる列またはセルは 1 つのみです。
setSelection() none 標準の setSelection() 実装。ただし、要素は 1 つだけ選択できます。すべての選択項目を列またはセルの選択項目として扱います。ラベル列は選択できません。

イベント

名前 説明 プロパティ
onmouseover ユーザーがポイントにカーソルを合わせたときに、対応するセルの行インデックスと列インデックスを渡すときに呼び出されます。 行、列
onmouseout ユーザーがポイントから離れ、対応するセルの行インデックスと列インデックスを渡すと呼び出されます。 行、列
ready 外部メソッド呼び出しのグラフの準備が完了しました。グラフを描画し、描画後にメソッドを呼び出す場合は、draw メソッドを呼び出す前に、このイベントのリスナーを設定して、イベントが発生した後にのみ呼び出す必要があります。 なし
select ユーザーがポイントまたは凡例をクリックすると発行されます。ポイントを選択すると、データテーブルの対応するセルが選択されます。凡例を選択すると、データテーブルの対応する列が選択されます。選択内容を確認するには、getSelection() を呼び出します。 なし

データポリシー

すべてのコードとデータはブラウザで処理され、レンダリングされます。データがサーバーに送信されることはありません。