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/