svg实现星座图的绘制-CSDN博客

本文链接：https://blog.csdn.net/iteye_5620/article/details/82237250

也就是java的散点图，之前用jfreechart实现了一个，效果不理想，后来采用svg实现，还不错
不多说了直接上代码

[b]svg文件[/b]



<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 12.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 51448)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
	<!ENTITY ns_svg "http://www.w3.org/2000/svg">
	<!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
]>

<svg width = "100%" height="100%">
<script xlink:href="../../js/monitor.js"></script>
	<rect x="0" y="0" id="rect1" width = "520" height="520" fill="black" stroke="white" stroke-width="0"></rect>



</svg>

monitor.js



var point = null;
var beginpoint = null;
var endpoint = null;
var SVGDoc;
var currentMode = 0;

var beginpointx = 0;
var beginpointy = 0;
var endpointx = 0;
var endpointy = 0;

var svgns = "http://www.w3.org/2000/svg";
var xlinkns = "http://www.w3.org/1999/xlink";
var svgDocument;
var svgRoot;
var parentwin;
var evt;
function initgis(evt) {
	evt = evt;
	svgDocument = evt.target.ownerDocument;
	svgRoot = svgDocument.documentElement;	
	parentwin = window.parent;
}

//绘制点的方法
function CreatePoint(svgDoc,pointx, pointy, id) {
	svgDocument = svgDoc;
	var svgns = "http://www.w3.org/2000/svg";
	var x = pointx;
	var y = pointy;

	var shape3 = svgDocument.createElementNS(svgns, "rect");
	shape3.setAttributeNS(null, "id", id);
	shape3.setAttributeNS(null, "x", x);
	shape3.setAttributeNS(null, "y", y);
	shape3.setAttributeNS(null, "width", "1");
	shape3.setAttributeNS(null, "height", "1");
	shape3.setAttributeNS(null, "fill", "green");
	svgDocument.documentElement.appendChild(shape3);
}

function RemovePoint(svgDoc,id) {
	svgDocument = svgDoc;
	var root = svgDocument.getRootElement();
	var vid = root.getElementById(id);
	if (vid != null) {
		root.removeChild(vid);
	}
}

jsp中相关代码


function GainConstellationGraphSVG(cardid,channel){
        		 var url = "<%=basePath%>ajax/GainConstellationGraphSVG.action?Rnd="+Math.random()+"&cardid="+cardid+"&channel="+channel;
        	     if(ajaxSvg){
	        	     ajaxSvg.open("get", url, true);
	        		 ajaxSvg.onreadystatechange = ConstellationGraphSVG;
	       			 ajaxSvg.send(null); 
       			 }
        	}
  			function ConstellationGraphSVG(){
      		  if (ajaxSvg.readyState == 4)
      			  {
		            if (ajaxSvg.status == 200)
		            {	
		            	var msg = ajaxSvg.responseText;
		              	 if (msg != "") {
                           	var list = msg.split('|');
                           	for (var i in list) {
								var point = list[i].split(',');
								svgWin = SVGGraph.window;
        						svgDoc = SVGGraph.getSVGDocument();
								svgWin.RemovePoint(svgDoc,point[2]);
							}
							for (var key in list) {
								var point = list[key].split(',');
								svgWin = SVGGraph.window;
        						svgDoc = SVGGraph.getSVGDocument();
								svgWin.CreatePoint(svgDoc,point[0], point[1],point[2]);
							}
                        }else{
                        	///alert("星座图加载失败！");
                            //return;
                        }
		            }
		          }
      		  }


<embed id="SVGGraph" name="SVGGraph" src="rect.svg" width="520" height="520" type="image/svg+xml" wmode="transparent"/>

没秒钟从后台获取到坐标数据，一共16*64个点，绘制点的时候定义了该点的ID，每次重新绘制点都会把之前的点给移除掉，相当于更新星座图。
svgWin = SVGGraph.window;
svgDoc = SVGGraph.getSVGDocument();
这两个参数是关键点，第一个是获取jsp页面的星座图对象，第二个是获取SVG文档的DOM(文档对象模型)

效果图

[img]http://dl.iteye.com/upload/attachment/609719/878173d2-e4f8-3f29-a1bc-1086ebe20c35.png[/img]