棒グラフ（垂直） サンプル 1 - jsライブラリ - HTML5.JP

-

使い方

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要素には次のような棒グラフが描画されます。[実際のサンプルを見る]

なお、上の図は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 : 円柱

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

flat : 平坦（影あり）

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

line : 平坦（影なし）

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

オプションリファレンス

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

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

バージョンアップ方法

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

• 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) が同梱されています。