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

2018/03/23更新 カテゴリー:開発奮闘記 タグ: , ,
  • このエントリーをはてなブックマークに追加

CloudPaperの改良で年間売上グラフを入れようと思い、動的に使えるjQueryプラグインを探していたところ「jqPlot」という素敵なプラグインを見つけました。かんたんに導入方法をご紹介します。

SPONSOR

色など自由にカスタマイズできるのですが、かんたんな折れ線グラフだとこんな感じで生成できます。ほかにも棒グラフや円グラフもつくれます。
graph
デモはこちら

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>

そうすると、このようにグラフができあがります。
graph
excanvas.min.jsはIE9未満へ対応するためのライブラリです。

plot1 = $.jqplotが実際にグラフを生成している関数で、データやオプションを私、idがlineの部分にグラフを表示しています。

optionは豊富に用意されているので、自由にカスタマイズできていいですね。

jqPlot

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

  • このエントリーをはてなブックマークに追加
SPONSOR

PROFILE

プロフィール

入江 慎吾/サービス開発だけで生きていく
自分のサービスだけで自由に生きる。勢いで受託開発をすべてやめて、サービスだけ作って生きていくことを決めたフリーのエンジニア。得意を教えて副業にできるMENTAを開発中! (詳しいプロフィール)
WEBサービス・アプリ開発に役立つ情報をイリテクの入江がお届けします。プログラミング、UI/UXデザイン、SNS・ブログマーケティングなど、プロダクト開発だけで自由に生きていくための実践的な情報を配信しています。

PRODUCT

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

RELATION

関連する記事

SPONSOR

TAG

タグから記事をさがす