JavaScript 函數繪圖

訊息

參考文獻

簡體版

English

執行畫面

函數繪圖：版本 7

<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" 
    src="../excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" 
    src="http://people.iola.dk/olau/flot/jquery.js"></script>
    <script language="javascript" type="text/javascript" 
    src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
 </head>
<body>

<div id="placeholder" style="width:600px;height:300px;"></div>

<div>
from:<input id="from" type="text" value="0" size="4"/>
to:<input id="to" type="text" value="10" size="4"/>
step:<input id="step" type="text" value="0.1" size="4"/>
</div>

<textarea id="shell" cols="60" rows="10">
sin(x)
cos(x)
</textarea>

<script type="text/javascript">

var sin=Math.sin;
var cos=Math.cos;
var tan=Math.tan;
var cot=Math.cot;
var sec=Math.sec;
var csc=Math.csc;
var ceil=Math.ceil;
var exp=Math.exp;
var floor=Math.floor;
var log=Math.log;
var max=Math.max;
var min=Math.min;
var pow=Math.pow;
var random=Math.random;
var round=Math.round;
var sqrt=Math.sqrt;

function Graph(from, to, step) {
  this.from = from;
  this.to = to;
  this.step = step;
  this.plotsList = [];

  this.curve = function(code) {
    var plots = [];
    for (var x = this.from; x < this.to; x += this.step)
        plots.push([x, eval(code)]);
    return plots;
  }

  this.paint = function(codeList) {
    var size=this.plotsList.length;
    for (var i=0; i<codeList.length; i++)
        this.plotsList[size+i] = this.curve(codeList[i]);
    return this.plotsList;    
  }

  return this;
}

function draw(target, codeList, from, to, step) {
  var g = new Graph(from, to, step);
  $.plot($(target), g.paint(codeList));
  return g;
}

function drawGraph() {
    var from = eval($("#from").val());
    var to   = eval($("#to").val());
    var step = eval($("#step").val());
    var codeList = $("#shell").val().split("\n");
    return draw("#placeholder", codeList, from, to, step);
}

function keyEnter(event) {
  if (event.which == 13) {
//     event.preventDefault();
     drawGraph();
  }
}

$(drawGraph);
$("#shell").keypress(keyEnter);
$("#from").keypress(keyEnter);
$("#to").keypress(keyEnter);
$("#step").keypress(keyEnter);
</script>

 </body>
</html>

Facebook

page revision: 11, last edited: 03 Aug 2012 08:37

Edit Rate (0) Tags Discuss (0) History Files Print Site tools + Options

金門大學：免費電子書、教材、程式、動畫

訊息

執行畫面

函數繪圖：版本 7

Facebook

Facebook

Wikidot

Post preview:

Other interesting sites