JavaScript 函數繪圖

# 函數繪圖：版本 7

``````<html>
<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>
<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>```
```