ダウンロード

使い方

graph_line_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/line.js"></script>
<script type="text/javascript">
window.onload = function() {
  var lg = new html5jp.graph.line("sample");
  if( ! lg ) { return; }
  var items = [
    ["商品A", 20, 58, 40, 14, 38, 20, 40],
    ["商品B", 10, 14, 58, 80, 70, 90, 20]
  ];
  lg.draw(items);
};
</script>

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

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

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

var lg = new html5jp.graph.line("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]
];

この例では、2組の折線を表示することになります。最低1組は定義してください。また、最大10組まで定義することができます。項目を定義したら、下記のように折線グラフを描画するメソッドを実行します。

lg.draw(items);

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

描画の仕様

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

• 描画可能な折線は最大10組です。10個を超えた組を指定しても無視されます。
• 通常、y軸の値のグラフ表示レンジは自動的に算出されます。この自動算出モードの場合、グラフ領域の底辺の値は、セットされた項目値にかかわらず、固定的に 0 となります。また、グラフ領域の頂点の値は、セットされた値の最大値に若干のマージンを取った値になります。（オプション指定によってレンジを明示的に指定することが可能です。）
• canvas要素の横幅が縦幅の1.5倍未満、または縦幅が200未満であれば凡例は強制的に非表示となります。

グラフのカスタマイズ

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

window.onload = function() {
  var lg = new html5jp.graph.line("sample");
  if( ! lg ) { return; }
  var items = [
    ["商品A", 20, 58, 40, 14, 38, 20, 40],
    ["商品B", 10, 14, 58, 80, 70, 90, 20]
  ];
  var params = {
    x: ["曜日", "日", "月", "火", "水", "木", "金", "土"],
    y: ["注文数(個)", 0, 20, 40, 60, 80, 100],
    yMax: 100,
    yMin: 0,
    lineWidth: [1,2],
    dotRadius: [3,4],
    dotType: ["disc", "square"]
  };
  lg.draw(items, params);
};

オブジェクト params に注目してください。paramsに必要なプロパティをセットし、lg.drawメソッドの第二引数にparamsを指定すると、それに応じた折線グラフが描画されます。オプションをセットしたオブジェクト params のプロパティをひとつずつ見ていきましょう。

プロパティ x は、x軸に表示させたい項目名称の配列です。1番目はx軸の意味を表す文字列を、それ以降は各値に対応した名称となります。各値に対応した名称は、itemsにセットした値の数と同じにして下さい。

プロパティ y は、y軸に表示させたい値の配列です。1番目はy軸の意味を表す文字列を、それ以降は、水平補助線を描くy軸の数値をセットします。

プロパティ yMax は、y軸の最大値を表します。指定がなければ、セットされた項目の値の最大値を自動算出してマージンを加えた値で処理されますが、もし明示的に指定したい場合は、yMax に最大値を指定します。

プロパティ yMin は、y軸の最小値を表します。指定がなければ、0 で処理されます。

プロパティ lineWidth は、折れ線の太さを表します。指定がなければ、すべての線が同じ太さで描かれますが、折れ線の組によって太さを変えたい場合は、それぞれの太さを記述した配列をセットします。

プロパティ dotRadius は、折れ線上の点の半径を表します。指定がなければ、すべての折線の組で同じサイズの点が描画されますが、折れ線の組によって点のサイズを変更したい場合は、それぞれの半径を記述した配列をセットします。

プロパティ dotType は、折れ線上の点の形状を表します。指定可能な形状は、後述のオプションリファレンスを参照してください。

上記スクリプトが実行されると、canvas要素には次のようなグラフが描画されます。[実際のサンプルを見る]

オプションリファレンス

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

折線グラフに描画される各組の折れ線の色は下表の通りです。なお、現バージョンでは各組の折れ線の色を個別に指定することはできません。

バージョンアップ履歴

2009-04-10 ver 1.0.1 → ver 1.0.2

• Shift_JISで作成されたページでJavaScriptエラーになる問題を改修。

2009-03-25 ver 1.0.0 → ver 1.0.1

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

2007-10-09

• ver 1.0.0 リリース

著作権・謝辞

著作権

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

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

謝辞

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