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
<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>
分享到:
相关推荐
jquery.graphviz.svg, 使 graphviz svg图表响应响应的jquery插件 jquery.graphviz.svg可以使Graphviz的输出更加交互和易于浏览的jQuery插件。 使具有以下特性的功能变得容易:突出显示节点/边放大/缩小图形导航- ...
web端生成3D效果标签云图,词云图,下载的别人的js文件,然后自己稍微做了一些小的修改.插件使用更加灵活了
开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具 fontawesome-webfont.svg开发工具...
纯jquery+css绘画地图线路图插件Subway Map,可用于线路图,电路图,html5开发环境下
前端项目-svg.pan-zoom.js,用于平移和缩放SVG对象的JavaScript库。
JVectorMap是一款基于jQuery的矢量地图插件,它是基于SVG结构的,和其他jQuery地图插件不同的是,jVectorMap是矢量地图。同样支持地图缩放和地图平面移动等相应的功能。由于JVectorMap是基于jQuery的,所以支持大...
标签云旋转js
前端项目-snap.svg.zpd,snap.svg的缩放/平移/拖动插件
Snap.svg 是一款显示现代 SVG 图像的 Javascript 库。SVG 是一款能创建完美显示在各种尺寸的屏幕上的交互式,各种分辨率的向量图像。 标签:Snapsvg
snap.svg的介绍文档,如果不想看php的话可以访问http://www.zhangxinxu.com/GitHub
sparkle.jquery.js是一款可以制作炫酷的星星闪耀效果的jQuery插件。该插件基于SVG来制作星星闪耀效果,你可以控制星星的颜色,边框色,大小,延迟时间等属性。
返回页面顶部符号。cd-top-arrow.svg
jquery-pie-loader.js是一款轻量级的基于HTML5 SVG的jQuery圆形进度条插件。通过该插件可以在页面中渲染出带动画效果的SVG饼状图形,适合用于制作进度显示,加载进度等效果。
jquery.knob.js是一款简单实用的基于SVG的jQuery旋转按钮插件。该插件通过jquery和jquery ui来动态生成基于SVG的旋转按钮。
die_visual.svg
插件,可为svg元素启用panzoom 入门 npm install @svgdotjs/svg.js @svgdotjs/svg.panzoom.js 在html文档中包含svg.js库之后,请包含此插件。 [removed][removed] [removed][removed] 或者对于esm,只需将其导入:...
c语言函数.svg
您可以使用此插件来创建很酷的“线条绘制到图像中”效果 用法 创建一个 SVG: 我强烈推荐使用来创建你的 SVG。 您需要使用矢量线绘制工具来构建您的形状。 此插件将自动绘制 SVG 中的所有Path元素。 从 Sketch 导出...
用Django搭建了一个小系统,本来用uWSGI就足够了,但使用 SimpleUI后,腾讯云服务器部署时一些静态的svg文件不能正常显示,所以就使用了Nginx,对静态文件单独处理。服务器:腾讯云服务器 CentOS 7.5 64位 安装了...