svg实现星座图的绘制
也就是java的散点图，之前用jfreechart实现了一个，效果不理想，后来采用svg实现，还不错不多说了直接上代码
svg文件
<?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.split(',');svgWin = SVGGraph.window; svgDoc = SVGGraph.getSVGDocument();svgWin.RemovePoint(svgDoc,point);}for (var key in list) {var point = list.split(',');svgWin = SVGGraph.window; svgDoc = SVGGraph.getSVGDocument();svgWin.CreatePoint(svgDoc,point, point,point);} }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(文档对象模型)
效果图
http://dl.iteye.com/upload/attachment/609719/878173d2-e4f8-3f29-a1bc-1086ebe20c35.png
页:
[1]