多角レーダーチャートを作成する「Jquery Canvas Chart」を使ってみた。
作成しているシステムのとある一覧画面に、得点に応じたチャート図をつけて欲しいとの依頼があったので、色々と調べてみたのですが、「Jquery Canvas Chart」が簡単でわかり易かったのでご紹介。
Jquery Canvas Chartとは。
◆配布サイト
俺WEB 跡地｜jquery CanvasChart.js
上記「俺WEB 跡地」様にて配布されています。
名前からも分かるように、jQueryと、HTML5のcanvasを使って、多角形レーダーチャートを作成するプラグインです。
こんなのが作れます。
サンプルは上記サイトを訪れれば、10パターン用意されており、ソースを見る限りやったらと簡単。
素晴らしい出来です。
使い方
手順1
「俺WEB 跡地」様 作成の[CanvasChart.js]とGoogleで公開されている「excanvas.js」をダウンロードし、jQueryとともにヘッダで読み込みます。
手順2
javascriptの書式で、canvasChart() のオプションを設定。
手順3
DIVでチャート本体を記述。
これだけとなっております。
実例
以下の内容で先ほどのサンプル画像のチャートが出来上がります。
[html]
[/html]
ここでは省きますが、その他のオプションも色々とあるので、細かい指定ができると思います。
最後に、俺WEB 跡地 様、有益なプラグインを公開していただき、ありがとうございました。
[tgAmazonItemLookup asin="4774144665" related="1"]