源代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>深海的小鱼编制-PLOT</title> <script language="javascript" type="text/javascript" src="jquery.js"></script> <script language="javascript" type="text/javascript" src="jquery.flot.js"></script> <style type="text/css"> #apDiv1 { position:absolute; width:600px; height:300px; z-index:1; left: 200px; top: 167px; } </style> </head> <body> <h1>深海的小鱼儿-正弦和余弦函数图像</h1> <div id="apDiv1" align="center"></div> <script type="text/javascript"> $(function(){ var sin = []; for(var i=0;i<Math.PI*2;i+=0.25) sin.push([i,Math.sin(i)]); var cos = []; for(var i=0;i<Math.PI*2;i+=0.25) cos.push([i,Math.cos(i)]); $.plot($("#apDiv1"),[ {label:"正弦函数",data:sin}, {label:"余弦函数",data:cos} ],{ series:{ lines:{show:true}, points:{show:true} }, xaxis: { ticks: [0, [Math.PI/2, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3/2, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"]] }, yaxis: { ticks: 6,min: -1.2,max: 1.2}, grid: { backgroundColor: { colors: ["#789", "#eee"] } } } ); }); </script> </body> </html>