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

非推奨

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

  1. Overview
  2. 例
  3. 読み込んでいます
  4. データ形式
  5. 構成オプション
  6. メソッド
  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:["columnchart"]});
      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.ColumnChart(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 パッケージ名は "columnchart" です。 

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

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

  var visualization = new google.visualization.ColumnChart(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 構成オプションの値です。
色 文字列またはオブジェクトの配列 デフォルトの色

色の配列。各要素は 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 に設定した場合、線の値は積み上げ（累積）されます。
凡例 string '右' 凡例の位置とタイプ。次のいずれかです
  • 「right」 - グラフの右側
  • 「left」 - グラフの左側。
  • 「top」 - グラフの上部。
  • 「Bottom」 - グラフの下。
  • 「none」 - 凡例は表示されません。
legendBackgroundColor 文字列またはオブジェクト デフォルトの色 グラフの凡例領域の背景色。指定可能な値は、backgroundColor 構成オプションの値です。
legendFontSize 数値 自動 凡例のフォントのサイズ（ピクセル単位）。
legendTextColor 文字列またはオブジェクト デフォルトの色 凡例のテキスト エントリの色。 指定可能な値は、backgroundColor 構成オプションの値です。
logScale boolean false true の場合、主軸は対数的にスケーリングされます。
max 数値 自動 Y 軸の最上位のグリッド線を指定します。実際のグリッド線は、最大オプション値または最大データ値の 2 つの値のうち大きい方となり、次に高いグリッドマークに切り上げられます。
分 数値 自動 Y 軸の最下層のグリッド線を指定します。実際のグリッド線は、2 つの値（最小値のオプション値またはデータ値の最小値）のうち小さい方の値となり、その下の方のグリッドのマークまで切り捨てられます。
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() を呼び出します。 なし

データポリシー

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