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

最新推荐文章于 2022-07-21 20:32:43 发布

lovewinner

最新推荐文章于 2022-07-21 20:32:43 发布

阅读量508

点赞数

分类专栏： JS jquery 文章标签： jquery svg ViewUI

本文链接：https://blog.csdn.net/lovewinner/article/details/84210211

版权

JS 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

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>

lovewinner

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquer.svg 插件画函数图像（坐标轴）的例子

RT jquery.svg.js的官网 http://keith-wood.name/svg.html（得f a n||长城）官网就给出了代码我自己的js学得比较菜吧整了半天才在自己本地运行出来现在贴出代码有需要的拿去 &lt;%@page contentType="text/html" pageEncoding="UTF-8"%&gt;&lt;!DOCTYP...
复制链接

扫一扫