今天没什么事情，发一个以前做的图表的例子，希望对初学者能有所帮助！
这是用我用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应用指南) 完整带目录
SVG应用于变电站图形 电力行业SVG相关资料
《基于XML的SVG应用指南》 .part2.rar
HTML5 SVG应用管理菜单样式.zip
基于XML的SVG应用指南
SVG应用中的图层处理算法.doc
本书详细介绍了SVG中图形，文字，路径，动画，色彩等效果的建立与使用，并且结合ADOBE公司的Illustrator 9.0，以实例讲解了SVG文档的制作与输出过程
第3篇是SVG应用篇，介绍SVG开发的经验和技巧，并且通过几个实例来介绍如何进行SVG的开发。本书内容系统，结构清晰，具有较强的指导性和实用性，适合SVG开发人员学习，也适合作为SVG程序设计参考手册。
本书从指导程序员实际开发应用程序的角度，全面系统地介绍了SVG的核心技术。全书分为3篇。第1篇是SVG开发准备篇，介绍SVG的...第3篇是SVG应用篇，介绍SVG开发的经验和技巧，并且通过几个实例来介绍如何进行SVG的开发。
SVG是W3C推出的一种开放标准的文本式矢量图形描述语言，它是基于XML的，专门为网络而设计的图像格式。使用SVG可以在网页上显示出各种各样的高质量的矢量图形。 本书详细介绍了SVG中图形，文字，路径，动画，色彩等...
SVG是W3C推出的一种开放标准的文本式矢量图形描述语言，它是基于XML的，专门为网络而设计的图像格式。使用SVG可以在网页上显示出各种各样的高质量的矢量图形。 本书详细介绍了SVG中图形，文字，路径，动画，色彩等...