jquer.svg 插件画函数图像（坐标轴）的例子
RT ?jquery.svg.js的官网 http://keith-wood.name/svg.html（得f a n||长城）
官网就给出了代码 我自己的js学得比较菜吧 ?整了半天才在自己本地运行出来
现在贴出代码 有需要的拿去
?
?
<%@page contentType="text/html" pageEncoding="UTF-8"%><!DOCTYPE html><html> <head> <title>【这里写页面title】</title> <link rel="stylesheet" href="css/jquery.svg.css" type="text/css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.svg.js"></script> <script type="text/javascript" src="js/jquery.svgplot.js"></script> <script type="text/javascript"> $(function() { // Shorthand for $(document).ready(function() { var plotZooms = [[-2, 2, -1.5, 1.5], [-10, 10, -10, 10]]; var chartAreas = [[0.1, 0.1, 0.95, 0.9], [0.2, 0.1, 0.95, 0.9], [0.1, 0.1, 0.8, 0.9], [0.1, 0.25, 0.9, 0.9], [0.1, 0.1, 0.9, 0.8]]; var legendAreas = [[0.0, 0.0, 0.0, 0.0], [0.005, 0.1, 0.125, 0.5], [0.85, 0.1, 0.97, 0.5], [0.2, 0.1, 0.8, 0.2], [0.2, 0.9, 0.8, 0.995]]; $('#svgplot').svg({onLoad: PlotIt}); $('#plotit').click(function() { // alert(123) var plotZoom = parseInt($('#plotZoom').val(), 10); var plotEqual = parseInt($('#plotEqual').val(), 10); var plotLegend = parseInt($('#plotLegend').val(), 10); // var plotZoom = 0; // var plotEqual = 0; // var plotLegend = 0; var svg = $('#svgplot').svg('get'); svg.plot.noDraw(). legend.show(plotLegend).area(legendAreas[plotLegend]).end(). xAxis.scale(plotZooms[plotZoom][0], plotZooms[plotZoom][1]).end(). yAxis.scale(plotZooms[plotZoom][2], plotZooms[plotZoom][3]).end(). area(chartAreas[plotLegend]).equalXY(plotEqual).redraw(); // resetSize(svg); }); }); function PlotIt(svg) { // svg.plot.noDraw().title('Functions', 'blue'). // addFunction('sine', Math.sin, 'blue', 1).format('ivory', 'gray'). // gridlines({stroke: 'gray', strokeDashArray: '2,2'}, 'gray').redraw(); svg.plot.noDraw().title('Functions', 'blue'). addFunction('Sine', Math.sin, 'blue', 3). addFunction('Cosine', Math.cos, [-Math.PI, Math.PI], 20, 'red', 3). addFunction('Decaying', decay, 'green', 3). format('ivory', 'gray'). gridlines({ stroke: 'gray', strokeDashArray: '4,2' }, 'gray').redraw(); svg.plot.xAxis.scale(-0.5, 12).ticks(1, 0.1); svg.plot.yAxis.scale(-0.5, 12).ticks(1, 0.1); svg.plot.legend.settings({ fill: 'lightgoldenrodyellow', stroke: 'gray' }); svg.plot.status(showPlotStatus); } function decay(x) { return Math.exp(-0.4 * x) * Math.sin(x); } function showPlotStatus(label) { $('#svgplot').attr('title', label); } </script> </head> <body> <%@include file="nav.jsp" %> <div > <div id="plot" style="min-width: 0px; "> <p>Zoom <select id="plotZoom"> <option value="0">small</option> <option value="1">large</option> </select> with <select id="plotEqual"> <option value="0">unequal</option> <option value="1" selected="selected">equal</option> </select> x/y units and <select id="plotLegend"> <option value="0">no</option> <option value="1">left</option> <option value="2">right</option> <option value="3">top</option> <option value="4">bottom</option> </select> legend <input type="button" id="plotit" value="Plot it" /> <input type="button" id="test" value="test" /> </p> <div id="svgplot" style="width: 100%; height: 400px;" title=""> </div> </div> </div> </body></html>??
?
?