Sparklineグラフを表示するJavaScript (sparkline.js)

2007年6月4日(月) 09:00

sparkline.js
SparklineグラフをJavaScriptで動的に表示する事が簡単に実装できるsparkline.js。HTML中に簡単なグラフを表示する場合や、コンテンツのアクセス統計などをブラウザ側で処理したい場合になどに利用できる。

sparkline.jsを利用するにはjQueryフレームワークも必要になる。sparkline.jsはJSpark libraryに改良を加えたものになっているが、基本的な使い方はJSpark libraryと同様になっている。

HTML記述でグラフ表示に変換される
簡単に利用できるので、実践していただくのが一番良いが、参考までに説明をしておく。以下を見ていただくと単なるHTMLタグだが、前述したライブラリをHTMLヘッダで呼び出ししておけば、グラフとして表示されるようになる。

<span id="options">52, 31,38 a , 29, 28, 33, 26, 33, 34, 38, ... 61, 49</span>

グラフデザインはCSS記述の要領で色の指定をすることができる。また、グラフのデザインは2種類のタイプがある。実際に利用する場合にはそのままライブラリを利用しても良いが、表示サイズの処理など独自に変更したい場合はJSpark libraryのライセンスに従って利用することができる。

関連する記事