今天没什么事情,发一个以前做的图表的例子,希望对初学者能有所帮助!
这是用我用svg做的一个曲线例子,可以很好的和后台交互达到实时监控的效果;svg主要就是应用js操纵图表元素,实现图表的修改;它有很好的前端的交互性;
这是我例子的截图,共有3条曲线间隔3妙交替显示,例子没有涉及和后台的数据交互,我们现在的项目中应用ajax实现数据收发。
以下是主要文件代码:
myLine.svg: svg的基本文件,绘制图表的框架。
<?xml version="1.0" encoding="ISO-8859-1"?>
<svg width="720" height="530">
<!-- 绘制边框 -->
<rect x="5" y="10" width="680" height="500" rx="5"
style="fill:#ffffff;stroke:blue;stroke-width:1"/>
<g id="baseOnCoordinate" style="dispaly:none">
<!-- x、y两轴 -->
<g style="fill:none;stroke:black;stroke-width:1">
<line x1="40" y1="40" x2="40" y2="480"/>
<line x1="30" y1="470" x2="650" y2="470"/>
</g>
<!-- x、y划分刻度 -->
<g style="fill:red;stroke:none;">
<!-- 原点 -->
<rect x="39" y="469" width="3" height="3"/>
<!-- 纵轴 -->
<rect x="39" y="429" width="3" height="3"/>
<rect x="39" y="389" width="3" height="3"/>
<rect x="39" y="349" width="3" height="3"/>
<rect x="39" y="309" width="3" height="3"/>
<rect x="39" y="269" width="3" height="3"/>
<rect x="39" y="229" width="3" height="3"/>
<rect x="39" y="189" width="3" height="3"/>
<rect x="39" y="149" width="3" height="3"/>
<rect x="39" y="109" width="3" height="3"/>
<rect x="39" y="69" width="3" height="3"/>
<!-- 横轴 -->
<rect x="89" y="469" width="3" height="3"/>
<rect x="139" y="469" width="3" height="3"/>
<rect x="189" y="469" width="3" height="3"/>
<rect x="239" y="469" width="3" height="3"/>
<rect x="289" y="469" width="3" height="3"/>
<rect x="339" y="469" width="3" height="3"/>
<rect x="389" y="469" width="3" height="3"/>
<rect x="439" y="469" width="3" height="3"/>
<rect x="489" y="469" width="3" height="3"/>
<rect x="539" y="469" width="3" height="3"/>
<rect x="589" y="469" width="3" height="3"/>
<rect x="639" y="469" width="3" height="3"/>
</g>
<!-- 刻度标志 -->
<g style="font-size:10pt">
<text x="25" y="485">0</text>
<!-- 纵轴 -->
<text x="15" y="435">100</text>
<text x="15" y="395">200</text>
<text x="15" y="355">300</text>
<text x="15" y="315">400</text>
<text x="15" y="275">500</text>
<text x="15" y="235">600</text>
<text x="15" y="195">700</text>
<text x="15" y="155">800</text>
<text x="15" y="115">900</text>
<text x="8" y="75">1000</text>
<!-- 横轴 -->
<text x="50" y="485">JAN</text>
<text x="100" y="485">FEB</text>
<text x="150" y="485">MAR</text>
<text x="200" y="485">APR</text>
<text x="250" y="485">MAY</text>
<text x="300" y="485">JUN</text>
<text x="350" y="485">GUL</text>
<text x="400" y="485">AUG</text>
<text x="450" y="485">SEP</text>
<text x="500" y="485">OCT</text>
<text x="550" y="485">NOV</text>
<text x="600" y="485">DEC</text>
</g>
<!-- 绘制网格 -->
<g style="fill:none;stroke:black;stroke-width:0.2;stroke-dasharray:3;">
<!-- 横 -->
<line x1="40" y1="430" x2="650" y2="430"/>
<line x1="40" y1="390" x2="650" y2="390"/>
<line x1="40" y1="350" x2="650" y2="350"/>
<line x1="40" y1="310" x2="650" y2="310"/>
<line x1="40" y1="270" x2="650" y2="270"/>
<line x1="40" y1="230" x2="650" y2="230"/>
<line x1="40" y1="190" x2="650" y2="190"/>
<line x1="40" y1="150" x2="650" y2="150"/>
<line x1="40" y1="110" x2="650" y2="110"/>
<line x1="40" y1="70" x2="650" y2="70"/>
<!-- 纵 -->
<line x1="90" y1="40" x2="90" y2="470"/>
<line x1="140" y1="40" x2="140" y2="470"/>
<line x1="190" y1="40" x2="190" y2="470"/>
<line x1="240" y1="40" x2="240" y2="470"/>
<line x1="290" y1="40" x2="290" y2="470"/>
<line x1="340" y1="40" x2="340" y2="470"/>
<line x1="390" y1="40" x2="390" y2="470"/>
<line x1="440" y1="40" x2="440" y2="470"/>
<line x1="490" y1="40" x2="490" y2="470"/>
<line x1="540" y1="40" x2="540" y2="470"/>
<line x1="590" y1="40" x2="590" y2="470"/>
<line x1="640" y1="40" x2="640" y2="470"/>
</g>
<!-- 绘制曲线 -->
<polyline id="curve" style="fill:none;stroke:blue;stroke-width:0.5;"
points=""/>
<!-- 标识曲线上的每一个点 -->
<g id="marking" style="fill:red;stroke:none">
</g>
<!-- 曲线上的每个点的注释性文字 -->
<g id="caption" style="font-size:10pt">
</g>
</g>
<g id="notBaseOnCoordinate">
</g>
</svg>
myLine.js:根据接收到的数据实现曲线的绘制。
function drawObject() {
this.pointsX = new Array(65, 115, 165, 215, 265, 315, 365, 415, 465, 515, 565, 615);
this.pointsY = new Array();
var myCurveDocument = window.myCurve.getSVGDocument();
var marking = myCurveDocument.getElementById("marking");
var caption = myCurveDocument.getElementById("caption");
var curve = myCurveDocument.getElementById("curve");
//main draw Curve mothed
this.drawCurve = function (pointsValue) {
var pointsStr = "";
//remove the old curve and other
if (curve.getAttribute("points") != "") {
this.removeCurve();
}
this.changeToYCoordinate(pointsValue);//deal with real values
for (var i = 0; i < this.pointsY.length; i++) {
pointsStr = pointsStr + this.pointsX[i] + "," + this.pointsY[i] + " ";
marking.appendChild(this.createCurveMarking(i, this.pointsX[i], this.pointsY[i]));
caption.appendChild(this.createCurvePointCaption(i, pointsValue[i], this.pointsX[i], this.pointsY[i]));
}
curve.setAttribute("points", pointsStr);
};
//mark every points
this.createCurveMarking = function (i, pointX, pointY) {
var markingRect = myCurveDocument.createElement("rect");
markingRect.setAttribute("id", "markingRect" + i);
markingRect.setAttribute("width", "3");
markingRect.setAttribute("height", "3");
markingRect.setAttribute("x", pointX - 1);
markingRect.setAttribute("y", pointY - 1);
return markingRect;
};
//add explain to the points of curve
this.createCurvePointCaption = function (i, pointsValue, pointX, pointY) {
var caption = myCurveDocument.createElement("text");
caption.setAttribute("id", "caption" + i);
caption.setAttribute("x", pointX + 5);
caption.setAttribute("y", pointY + 5);
caption.appendChild(myCurveDocument.createTextNode(pointsValue + "$"));
return caption;
};
//remove curve has existed
this.removeCurve = function () {
curve.setAttribute("points", "");
for (var j = 0; j < 12; j++) {
marking.removeChild(myCurveDocument.getElementById("markingRect" + j));
caption.removeChild(myCurveDocument.getElementById("caption" + j));
}
};
//make real value to points coordinate
this.changeToYCoordinate = function (pointsValue) {
for (var i = 0; i < pointsValue.length; i++) {
if (pointsValue[i] > 1000) {
this.pointsY[i] = 70;
} else {
this.pointsY[i] = 470 - 0.4 * pointsValue[i];
}
}
};
}
myLine.html:图表的显示页面。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>myLine.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="myLine.js"></script>
<script type="text/javascript">
var i=1;
function draw()
{
var myDraw = new drawObject();
var pointsValue1 = new Array(455,700,568,981,281,444,568,324,198,600,354,489);
var pointsValue2 = new Array(443,298,650,321,365,347,900,512,641,250,241,456);
var pointsValue3 = new Array(900,250,123,456,789,147,258,369,357,159,456,500);
var pointsValue4 = new Array(568,258,196,357,456,359,197,689,459,167,354,900);
i = i%4==0 ? 1:++i;
//myDraw.drawCurve(pointsValue1);
myDraw.drawCurve(eval("pointsValue"+i));
window.setTimeout("draw()", 2000);
}
</script>
</head>
<body>
<embed id="myCurve" src="myLine.svg" width="750" height="550"
type="image/svg+xml">
<input type="button" value="button" onclick="draw();">
</body>
</html>
附带三个文件,在下方可以下载!
运行示例前要先下载svg插件,下载地址是:
http://www.adobe.com/svg/viewer/install/main.html
- 桌面.rar (2.4 KB)
- 描述: SVG示例
- 下载次数: 186
分享到:
相关推荐
基于XML的SVG应用指南.pdf
缩放矢量图形(Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG由W3C制定,是一个开放标准
SVG 应用于变电站图形 SVG(Scalable Vector Graphics)是一种基于 XML 的开放性图形格式标准,由 W3C 推荐。它具有简单、灵活、通用性好等优点,非常适合在网络环境中应用。然而,在电力系统自动化领域中,SVG 的...
在"HTML5 SVG应用管理菜单样式.zip"这个压缩包中,可能包含了一系列利用SVG技术和HTML5的新特性来构建的管理菜单样式。这些菜单可能具有丰富的图形效果,如渐变、阴影、动画等,同时利用SVG的矢量特性,使得菜单在...
《基于XML的SVG应用指南》 .part2.rar
本书内容丰富,涵盖了SVG从入门到高级应用的方方面面,为有意深入学习SVG的读者提供了一条清晰的学习路径。对于前端开发人员、设计师以及对Web图形感兴趣的开发者来说,这是一本不可多得的学习和参考资料。
基于XML的SVG应用指南
SVG应用中的图层处理算法.doc
本书详细介绍了SVG中图形,文字,路径,动画,色彩等效果的建立与使用,并且结合ADOBE公司的Illustrator 9.0,以实例讲解了SVG文档的制作与输出过程
第3篇是SVG应用篇,介绍SVG开发的经验和技巧,并且通过几个实例来介绍如何进行SVG的开发。本书内容系统,结构清晰,具有较强的指导性和实用性,适合SVG开发人员学习,也适合作为SVG程序设计参考手册。
总的来说,"利用SVG调整移动应用(第一部分)"的教程将引导开发者掌握SVG的基本概念,使用NetBeans进行SVG图形设计,以及在Java ME环境中整合SVG图形来提升移动应用的视觉体验和交互性。这个过程不仅涵盖了技术层面...
2. 移动端SVG应用: - 在移动设备上,SVG可以提供高质量的图形显示,即使在高分辨率屏幕下也保持清晰。 - SVG的可编程性使其适合移动端交互设计,如触摸事件响应和动画效果。 3. 手势图片拖动: - 在移动端,...