flotでグラフ描画（２）

JavaScript

昨日に続き。flotのサンプルを参考にして、マウスで指定した範囲を拡大して表示するようにした。見栄えとかにはこだわらず、とりあえず動くようにした。

  • 下に示すHTMLファイルをブラウザで読み込む。表示される画面を図1に示す。上の大きなメイン画面と下の小さなサブ画面で構成されている。
  • サブ画面の適当な範囲をマウスでドラッグすると選択状態になる（図2）。
  • サブ画面での選択範囲の図が、メイン画面に表示される（図3）。つまり部分的に図を拡大したものがメイン画面に現れる。
  • 図4のようにメイン画面を直接マウスでドラッグしても、領域の選択が可能である。
  • 選択された領域が拡大されてメイン画面に表示されている（図5）。
  • メイン画面における操作では図の拡大だけしかできないので、拡大した後に再び広い範囲を描画するためにはサブ画面を使って描画範囲を指定すればよい。


図1：初期の表示画面

図2：サブ画面上で描画領域を選択する

図3：選択された領域の図がメイン画面に表示される

図4：メイン画面上で描画領域を選択する

図5：選択された領域がメイン画面いっぱいに表示される

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <!--[if IE]><script language="javascript" type="text/javascript" src="js/excanvas.pack.js"></script><![endif]-->
  <script language="javascript" type="text/javascript" src="../jquery.js"></script>
  <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
<body>
<div id="placeholder" style="width:500px;height:500px"></div>
<div id="overview" style="margin-left:20px;margin-top:20px;width:200px;height:200px"></div>

<script id="source" language="javascript" type="text/javascript">
$(function () {
       var pconst = 10.0;
       var rconst = 28.0;
       var bconst = 8.0/3.0;
       var ncont = 200000;
       var xval = 1.0;
       var yval = 1.0;
       var zval = 1.0;
       var dt = 0.001;
       var d1 = [];
       for (var i=0; i<ncont; i+= 1) {
           xval += dt*(-pconst*xval + pconst*yval);
           yval += dt*(-xval*zval + rconst*xval - yval);
           zval += dt*(xval*yval - bconst*zval);
           d1.push([xval, zval]); 
       }
	var plot = $.plot($("#placeholder"),[d1], {
           lines: { show: true, lineWidth: 0.1, fillColor: "rgba(255,255,255,0.8)" },
           shadowSize: 0,
           selection: { mode: "xy" }
       });
       var overview = $.plot($("#overview"),[d1], {
           lines: { show:true, lineWidth: 0.5 },
           shadowSize: 0,
           selection: { mode: "xy" }
       });
       // connect two figs
       $("#placeholder").bind("plotselected", function (event, ranges) {
           plot = $.plot($("#placeholder"), [d1],
                         $.extend(true, {}, {
                             xaxis: {min: ranges.xaxis.from, max: ranges.xaxis.to },
                             yaxis: {min: ranges.yaxis.from, max: ranges.yaxis.to },
                             selection: { mode: "xy" }
                         }));
           overview.setSelection(ranges, true);
       });

       $("#overview").bind("plotselected", function(event, ranges) {
           plot.setSelection(ranges);
       });
});
</script>

</body>
</html>