JavaScriptで折れ線グラフ。

折れ線グラフを描いてみようと思って、いろいろ弄ってみた。HTML5.JPで配布されている『折れ線グラフ』というスクリプトをカスタマイズ。

出来たページはコチラ → パ・リーグ順位変動グラフ / セ・リーグ順位変動グラフ

canvas要素内にJavaScriptで折れ線グラフを表示します。スクリプトの設置方法とかパラメータの設定方法などは元のページに詳しく書かれているので省略。

さて、JavaScriptで面倒なのが IEへの対処方法。

Internet Explorer 8 以前のバージョンでは canvas要素に対応していないので、この『折れ線グラフ』では、パッケージに同梱されているExplorerCanvasというスクリプトを間に噛ませて IEにも対応させています。

説明にも書かれているとおり、htmlのヘッダ部分に

<!--[if IE]><script type="text/javascript" src="path_to/excanvas/excanvas.js"></script><![endif]-->

と記述してやれば、IEでアクセスしたときにだけ excanvas.js が読み込まれて、仕事をしてくれます。このパッケージには、ファイルサイズを小さくした excanvas.compiled.js というファイルも含まれているので、そちらを読み込む設定にしたほうが良いかも。

で、IE 9。

ちょっと今、手元に IE 9 を動かせる環境が無いので、IE9がどこまで canvas要素に対応しているのか把握していないのですが、もし完全に動くよ! ということならば、IE 9未満のバージョンの時だけ excanvas.js を読み込む設定に変えてしまいましょう。

<!--[if lt IE 9]> 〜 <![endif]-->


そして、折れ線グラフ描画スクリプト本体( line.js )も弄ってみる。オリジナルスクリプトではグラフの線の色を変えることができないので、そこを変えてみます。

線色を設定しているのは、line.js の 212行めあたり。

var colors = ["24,41,206", "198,0,148", "214,0,0", "255,156,0", "33,156,0", "33,41,107", "115,0,90", "132,0,0", "165,99,0", "24,123,0"];

10個の要素が、それぞれ 1本めのグラフ、2本めのグラフ… に対応しています。値は RGB。

　　→ Color converter : 色の8進数表記( #ffffff など)と RGB表記を相互変換

もう恒久的に色を変えてしまいたいのだったら、この部分を直接書き換えてしまえば良いし、その時々に応じて色を設定したいのならば、ラインの色を設定するためのパラメータを渡す仕様に変更してしまえば良いのです。

例えば line.js の212行めあたりを、

if( params.gLineColors ){
  var colors = params.gLineColors ; /* カスタマイズ */
}else{
  var colors = ["24,41,206", "198,0,148", "214,0,0", "255,156,0", "33,156,0", "33,41,107", "115,0,90", "132,0,0", "165,99,0", "24,123,0"]; /* デフォルト */
}

な感じに書き換えて、色の変更をしたいときにはグラフ描画の際に設定するパラメータリストに、

var params = {
  その他のさまざまなパラメータ ...,
  gLineColors :  ["255,156,0", "40,120,210", "0,0,0", "0,40,200", "80,80,80", "200,0,0", "115,0,90", "132,0,0", "165,99,0", "24,123,0"]
};

てな具合に、新しく定義したパラメータ gLineColors を追加してやれば良いですね。

カテゴリ:

タグ: