`
daoger
  • 浏览: 531596 次
  • 性别: Icon_minigender_1
  • 来自: 山东济南
社区版块
存档分类
最新评论

svg应用

阅读更多
今天没什么事情,发一个以前做的图表的例子,希望对初学者能有所帮助!
这是用我用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
分享到:
评论
3 楼 zpj888 2008-08-13  
你好,我目前在做的一个项目也是使用SVG做实时监控,目前已经实现了主要功能,但是有一些关于SVG的问题,比如实时动态曲线,就像你这个例子一样,只是我一屏幕显示的比较多,可能多达数千条line组成,这样造成画面刷新很消耗系统资源
不知道能不能跟你加好友聊一聊啊,我的QQ是121425488
2 楼 daoger 2008-06-26  
你把横轴和纵轴的坐标数据改成动态加载就可以了啊!
用ajax固定时间间隔发送请求,读取数据库数据,解析后重新加载曲线!
1 楼 slc123 2008-06-26  
你好,这篇文章对我很有帮助。不过我现在想做一个实时曲线,横轴——时间轴是在不断变化的,而不是固定好了的,曲线数据是从数据库中读来的。能不能帮帮我那。我的邮箱:slchao123@163.com

相关推荐

    基于XML的SVG应用指南.pdf

    基于XML的SVG应用指南.pdf

    基于XML的SVG应用指南

    缩放矢量图形(Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG由W3C制定,是一个开放标准

    SVG应用于变电站图形.pdf

    SVG应用于变电站图形 电力行业SVG相关资料

    HTML5 SVG应用管理菜单样式.zip

    在"HTML5 SVG应用管理菜单样式.zip"这个压缩包中,可能包含了一系列利用SVG技术和HTML5的新特性来构建的管理菜单样式。这些菜单可能具有丰富的图形效果,如渐变、阴影、动画等,同时利用SVG的矢量特性,使得菜单在...

    基于XML的SVG应用指南.part2.rar

    《基于XML的SVG应用指南》 .part2.rar

    SVG经典入门(SVG应用指南) 完整带目录

    本书内容丰富,涵盖了SVG从入门到高级应用的方方面面,为有意深入学习SVG的读者提供了一条清晰的学习路径。对于前端开发人员、设计师以及对Web图形感兴趣的开发者来说,这是一本不可多得的学习和参考资料。

    基于XML的SVG应用指南.part1.rar

    基于XML的SVG应用指南

    SVG应用中的图层处理算法.doc

    SVG应用中的图层处理算法.doc

    基于XML的SVG应用指南(完整)

    本书详细介绍了SVG中图形,文字,路径,动画,色彩等效果的建立与使用,并且结合ADOBE公司的Illustrator 9.0,以实例讲解了SVG文档的制作与输出过程

    SVG开发实践

    第3篇是SVG应用篇,介绍SVG开发的经验和技巧,并且通过几个实例来介绍如何进行SVG的开发。本书内容系统,结构清晰,具有较强的指导性和实用性,适合SVG开发人员学习,也适合作为SVG程序设计参考手册。

    利用SVG调整移动应用(第一部分)

    总的来说,"利用SVG调整移动应用(第一部分)"的教程将引导开发者掌握SVG的基本概念,使用NetBeans进行SVG图形设计,以及在Java ME环境中整合SVG图形来提升移动应用的视觉体验和交互性。这个过程不仅涵盖了技术层面...

    svg在移动端的应用-手势图片拖动,手势放大缩小

    2. 移动端SVG应用: - 在移动设备上,SVG可以提供高质量的图形显示,即使在高分辨率屏幕下也保持清晰。 - SVG的可编程性使其适合移动端交互设计,如触摸事件响应和动画效果。 3. 手势图片拖动: - 在移动端,...

Global site tag (gtag.js) - Google Analytics