jQueryプラグインjqplotで,アニメーション付きグラフ表示のデモを詳しく解説。JavaScriptで動きのあるグラフ描画


jQueryプラグインjqplotで,折れ線グラフや棒グラフを描画する。

描画の際には,

  • 棒が延びていくエフェクトや
  • 折れ線が延びていくエフェクト
  • 数値がしだいに浮かび上がるフェードイン効果

などのアニメーションを付ける。

 

以下のURLで,動作デモを見ることができる。

JSでアニメーショングラフ描画(jqplotでチャート表示)
http://sourcecode-student.study-tips.info/demo/2015_03_jqplot_animation_demo/


このソースコードには,jqplotのオプションの詳しい使い方を

1行ずつ,くわしくコメントで書いてある。

 

以下に転載。 ====

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>JSでアニメーショングラフ描画(jqplotでチャート表示)</title>

  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <!-- jQueryを2系にするとjqplotが動かない。動作デモを見てバージョンを合わせるべし -->

  <!-- jqplot:http://www.jqplot.com/deploy/download/ からダウンロード -->
  <script src="jquery.jqplot.min.js"></script>
  <script src="jqplot.barRenderer.min.js"></script>
  <script src="jqplot.highlighter.min.js"></script>
  <script src="jqplot.cursor.min.js"></script> 
  <script src="jqplot.pointLabels.min.js"></script>
  <link rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />

</head>
<body>


<h3>jqplotでグラフをアニメーションつきで表示</h3>


<!-- ここにjqplotで描画される -->
<div id="chart1" style="width:700px; height:300px"></div>


<script>

$(document).ready(function () {

	// 系列データ
	var s1 = [[2002, 112000], [2003, 122000], [2004, 104000], [2005, 99000], [2006, 121000],
	[2007, 148000], [2008, 114000], [2009, 133000], [2010, 161000], [2011, 173000]];

	var s2 = [[2002, 10200], [2003, 10800], [2004, 11200], [2005, 11800], [2006, 12400],
	[2007, 12800], [2008, 13200], [2009, 12600], [2010, 13100]];


	// jqplotで描画
	var plot1 = $.jqplot("chart1", [s2, s1], {

		// このグラフ内の全系列のアニメーションをONにする
		animate: true,

		// マウスドラッグで領域を選択してグラフを再描画する時に,
		// 描画にアニメーションをつけるかどうか
		animateReplot: false,

		// マウスカーソルの設定
		cursor : {
			// カーソルを表示
			show: true,

			// ドラッグした領域をズームする
			zoom: true,
			
			// ズーム時に目盛りをむやみに細分化して展開しない
			looseZoom: true,
			
			// カーソルの動きに合わせて,グラフの端に座標を表示
			showTooltip: true
		},
		
		// 系列ごとの設定
		series : [
			
			// 第1系列の設定
			{
				// 系列の値を各点で常に表示するか
				pointLabels: {
					show: true
				},

				// 棒グラフとしてレンダリングする
				renderer: $.jqplot.BarRenderer,

				// マウスオーバー時に系列の値をハイライト表示するか。デフォルトでtrue
				showHighlight: false,
				
				// この系列が使うy軸の名前(y2axisならばグラフ領域の右側のy軸を使用)
				yaxis: 'y2axis',
				
				// 系列の描画オプション
				rendererOptions: {
					// 描画アニメーションの設定
					animation: {
						// 何ミリ秒かけて描画完了するか
						speed: 5500
					},
					
					// 複数の系列が重なって描画されている場合,
					// マウスオーバー時にこの系列を最も手前に表示するかどうか
					highlightMouseOver: false,

					// 棒グラフのスタイル
					barWidth   : 15,
					barPadding : -15,
					barMargin  : 0
				}
			},
			
			// 第2系列
			{
				// 系列の描画オプション
				rendererOptions: {
					// 描画アニメーションの設定
					animation: {
						// 何ミリ秒かけて描画完了するか
						speed: 7000
					}
				}
			}
		],

		// 各axesのデフォルト設定
		axesDefaults: {
			pad: 1.0
			// 各点の存在する領域の横幅を何倍すると,描画領域の横幅になるか?という係数。
			// 大きいほど,描画された点の右端と左端にスペースの余裕が生じる。
		},

		// 軸の設定
		// http://www.jqplot.com/docs/files/jqPlotOptions-txt.html
		axes: {
			// x軸の設定
			xaxis: {
				// 表示間隔
				tickInterval: 1,
				
				// 目盛り上に,軸と直交した線を描画するか
				// 棒グラフだと描画しないほうがよい
				drawMajorGridlines: false,
				
				// 目盛りと目盛りの間に線を描画するか
				drawMinorGridlines: true,
				
				// 目盛りの印を描画するか
				drawMajorTickMarks: false,
				
				// 軸の描画オプション
				rendererOptions: {
					// グラフの左右の端に,主目盛りいくつ分の余裕を生むか
					tickInset: 0.5,
						// http://www.music.mcgill.ca/~ich/classes/mumt301_11/js/jqPlot/docs/files/plugins/jqplot-dateAxisRenderer-js.html
					
					// 主目盛りの間にサブ目盛りをいくつ設置するか
					minorTicks: 1
				}
			},
			
			// y軸の設定
			yaxis: {
				// 目盛りの設定
				tickOptions: {
					// 目盛り文字列の表示フォーマット
					formatString: "$%'d"
				},
				
				// 軸の描画オプション
				rendererOptions: {
					// 必ず0から目盛り表示
					forceTickAt0: true
				}
			},
			
			// 2個目のy軸の設定。グラフ領域の右側に表示される
			y2axis: {
				// 目盛りの設定
				tickOptions: {
					// 目盛り文字列の表示フォーマット
					formatString: "$%'d"
				},
				
				// 軸の描画オプション
				rendererOptions: {
					// y1とy2で目盛り位置をきれいにそろえるか?
					alignTicks: true,
					
					// 必ず0から目盛り表示
					forceTickAt0: true
				}
			}
		},

		// 「マウスオーバー時に系列の値をハイライト表示」の設定
		highlighter: {
			show: true,
			showLabel: true,
			
			// 何の値を表示するか
			tooltipAxes: 'y',
			sizeAdjust: 7.5 , 
			
			// 点から見て東西南北のどの方向にハイライトを表示するか
			tooltipLocation : 'ne'
		}

	});

});

</script>


</body>
</html>


ちなみに,同じようなグラフ描画ライブラリであるflotには,

このようなアニメーションエフェクトは充実していなかったと思う。

jqplotすごい。

jQuery.flotで,素数の個数および素数計数関数をグラフ描画 - ソフトウェア勉強ログとサンプルコード
http://source-code-student.hatenablog.jp/entry/20150309/p1

参照

今回のサンプルのネタ元:

Animated Charts
http://www.jqplot.com/deploy/dist/examples/barLineAnimated.html

  • This plot animates the bars bottom to top and the line series left to right upon initial page load. Since the animateReplot: true option is set, the bars and line will also animate upon calls to plot1.replot( { resetAxes: true } ).

jqplotのダウンロード:

jqPlot Charts and Graphs for jQuery
http://www.jqplot.com/deploy/download/