line.js を改造して垂直補助線を描けるようにする。
プロ野球順位変動グラフ（パ / セ）のページで、折れ線グラフを表示するのに html5jp の『折れ線グラフ line.js』という JavaScriptライブラリを使っています。
とってもシンプルで、パラメータを設定してやればかなり柔軟なカスタマイズもできるので重宝しているのだけれど、x軸目盛りにあわせて垂直補助線を引く機能がない。
これは不便。
ということで、垂直補助線を描画する機能を追加してみた。どこをどう弄ったか忘れてしまうとマズいのでメモメモ。幸い line.js には垂直線を描画する内部関数が定義されているので、改造は最小限で済みます。
ダウンロード → line1_0_2mod.js.zip
解凍したら現れる line.js を、本家オリジナル版の line.js と入れ替えてやればOK。オリジナル版に同梱されている ExplorerCanvas は含まれていないのでご了承ください。
垂直補助線の色などをカスタマイズしたいときは、本家版と同様に、draw() を呼ぶときに渡すパラメータで、vLineWidth、vLineType、vLineColor の値を指定してやれば大丈夫です。指定方法などについては html5jpのリファレンス を参考にしてみてください。
とってもシンプルで、パラメータを設定してやればかなり柔軟なカスタマイズもできるので重宝しているのだけれど、x軸目盛りにあわせて垂直補助線を引く機能がない。
これは不便。
ということで、垂直補助線を描画する機能を追加してみた。どこをどう弄ったか忘れてしまうとマズいのでメモメモ。幸い line.js には垂直線を描画する内部関数が定義されているので、改造は最小限で済みます。
まずは、line.js のソース 50行め あたりからの var params = { ..... } ; に、
vLineWidth : 2 ,
vLineType : "dashed" ,
vLineColor : "#aaaaaa" ,
という値を追加。それぞれ垂直補助線の太さ、線種、色の初期値となります。
続いて、/* x軸の目盛文字列を描画 */ というコメントが付いた場所の forループ の中身を弄ります。x軸の各目盛文字列のセンターの(Canvas上の)x座標が欲しいので、xscale_center なる変数を追加。xscale_x を算出している前後あたりに以下を記述します。
var xscale_center = Math.round( cpos.x0 + cpos.w * ( i - 0.5 ) / max_n );
あとは、( xscale_center , グラフ描画領域の最下部のy座標 ) から ( xscale_center , グラフ描画領域の最上部のy座標 ) まで線を引っぱれば良いのです。
最下部のy座標は cpos.y0、最上部のy座標は cpos.y1 にそれぞれ保存されているので、これらの変数を、垂直線を引っぱるための関数に与えてやれば良い。この forループ内に以下の記述を追加。
this._draw_v_aline(xscale_center, cpos.y0, cpos.y1, params.vLineWidth, params.vLineType, params.vLineColor);
これだけ。
…なのだけれど、これだけだと描画の順序の関係で、垂直補助線が折れ線グラフ本体より上に引かれてしまって体裁が悪い。
なので、/* x軸の目盛文字列を描画 */ の forループブロックを、/* 水平補助線 */ というコメントのついたブロックの直後あたりへ移動させます。
はい出来上がり。
改変版のソースコードをダウンロードしたい人は以下からどうぞ。vLineWidth : 2 ,
vLineType : "dashed" ,
vLineColor : "#aaaaaa" ,
という値を追加。それぞれ垂直補助線の太さ、線種、色の初期値となります。
続いて、/* x軸の目盛文字列を描画 */ というコメントが付いた場所の forループ の中身を弄ります。x軸の各目盛文字列のセンターの(Canvas上の)x座標が欲しいので、xscale_center なる変数を追加。xscale_x を算出している前後あたりに以下を記述します。
var xscale_center = Math.round( cpos.x0 + cpos.w * ( i - 0.5 ) / max_n );
あとは、( xscale_center , グラフ描画領域の最下部のy座標 ) から ( xscale_center , グラフ描画領域の最上部のy座標 ) まで線を引っぱれば良いのです。
最下部のy座標は cpos.y0、最上部のy座標は cpos.y1 にそれぞれ保存されているので、これらの変数を、垂直線を引っぱるための関数に与えてやれば良い。この forループ内に以下の記述を追加。
this._draw_v_aline(xscale_center, cpos.y0, cpos.y1, params.vLineWidth, params.vLineType, params.vLineColor);
これだけ。
…なのだけれど、これだけだと描画の順序の関係で、垂直補助線が折れ線グラフ本体より上に引かれてしまって体裁が悪い。
なので、/* x軸の目盛文字列を描画 */ の forループブロックを、/* 水平補助線 */ というコメントのついたブロックの直後あたりへ移動させます。
はい出来上がり。
ダウンロード → line1_0_2mod.js.zip
解凍したら現れる line.js を、本家オリジナル版の line.js と入れ替えてやればOK。オリジナル版に同梱されている ExplorerCanvas は含まれていないのでご了承ください。
垂直補助線の色などをカスタマイズしたいときは、本家版と同様に、draw() を呼ぶときに渡すパラメータで、vLineWidth、vLineType、vLineColor の値を指定してやれば大丈夫です。指定方法などについては html5jpのリファレンス を参考にしてみてください。
コメント