jquer.svg 插件画函数图像（坐标轴）的例子

lovewinner

浏览: 52274 次
性别:
来自: 保定

最近访客更多访客>>

nick_jian

liugh_kylin

aitouchy

william24

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery
JS

jquery 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 class="container margintop40" >
            <div id="plot" class="" 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&nbsp;&nbsp;
                    <input type="button" id="plotit" class="btn" value="Plot it" />
                    <input type="button" id="test" class="btn" value="test" />
                </p>
                <div id="svgplot" style="width: 100%; height: 400px;" title="">
                  
                </div>


            </div>


        </div>
  
    </body>
</html>

分享到：

以post方式请求url 的一个小函数 | 【转】JSON对象和字符串之间的相互转换

2012-04-26 22:11
浏览 5930
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquer.svg 插件画函数图像（坐标轴）的例子

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquer.svg 插件画函数图像（坐标轴）的例子

评论

发表评论

相关推荐

js 重复加载问题

jquery加载iframe完成后 触发事件

监听无鼠标、键盘动作

以post方式请求url 的一个小函数

jquery 选择radio checked

最近访客更多访客>>

jquery加载iframe完成后触发事件