SVG实时曲线.docVIP

svg实时曲线的实现过程 首先看一下大概的效果图。 没数据的时候： 真实环境中 实现步骤： 首先我们新建一个xxx.svg的文件 写入svg代码： 【如果真要一步一步讲太麻烦，直接看全部代码吧】 ?xml version=1.0 encoding=UTF-8? svg xml:space=preserve xmlns=/2000/svg xmlns:xlink=/1999/xlink width=100% height=100% viewBox=0 0 600 300 preserveAspectRatio=none onload=init(evt) g id=graph rect id=bg x1=0 y1=0 width=600 height=300 fill=white/ //4根分割线（上图是修改之前的只有3根） text id=txt1 x=600 y=58 fill=gray text-anchor=end0 pkg/text text id=txt2 x=600 y=118 fill=gray text-anchor=end0 pkg/text text id=txt3 x=600 y=178 fill=gray text-anchor=end0 pkg/text text id=txt4 x=600 y=238 fill=gray text-anchor=end0 pkg/text text id= pkgs x=1 y=13 font-family=SimSun数量(包)/text text id= time x=600 y=298 text-anchor=end font-family=SimSun时间/text text id=graph_in_lbl x=42 y=35 fill=green font-family=SimSun输入:/text text id=graph_out_lbl x=218 y=35 fill=blue font-family=SimSun 输出:/text text id=graph_err_lbl x=412 y=35 fill=red font-family=SimSun错误:/text //3根曲线的path(曲线的点会通过下面方法的数组自动装载到d字符串中) path id=graph_out d= fill=none stroke=blue stroke-width=1 stroke-opacity=0.8/ path id=graph_in d= fill=none stroke=green stroke-width=1 stroke-opacity=0.8/ path id=graph_err d= fill=none stroke=red stroke-width=1 stroke-opacity=0.8/ //输入，输出，错误前面的小直线 path id=in d=M 24 30 L 39 30 stroke=green / path id=out d=M 200 30 L 214 30 stroke=blue / path id=err d=M 394 30 L 409 30 stroke=red / //4个分割线的位置（定位） path id=grid d=M 2 60 L 600 60 M 2 120 L 600 120 M 2 180 L 600 180 M 2 240 L 600 240 stroke=gray / //定义x轴和y轴 line id=axis_x x1=1 y1=299 x2=600 y2=299 stroke=white/ line id=axis_y x1=0 y1=299 x2=0 y2=0 stroke=white/ /g //处理业务 script type=text/ecmascript ![CDATA[ //处理异步传输数据 （通过callback机制返回一个对象，json数据在content里） if (typeof getURL == undefined) { getURL = function(url, callback) { if (!url) throw No URL for getURL; try { if (typeof callback.operationComplete == function) { callback = callback.operationComplete; } } catch (e) {} if (typeof callback != function) { throw N