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

プロフィール

入江 慎吾／サービス開発だけで生きていく
自分のサービスだけで自由に生きる。勢いで受託開発をすべてやめて、サービスだけ作って生きていくことを決めたフリーのエンジニア。得意を教えて副業にできるMENTAを開発中！ （詳しいプロフィール）

WEBサービス・アプリ開発に役立つ情報をイリテクの入江がお届けします。プログラミング、UI/UXデザイン、SNS・ブログマーケティングなど、プロダクト開発だけで自由に生きていくための実践的な情報を配信しています。

無料メールマガジンを購読する

PRODUCT

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