flotでグラフ描画（３）

JavaScript

メイン画面とサブ画面に分けなくても、いいんでないかとやっと気づく。

  • マウスでのグラフの拡大はメイン画面でできている。
  • 拡大後に全体表示に戻るときにはメイン画面で指定できないので、サブ画面で指定する。そのため、サブ画面が必要。←これ、間違い。

なぜなら、メイン画面だけでもブラウザのリロードボタンで初期の表示に戻る！だからサブ画面は不必要。

と、いうことで完成したソース。

<!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>
  </script>
</head>
<body>
<div id="placeholder" style="width:500px;height:500px"></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 = 20000;
       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.5 },
           shadowSize: 0,
           selection: { mode: "xy" }
       });

       $("#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" }
                         }));
       });
});
</script>
</body>
</html>