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

非推奨

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

概要

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);

データ形式

最初の列は文字列で、カテゴリラベルを含めます。 後続の列はいくつでもかまいませんが、すべて数値にする必要があります。各列は別々の行として表示されます。

構成オプション

名前 タイプ デフォルト 説明
axisColor 文字列またはオブジェクト デフォルトの色 軸の色。 指定可能な値は、backgroundColor 構成オプションの値です。
axisBackgroundColor 文字列またはオブジェクト デフォルトの色 軸の背景の周りの枠線。 指定可能な値は、backgroundColor 構成オプションの値です。
axisFontSize 数値 自動 グラフの軸のテキストのフォントサイズ（ピクセル単位）。
backgroundColor 文字列またはオブジェクト デフォルトの色 グラフのメイン領域の背景色。 次のいずれかのオプションを指定できます。
  • HTML でサポートされている色の文字列（「red」、「#00cc00」など）
  • stroke fill プロパティと strokeSize プロパティを持つオブジェクト。 stroke と fill は色の文字列です。drawSize は数値です。例: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}ストロークなしで塗りつぶしのみを使用するには、stroke:null, strokeSize: 0 を使用します。
borderColor 文字列またはオブジェクト デフォルトの色 グラフ要素の枠線。指定可能な値は、backgroundColor 構成オプションの値です。
色 文字列の配列 デフォルトの色 グラフの要素に使用する色。文字列の配列。各要素は、HTML でサポートされている色の文字列です（「red」や「#00cc00」など）。
enableTooltip boolean true true に設定した場合、ユーザーがデータポイントをクリックするとツールチップが表示されます。
focusBorderColor 文字列またはオブジェクト デフォルトの色 フォーカスされている（マウスでポイントされている）グラフ要素の周りの枠線。指定可能な値は、backgroundColor 構成オプションの値です。
身長 数値 コンテナの高さ グラフの高さ（ピクセル単位）。
isStacked boolean false true に設定した場合、線の値は積み上げ（累積）されます。
凡例 string '右' 凡例の位置とタイプ。次のいずれかです
  • 「right」 - グラフの右側
  • 「left」 - グラフの左側。
  • 「top」 - グラフの上部。
  • 「Bottom」 - グラフの下。
  • 「none」 - 凡例は表示されません。
legendBackgroundColor 文字列またはオブジェクト デフォルトの色 グラフの凡例領域の背景色。指定可能な値は、backgroundColor 構成オプションの値です。
legendFontSize 数値 自動 凡例のフォントのサイズ（ピクセル単位）。
legendTextColor 文字列またはオブジェクト デフォルトの色 凡例のテキストの色。 指定可能な値は、backgroundColor 構成オプションの値です。
lineSize 数値 2 線の幅（ピクセル単位）。すべての線を非表示にしてポイントのみを表示するには、ゼロを使用します。
logScale boolean false true の場合、主軸は対数的にスケーリングされます。
max 数値 自動 Y 軸の最上位のグリッド線を指定します。実際のグリッド線は、最大オプション値または最大データ値の 2 つの値のうち大きい方となり、次に高いグリッドマークに切り上げられます。
分 数値 自動 Y 軸の最下層のグリッド線を指定します。実際のグリッド線は、2 つの値（最小値のオプション値またはデータ値の最小値）のうち小さい方の値となり、その下のグリッドのマークまで切り捨てられます。
pointSize 数値 3 表示されるポイントのサイズ（ピクセル単位）。すべてのポイントを非表示にするには、ゼロを使用します。
reverseAxis boolean false true に設定した場合、カテゴリは右から左に描画されます。デフォルトでは左から右に描画されます。
showCategories boolean true true の場合、カテゴリラベルが表示されます。false の場合、動作しません。
title string タイトルなし グラフの上部に表示するテキストです。
titleX string タイトルなし 横軸の下に表示するテキスト。
titleY string タイトルなし 縦軸に表示するテキスト。
titleColor 文字列またはオブジェクト デフォルトの色 グラフのタイトルの色。指定可能な値は、backgroundColor 構成オプションの値です。
titleFontSize 数値 自動 グラフのタイトルのフォントサイズ（ピクセル単位）。

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

メソッド

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

イベント

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

データポリシー

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