svg应用

daoger

浏览: 530552 次
性别:
来自: 山东济南

最近访客更多访客>>

sargeguo

leigh94

Atomic

ycj_xiyang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

学习笔记

Ajax QQ J#Adobe HTML

今天没什么事情，发一个以前做的图表的例子，希望对初学者能有所帮助！
这是用我用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

分享到：

dhtmlxgrid 1.4功能自助增补（一）－－右键 ... | 开发中莫名奇妙的事（八卦）

2007-10-12 10:35
浏览 10261
评论(3)
查看更多

3 楼 zpj888 2008-08-13

你好，我目前在做的一个项目也是使用SVG做实时监控，目前已经实现了主要功能，但是有一些关于SVG的问题，比如实时动态曲线，就像你这个例子一样，只是我一屏幕显示的比较多，可能多达数千条line组成，这样造成画面刷新很消耗系统资源
不知道能不能跟你加好友聊一聊啊，我的QQ是121425488

2 楼 daoger 2008-06-26

你把横轴和纵轴的坐标数据改成动态加载就可以了啊！
用ajax固定时间间隔发送请求，读取数据库数据，解析后重新加载曲线！

1 楼 slc123 2008-06-26

你好，这篇文章对我很有帮助。不过我现在想做一个实时曲线，横轴——时间轴是在不断变化的，而不是固定好了的，曲线数据是从数据库中读来的。能不能帮帮我那。我的邮箱：slchao123@163.com

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

svg应用

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

svg应用

评论

发表评论

相关推荐

java获得数据库信息常用API(DatabaseMetaData)示例

关于form的重置问题

一道java笔试题

dhtmlXGrid 学习笔记

最近访客更多访客>>