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

• Tweet

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

フリーランスエンジニアの稼ぎ方

フリーランスエンジニアの稼ぎ方。ぶっちゃけ…開発以外のことを頑張ったほうが結果がでます。

• Tweet

PROFILE

プロフィール

入江 慎吾
サービスで世界をよりよくするために挑戦中。個をエンパワーメントするプロダクトをつくっています。個人開発コミュニティ「入江開発室」を運営（約300名） / MENTAなど20個以上のプロダクトを開発。
（詳しいプロフィール）

PRODUCT

イリテクで開発したプロダクト