棒グラフ(垂直)

垂直棒グラフが描かれています。横軸は曜日を、縦軸は商品の注文数を表しています。商品はA~Eまで5つあり、グラフの各垂直棒は、それぞれの商品の注文数が色を分けて積み上げられています。グラフの右側には、凡例が描かれています。

JavaScriptから棒グラフ(垂直)をcanvas要素に描画します。パラメータを指定することで、項目、色、凡例表示などお好みの棒グラフ(垂直)を柔軟に描画できます。

ダウンロード

Release Date Size (byte) Download
1.0.4 2010-01-15 130,761 graph_vbar_1_0_4.zip

使い方

graph_vbar_x_x_x.zipを解凍し、html5jpフォルダをウェブサーバにそのままアップロードしてください。グラフを表示させたいHTMLには次のタグを記述してください。

<div><canvas width="400" height="300" id="sample"></canvas></div>

上記タグは次の点に注意してください。

  • canvas要素は、必ずdiv要素で囲んでください。
  • canvas要素には、必ずwidth属性とheight属性を記述し、幅と高さを指定してください。
  • canvas要素には、必ずid属性を記述してください。

HTMLのhead要素内に、次のJavaScriptコードを記述してください。

<!--[if IE]><script type="text/javascript" src="../html5jp/excanvas/excanvas.js"></script><![endif]-->
<script type="text/javascript" src="../html5jp/graph/vbar.js"></script>
<script type="text/javascript">
window.onload = function() {
  var g = new html5jp.graph.vbar("sample");
  if( ! g ) { return; }
  var items = [
    ["商品A", 20, 58, 40, 14, 38, 20, 40],
    ["商品B", 10, 14, 58, 80, 70, 90, 20],
    ["商品C", 10, 14, 58, 80, 70, 90, 20],
    ["商品D", 10, 14, 58, 80, 70, 90, 20],
    ["商品E", 10, 14, 58, 80, 70, 90, 20]
  ];
  var params = {
    x: ["曜日", "日", "月", "火", "水", "木", "金", "土"],
    y: ["注文数(個)"]
  };
  g.draw(items, params);
};
</script>

前述のサンプルは、html5jpフォルダが一階層上に存在しているものとしてscript要素のsrc属性を指定していますが、html5jpフォルダはどこに設置しても構いません。html5jpフォルダの設置場所に合わせて、最初の2つのscript要素のsrc属性を書き換えてください。

グラフ描画処理は、前述の2つのjsファイルをロードした後に、script要素内に記述します。グラフ描画処理は、jsファイルとしてHTMLファイルと分離しても構いません。しかし、サンプルのように、onloadイベントハンドラを使うなどして、ブラウザがHTMLを読み込んでから処理が実行されるようにしてください。

グラフ描画処理では、まず最初に折線グラフ描画オブジェクトを生成します。

var g = new html5jp.graph.radar("sample");

引数にはcanvas要素にセットされたid属性値を指定してください。もし、指定したid属性値を持つcanvas要素が見つからなかったり、canvas要素がdiv要素で囲まれていない場合は、何も返されません。

次に、グラフに描画したい項目をセットした配列を生成します。下記のように、各項目は、項目名と数値を格納した配列として定義します。

  var items = [
    ["商品A", 20, 58, 40, 14, 38, 20, 40],
    ["商品B", 10, 14, 58, 80, 70, 90, 20],
    ["商品C", 10, 14, 58, 80, 70, 90, 20],
    ["商品D", 10, 14, 58, 80, 70, 90, 20],
    ["商品E", 10, 14, 58, 80, 70, 90, 20]
  ];

この例では、5組の棒グラフを積み上げで表示することになります。最低1組は定義してください。また、最大10組まで定義することができます。

次に、xプロパティとyプロパティを持ったparamsオブジェクトを生成します。xプロパティには、x軸(横軸)の指標を配列として定義します。yプロパティにはy軸(縦軸)の指標を配列として定義します。いずれのプロパティも、最初の要素は、軸の意味を説明するワードを表し、2番目以降の要素からは、軸上に表示する目盛ラベルを表します。y軸のデータラベルに関しては、自動算出されますので、指定する必要はありません。しかし、明示的にラベルの位置を指定したい場合は、それに該当する数値を指定してください。

  var params = {
    x: ["曜日", "日", "月", "火", "水", "木", "金", "土"],
    y: ["注文数(個)"]
  };

以上のように、項目を定義したら、下記のように棒グラフを描画するメソッドを実行します。

g.draw(items, params);

g.drawメソッドには、先ほど定義した項目の配列を第一引数に、オプションパラメータを定義したオブジェクトを第二引数にセットします。上記スクリプトが実行されると、canvas要素には次のような棒グラフが描画されます。[実際のサンプルを見る]

棒グラフ(垂直) サンプル 1

なお、上の図はFirefox 2.0で表示された結果をキャプチャーしたものですが、Internet Explorerの場合は、グラデーション効果が若干異なります。以降で紹介する他のグラフ形状においても同様となりますので、ご了承ください。

描画の仕様

グラフは、以下の条件に基づいて描画されます。

  • 描画可能なデータセットは最大10組です。10個を超えた組を指定しても無視されます。
  • x軸の項目数に上限はありませんが、棒の幅が小さくなった場合は、たとえ角柱・円柱などを指定したとしても、線として表現されます。
  • y軸の値の表示レンジと補助線の位置は自動的に算出されます。この自動算出モードの場合、y軸の底の値は、セットされた項目値にかかわらず、固定的に 0 となります。また、y軸の頂点の値は、セットされた値の最大値に若干のマージンを加えた値になります。(オプション指定によってレンジを明示的に指定することが可能です。)
  • 補助線が自動的に引かれますが、データラベルの間隔は5つを超えないよう自動的に算出されます。(オプション指定によって補助線の値を明示的に指定することが可能です。)
  • canvas要素の横幅が縦幅の1.5倍未満、または縦幅が200未満であれば凡例は強制的に非表示となります。

棒フラフのカスタマイズ

棒グラフの描画は、さまざまなオプションを指定することでカスタマイズすることができます。良く使うオプションの使い方を見ていきましょう。次のサンプルコードをご覧ください。

  var params = {
    x: ["曜日", "日", "月", "火", "水", "木", "金", "土"],
    y: ["注文数(個)"],
    barShape: "cylinder"
  };

オブジェクト params に注目してください。barShapeというプロパティが新たに追加されています。これは棒グラフの形状を指定するプロパティです。指定可能な値は、次のいずれかです。

  • square : 角柱(デフォルト)
  • cylinder : 円柱
  • flat : 平坦(影あり)
  • line : 平坦(影なし)

cylinder (円柱)以降の結果は次のようになります。

cylinder : 円柱

cylinder 円柱

[実際のサンプルを見る]

flat : 平坦(影あり)

flat 平坦(影あり)

[実際のサンプルを見る]

line : 平坦(影なし)

line : 平坦(影なし)

[実際のサンプルを見る]

オプションリファレンス

g.drawメソッドの第二引数に指定する params オブジェクトにセットできるプロパティは下表の通りです。

オプションプロパティ一覧
プロパティ 初期値 説明
x [] x軸の名称とx軸の項目名を配列としてセットすることで、グラフ上にそれらが表示されます。配列の最初の要素にx軸の名称を、それ以降に目盛ラベルに相当する項目名をセットします。
例:["曜日", "日", "月", "火", "水", "木", "金", "土"]
y [] y軸の名称と水平補助線の位置を配列としてセットすることで、グラフ上にそれらが表示されます。配列の最初の要素にy軸の名称を、それ以降に水平補助線を描きたい位置の値(数値)をセットします。水平補助線の位置には、y軸左側に数値が目盛ラベルとして表示されます。
例:["注文数(個)", 0, 20, 40, 60, 80, 100]
yMax null y軸の最大値を表します。指定がなければ、項目の値の最大値に若干のマージンを加えた値が適用されます。もし軸のレンジを指定したい場合は、yMaxプロパティに最大値をセットしてください。ただし、グラフに表示すべきデータの最大値より小さい値をセットした場合は、無効となります。この場合は、グラフに表示すべきデータの最大値がyMaxとしてセットされます。
backgroundColor "#ffffff" canvas全体の背景色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
gBackgroundColor "#dddddd" グラフ表示領域の背景色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
gGradation true trueをセットすると、グラフ背景にうっすらとしたグラデーション効果が得られます。ただし、Internet Explorerの場合は、他のブラウザーと比べグラデーション効果が若干異なります。falseを指定すると無効になります。
barShape "square" 棒グラフの形状を表します。"square"(角柱)、"cylinder"(円中)、"flat"(平坦影あり)、"line"(平坦影なし)のいずれかを指定してください。
barColors null 棒グラフに表示する各組の面の色を個別に指定することができます。指定する場合は、配列をセットしてください。
例:["green", "olive"]
barGradation true trueをセットすると、棒グラフの棒のにうっすらとしたグラデーション効果が得られます。ただし、Internet Explorerの場合は、他のブラウザーと比べグラデーション効果が若干異なります。falseを指定すると無効になります。
barAlpha 0.7 棒の透明度を表します。0(完全に透明)から 1(不透明)の間の数値を指定してください。
borderAlpha 0.2 棒の境界線の透明度を表します。0(完全に透明)から 1(不透明)の間の数値を指定してください。
xAxisColor "#aaaaaa" x軸の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
xAxisWidth 1 x軸の太さを表します。0 以上の数字を指定してください。0 を指定するとX軸の線は表示されません。
yAxisColor "#aaaaaa" y軸の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
yAxisWidth 1 Y軸の太さを表します。0 以上の数字を指定してください。0 を指定するとX軸の線は表示されません。
xScale true trueを指定するとx軸に目盛文字を表示します。falseを指定すると、非表示になります。
xScaleColor "#000000" x軸の目盛文字の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
xScaleFontSize "10px" x軸の目盛文字のフォントサイズを表します。CSSのfont-sizeで指定可能な文字サイズフォーマットで指定してください。
xScaleFontFamily "Arial,sans-serif" x軸の目盛文字の文字フォントを表します。CSSのfont-familyで指定可能なフォント名を指定してください。
yScale true trueを指定するとy軸に目盛文字を表示します。falseを指定すると、非表示になります。
yScaleColor "#000000" y軸の目盛数値の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
yScaleFontSize "10px" y軸の目盛数値のフォントサイズを表します。CSSのfont-sizeで指定可能な文字サイズフォーマットで指定してください。
yScaleFontFamily "Arial,sans-serif" y軸の目盛数値の文字フォントを表します。CSSのfont-familyで指定可能なフォント名を指定してください。
xCaptionColor "#000000" x軸名称の文字色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
xCaptionFontSize "12px" x軸名称の文字サイズを表します。CSSのfont-sizeで指定可能な文字サイズフォーマットで指定してください。
xCaptionFontFamily "Arial,sans-serif" x軸名称の文字フォントを表します。CSSのfont-familyで指定可能なフォント名を指定してください。
yCaptionColor "#000000" y軸名称の文字色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
yCaptionFontSize "12px" y軸名称の文字サイズを表します。CSSのfont-sizeで指定可能な文字サイズフォーマットで指定してください。
yCaptionFontFamily "Arial,sans-serif" y軸名称の文字フォントを表します。CSSのfont-familyで指定可能なフォント名を指定してください。
aLineWidth 1 補助線の太さを表します。0 以上の数字を指定してください。0 を指定すると補助線は表示されません。
aLineAlpha 0.2 補助線の透明度を表します。0(完全に透明)から 1(不透明)の間の数値を指定してください。
dLabel true trueを指定すると、スケールラベル(数値)が棒の上に表示されます。falseを指定すると、非表示になります。
dLabelColor "#000000" 棒の上に表示されるスケールラベル(数値)の文字色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
dLabelFontSize "10px" 棒の上に表示されるスケールラベル(数値)の文字サイズを表します。CSSのfont-sizeで指定可能な文字サイズフォーマットで指定してください。
dLabelFontFamily "Arial,sans-serif" 棒の上に表示されるスケールラベル(数値)の文字フォントを表します。CSSのfont-familyで指定可能なフォント名を指定してください。
legend true trueを指定すると、凡例が表示されます。falseを指定すると非表示になります。ただし、canvas要素の横幅が縦幅の1.5倍未満、または縦幅が200未満であれば凡例は強制的に非表示となります。
legendFontSize "12px" 凡例の文字サイズを表します。CSSのfont-sizeで指定可能な文字サイズフォーマットで指定してください。
legendFontFamily "Arial,sans-serif" 凡例の文字のフォントを表します。CSSのfont-familyで指定可能なフォント名を指定してください。
legendColor "#000000" 凡例の文字色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。

グラフに描画される各組の棒の色のデフォルト値は下表の通りです。

棒表示色初期値一覧
項目 初期値
01
 
rgb(24,41,206)
02
 
rgb(198,0,148)
03
 
rgb(214,0,0)
04
 
rgb(255,156,0)
05
 
rgb(33,156,0)
06
 
rgb(33,41,107)
07
 
rgb(115,0,90)
08
 
rgb(132,0,0)
09
 
rgb(165,99,0)
10
 
rgb(24,123,0)

バージョンアップ方法

旧バージョンをご利用の方は、以下のファイルを上書きして下さい。

  • html5jp/graph/vbar.js
  • html5jp/excanvas/excanvas.js

バージョンアップ履歴

2010-01-15 ver 1.0.3 → ver 1.0.4

  • パラメータを変更して draw() メソッドを再度呼び出しても、グラフが正しく再描画されるよう改良。

2009-05-03 ver 1.0.2 → ver 1.0.3

  • すべての値が0の場合にJavaScriptエラーになる不具合を改修。

2009-03-25 ver 1.0.1 → ver 1.0.2

  • IE6で標準モードでレンダリングされるページに本ライブラリーを組み込んだ場合、グラフの表示がずれてしまう不具合を改修。
  • ExplorerCanvas Release 3がリリースされたとことに伴い、本ライブラリーに同梱されているExplorerCanvasもRelease 3に更新した。これに伴い、IE8標準モードでもグラフが表示されるようになった。また、IEでもグラデーションが表現できるようになった。

2007-12-17 ver 1.0.0 → ver 1.0.1

  • IEでもグラデーション効果が得られるよう改良した。(excanvas.jsを改造した。)
  • x軸の最後の項目の値が最も大きい数値の場合、その項目がグラフ領域からはみ出してしまう不具合を改修した。
  • UTF-8以外の文字コードのHTMLで本スクリプトを利用するとJavaScriptエラーになってしまう不具合を改修した。

2007-10-17

  • ver 1.0.0 リリース

著作権・謝辞

著作権

Copyright 2007 futomi http://www.html5.jp/

当サイトのJavaScriptライブラリは、Apache License, Version 2.0 のもとに配布します。

謝辞

当サイトにて配布するJavaScriptライブラリには、Internet Explorerでも利用できるようにするため、ExplorerCanvas (excanvas.js) が同梱されています。