「jqPlot」を使って円グラフを作成

Webサイトで円グラフ表示したいと要望があったので、以前使用したjqPlotでデモを作成しました。ダウンロード
最初の要望は「凡例つけて」、「いい感じにカラーリングしてほしい。」、「定期的に変更が伴うので、編集画面も」でした。
スクリプト
ベースとなるスタイルシート・スクリプト。excanvasは、IE8表示用です。
<script src="jquery.min.js" type="text/javascript"></script> <link href= "jquery.jqplot.min.css" type="text/css" rel="stylesheet"> <script src="jquery.jqplot.min.js" type="text/javascript"></script> <script src="excanvas.min.js" type="text/javascript"></script>
円グラフの表示用のpieRenderer
<script src="plugins/jqplot.pieRenderer.min.js" type="text/javascript"></script>
実装
<div id="div1033" style="height:400px; width:500px; margin:auto;"></div> <script> $(document).ready(function(){ // データ data = [[ ['United States', 12], ['France', 11], ['Russia', 9], ['United Kingdom', 7], ['Japan', 3], ['Belgium', 2], ['Others', 10] ]] // データラベル // データ配列の順にカンマ区切りで指定します。 datalabel = [ 'United States 12', 'France 11', 'Russia 9', 'United Kingdom 7', 'Japan 3', 'Belgium 2', 'Others 10' ] // 円グラフ配色 seriescolors = [ "#4472A6", "#AA4644", "#89A550", "#715891", "#4199AF", "#D08949", "#616161" ] // オプション option = { title: 'Fields Medalists (1936 - 2010)', // タイトル seriesDefaults: { renderer: jQuery.jqplot.PieRenderer, // 円グラフ用プラグイン rendererOptions: { dataLabels: datalabel, // データラベル showDataLabels: true, // データラベル表示有無 startAngle: -90 // 円グラフ基線位置 } }, seriesColors: seriescolors, legend: { show:true, location: 'e' } // 凡例 } // 作成実行 $.jqplot( 'div1033', data, option); }); </script>
「開始位置を変えてほしい」「凡例やめて、項目と値をグラフ内に表示」
- startAngle
円グラフの開始位置を0時にしました。("基線位置"なる名称みたいですが、正式には何でしょうね?)デフォルトが3時の方向のようですので、-90(度)することで設定(回転)できます。 - seriesColors
パイの配色を配列で順に指定できます。(表示データ) 円グラフの配色は、Power Pointの"fruit salad"を参考にしました。 - legend
「凡例」を英語でlegend。show:falseと指定することで非表示にできます。
円グラフ サンプル
CakePHP経由でDBアクセスして表示するデモです。コードもそちらに。
追加オプション
円グラフ ツールチップ
<!-- 追加で、jqplot.highlighter.min.jsを読み込みます--> <script src="plugins/jqplot.highlighter.min.js" type="text/javascript"></script>
オプションにhighlighterの設定を追加して下さい。
// オプション option = { highlighter: { show: true, // ツールチップを表示する useAxesFormatters: false, // 円グラフの場合falseに設定する formatString:'%s, %P', // ツールチップのフォーマット }, }
関連記事
-
-
select(list)ボックスを左右に並べて視覚的に使いやすくしてくれる「Multiselect」
「Multiselect」は、selectボックスを左右に配置して、選択したもの・していないものを左右に分けてくれるjQueryプラグインです。視覚的に使いやすくしてくれます。ダウンロードはこちら
-
-
シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」
「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション
-
-
開閉できるツリー構造を表現できる「jsTree」
「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち
-
-
Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)
Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 Twitter Bootstrap純正スクリプト ダウンロード / サイト
-
-
ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン
画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ
-
-
ページの画像を非同期で読み込んでくれる「Lazy Load」
「LazyLoad Plugin」は、画像をページのロード時ではなく非同期に読み込んでくれるjQueryプラグインです。設定によりスクロールした際に画像をロードしたりしてくれます。 ダウンロード |
-
-
数値入力スライダー「jQuery Simple Slider」
「jQuery Simple Slider」はスライダーを使用して数値設定が行えるようにしてくれるjQueryプラグインです。"Unobtrusive Numerical Slider"とあるように余
-
-
親要素の大きさに合わせて画像をリサイズ「imgLiquid」
「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装
-
-
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」
PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや
-
-
ポップアップ・モーダル ウィンドウ プラグイン
ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers
Comment
jQuery:「jqPlot」を使って円グラフを作成 | Think deeply, Do less, More effective http://bit.ly/12df0O2