Sparklineグラフを表示するJavaScript (sparkline.js)
2007年6月4日(月) 09:00
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のライセンスに従って利用することができる。
関連する記事
- マウス操作で写真にズームするギャラリーswf(PostcardViewer)
- CSSとCanvasで描写するWeb用のUIフレームワーク(Mocha UI)
- 透明感のあるデザインをJavaScriptで実装する(glassbox.js)
- MP4、FLVなど再生するFlashプレーヤーswf (JW FLV MEDIA PLAYER)
- FlashやFLV、MediaPlayerに対応したスライドショーJavaScript(shadowbox)
- デザインが魅力的なスライドショーJavaScript (Lightview)
- 楽にフォーム入力チェックを実装するJavaScript (JSValidate)
- CSSデザインレイアウトをオンラインで簡単に作成する (YAML)
- ユーザーが再配置可能なWedgetを実装するJavaScript (Prototype Portal Class)
- フォームボタンCSSデザインするテクニック (Rediscovering Button Element)
- 半透明の角まるツールチップを表示するJavaScript (CoolTips)
- JavaScriptでプログレスバーを簡単に実装する (jsProgressBarHandler)
- JavaScriptコード圧縮して盗用から守る (packer)
- iTuneのようにカバーアートを表示するFlash (iTunes Coverflow)
- 画像をサムネイルのサイズで表示するJavaScript (jQuery Thumbs)
- Ajaxでサクサク動くWebファイルマネージャ (Relay)
- アンカータグを利用してスムーススクロールを実装する (df Smooth Scroll)
- MacでもFlashでホイール操作が出来るようにする (SWFMacMouseWheel)
- HTMLなどタグ編集を楽にするエディタ機能JavaScript (jTagEditor)
- 使いやすいYUIライブラリのWYSIWYGエディタ (Rich Text Editor)

