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

04/22/2014

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は豊富に用意されているので、自由にカスタマイズできていいですね。

jqPlot

[sc name=”engeneer”]

無料メルマガ＜特典付き＞

個人開発・ビジネスについての有益な情報を無料メルマガでお届けします。

特典：個人開発の教科書＜心得編＞

これまでの個人開発経験を秘伝のタレ的な内容としてエッセンスをまとめました。35ページにわたる大ボリュームです。

個人開発のスキルアップにMENTA

MENTAはいろんなプロに相談できるNo1メンターサービスです。

僕自身もプロダクトの壁打ち・相談にのっています。個人開発でもコードレビュー、セキュリティ面のチェック、デザイン、広告、コンテンツマーケ、SNS集客について相談する、など使えます。

YouTubeでも個人開発ノウハウを発信中！

PROFILE

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