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

非推奨

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

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

概要

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:["barchart"]});
      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.BarChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Company Performance'});
      }
    </script>
  </head>

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

読み込み中

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

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

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

  var visualization = new google.visualization.BarChart(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 設定値です。
色 文字列またはオブジェクトの配列 デフォルトの色

色の配列。各要素は 1 つの系列の色を指定します。系列ごとに 1 つの配列要素を指定する必要があります。

  • is3D=false の場合、これは HTML 色の配列です。例: color:['#00FF00','orange']
  • is3D=true の場合、これは HTML 色の配列、または {color:face_color, darker:shade_color} 型のオブジェクトの配列です。color は要素の顔の色、darker はシェードの色です。ただし、3D オブジェクトに HTML カラーを指定すると、顔とシェードは同じ色になり、3D の効果は軽減されます。例: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
enableTooltip boolean true true に設定すると、ユーザーがバーをクリックするとツールチップが表示されます。
focusBorderColor 文字列またはオブジェクト デフォルトの色 フォーカスされているグラフ要素の周りの枠線（マウス操作）。指定可能な値は、backgroundColor 設定値です。
高さ 数値 コンテナの高さ グラフの高さ（ピクセル単位）
is3D boolean false true に設定すると、3 次元の変化が表示されます。
isStacked boolean false true に設定すると、行の値はスタックされます（累積）。
凡例 文字列 「右」 凡例の位置と種類。次のいずれかです
  • 「右」- グラフの右側。
  • 「left」- グラフの左側です。
  • top - グラフの上部。
  • 「bottom」 - グラフの下。
  • 'none' - 凡例は表示されません。
凡例の背景の色 文字列またはオブジェクト デフォルトの色 グラフの凡例の領域の背景色。 指定可能な値は、backgroundColor 設定値です。
凡例フォントサイズ 数値 自動前処理と 凡例のフォントサイズ（ピクセル単位）です。
凡例のテキスト色 文字列またはオブジェクト デフォルトの色 凡例のテキストの色。指定可能な値は、backgroundColor 設定値です。
対数目盛 boolean false true の場合、メイン軸は対数でスケーリングする必要があります。
最高 数値 自動前処理と 最も高い Y 軸のグリッド線を指定します。実際のグリッド線は、2 つの値（最大値のオプション値、または次に高いデータ値に切り上げられる最大のデータ値）のうち大きい方になります。
分 数値 自動前処理と 最も低い Y 軸のグリッド線を指定します。実際のグリッド線は、最小値（最小値）またはデータの値（最小値）の 2 つの値のうち、次に低い値に切り捨てられます。
verseAxis boolean true true（デフォルト）に設定すると、カテゴリは真上から描画されます。false に設定すると、バーが下に表示されます。
番組のカテゴリ 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() を呼び出します。 なし

データポリシー

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