jQueryで動的にグラフを作れる「jqPlot」が使いやすい!

CloudPaperの改良で年間売上グラフを入れようと思い、動的に使えるjQueryプラグインを探していたところ「jqPlot」という素敵なプラグインを見つけました。かんたんに導入方法をご紹介します。
色など自由にカスタマイズできるのですが、かんたんな折れ線グラフだとこんな感じで生成できます。ほかにも棒グラフや円グラフもつくれます。
デモはこちら
jqPlotでグラフを作る
jqPlotからまずはファイル一式をダウンロード。解凍するとファイルがたくさんありますが、最低限必要なものはjquery.jqplot.min.jsとjquery.jqplot.min.cssの2つです。ちょっと複雑なことをやろうとするなら、必要に応じてこれら以外のファイルを使います。
<link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" media="screen,print" title="default"> <!--[if lt IE 9]><script src="excanvas.min.js"></script><![endif]--> <script type="text/javascript" src="jquery.jqplot.min.js"></script> <script type="text/javascript" src="jqplot.dateAxisRenderer.min.js"></script> <script type="text/javascript" src="jqplot.highlighter.min.js"></script> <div id="line"></div> <script> $(document).ready(function(){ // オプション options = { highlighter: { //折れ線ポイントにマウスをのせると数値を表示する show: true, sizeAdjust: 7.5 }, grid: { //グリッドのカスタマイズ drawGridLines: false, gridLineColor: '#eee', borderColor: '#ccc', background: '#fff', shadow: false }, seriesDefaults: { //シャドウをOFF shadow: false }, seriesColors:['#428BCA'], //グラフの色 title:{text:"年間売上"}, //タイトル axes:{ // 軸 // 横軸(x軸) xaxis:{ renderer:$.jqplot.DateAxisRenderer,// プラグイン min: '2014-01-01', // 軸開始の値 max: '2014-12-01', // 軸終了の値 tickInterval:'1 months', // 目盛りの間隔 tickOptions:{formatString:'%Y/%m'} // 表示フォーマット } }, axesDefaults: { min:0 //目盛は0以上を表示 } } // 表示データ data = [[ ['2014-01-01',3], ['2014-02-01',1], ['2014-03-01',0], ['2014-04-01',45], ['2014-05-01',0], ['2014-06-01',0], ['2014-07-01',0], ['2014-08-01',0], ['2014-09-01',0], ['2014-10-01',0], ['2014-11-01',0], ['2014-12-01',0] ]] plot1 = $.jqplot( "line", data, // 表示データ options // オプション ); }); </script>
そうすると、このようにグラフができあがります。
excanvas.min.jsはIE9未満へ対応するためのライブラリです。
plot1 = $.jqplotが実際にグラフを生成している関数で、データやオプションを私、idがlineの部分にグラフを表示しています。
optionは豊富に用意されているので、自由にカスタマイズできていいですね。
[sc name=”engeneer”]
SHARE
無料メルマガ<特典付き>
個人開発・ビジネスについての有益な情報を無料メルマガでお届けします。
個人開発のスキルアップにMENTA
MENTAはいろんなプロに相談できるNo1メンターサービスです。
僕自身もプロダクトの壁打ち・相談にのっています。個人開発でもコードレビュー、セキュリティ面のチェック、デザイン、広告、コンテンツマーケ、SNS集客について相談する、など使えます。
YouTubeでも個人開発ノウハウを発信中!
PROFILE

入江 慎吾
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表/個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました/福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 (詳しいプロフィール)
あらゆるスキルが学べるパーソナルメンターサービスMENTAの代表/個人開発が好きでこれまでに30個ほどのWEBサービスやアプリを作ってきました/福岡のWEB制作会社勤務→フリーランスエンジニア→法人立ち上げ→M&A億単位の売却を経験。 (詳しいプロフィール)