折線グラフ

商品Aと商品Bの曜日ごとの注文数を表した折れ線グラフが描かれています。横軸は日~金までの曜日を表し、縦軸は注文数を表しています。グラフの右には凡例があります。

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

ダウンロード

Release Date Size (byte) Download
1.0.2 2009-04-10 120,724 glaph_line_1_0_2.zip

使い方

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

折線グラフ サンプル 2

オプションリファレンス

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

オプションプロパティ一覧
プロパティ 初期値 説明
x [] x軸の名称とx軸の項目名を配列としてセットすることで、グラフ上にそれらが表示されます。配列の最初の要素にx軸の名称を、それ以降に折れ線の点に相当する項目名をセットします。
例:["曜日", "日", "月", "火", "水", "木", "金", "土"]
y [] y軸の名称と水平補助線の位置を配列としてセットすることで、グラフ上にそれらが表示されます。配列の最初の要素にy軸の名称を、それ以降に水平補助線を描きたい位置の値(数値)をセットします。
例:["注文数(個)", 0, 20, 40, 60, 80, 100]
yMax null y軸の最大値を表します。指定がなければ、指定された項目の値の最大値をもとに自動算出されます。もしグラフのレンジを指定したい場合は、yMaxプロパティに最大値を、yMinプロパティに最小値セットしてください。yMaxプロパティ、yMinプロパティいずれも、マイナスの値をセットすることも可能です。
yMin 0 y軸の最小値を表します。指定がなければ、0 とみなされます。もしグラフのレンジを指定したい場合は、yMaxプロパティに最大値を、yMinプロパティに最小値セットしてください。yMaxプロパティ、yMinプロパティいずれも、マイナスの値をセットすることも可能です。
backgroundColor "#ffffff" canvas全体の背景色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
gbackgroundColor "#dddddd" グラフ表示領域の背景色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
gGradation true trueを指定すると、グラフ表示領域の背景が上方から下方に向けて白色に変化するようグラデーション表示されます。falseを指定すると、グラデーション効果が無効になります。
lineWidth 1 折れ線の太さを表します。
もし 折れ線の組ごとに太さを指定したい場合は、[1,2] といった具合に配列を指定してください。
dotRadius 3 折れ線上に表示される点の半径を表します。0 を指定すると点は表示されません。点を表示する場合は、3 以上の数値を指定してください。
もし 折れ線の組ごとに点のサイズを指定したい場合は、[3,4] といった具合に配列を指定してください。
dotType "disc" 折れ線上に表示される点の形状を表します。指定可能な形状は、"disc" (円形)、"square"(四角形)、"triangle"(三角形)、"i-triangle"(逆三角形)、"diamond"(菱型)のいずれかです。
もし 折れ線の組ごとに点のサイズを指定したい場合は、["disc", "square"] といった具合に配列を指定してください。
hLineWidth 2 水平補助線の太さを表します。1 以上の数字を指定してください。
hLineType "dotted" 水平補助線の線種を表します。指定可能な形状は、"solid"(直線)、"dashed"(破線)、"dotted"(点線)のいずれかです。ただし、"dotted"(点線)を指定しても、hLineWidthプロパティ(水平補助線の太さ)の値が 2 未満の場合は、"dashed"(破線)として処理されます。
hLineColor "#aaaaaa" 水平補助線の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
xAxisWidth 2 x軸の線の太さを表します。0 以上の数字を指定してください。0 を指定するとx軸の線は表示されません。
xAxisColor "#000000" x軸の線の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
yAxisWidth 2 y軸の線の太さを表します。0 以上の数字を指定してください。0 を指定するとy軸の線は表示されません。
yAxisColor "#000000" y軸の線の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
xScaleColor "#000000" x軸の目盛文字の色を表します。"#ffffff", "rgb(0,0,0)", "white" のいずれかのフォーマットで指定してください。
xScaleFontSize "10px" x軸の目盛文字のフォントサイズを表します。CSSのfont-sizeで指定可能な文字サイズフォーマットで指定してください。
xScaleFontFamily "Arial,sans-serif" x軸の目盛文字の文字フォントを表します。CSSのfont-familyで指定可能なフォント名を指定してください。
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で指定可能なフォント名を指定してください。
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)

バージョンアップ履歴

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-2012 futomi http://www.html5.jp/

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

謝辞

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