标签：
上一篇我们说了如何画圆饼。这一次我们说如何做折线图。网上有个库chartist.js做svg矢量数据的一个库。里面有个折现统计，我没有做的和他一样，因为我也不是很熟悉svg.权当先试试水而已，所以写的不好.望各位指教。上代码！！！！！！！！！！！
(function(){ function svg(option){ this.config = this.extend(this.config,option); /*表格生成*/ this.crateform(); this.holaddata(); this.holdfn(); this.errtest(); } svg.prototype = { constructor:svg, config:{ dataformx:[], dataformy:[], parentdataformx:document.createDocumentFragment(), parentdataformy:document.createDocumentFragment(), parentdatapoints:document.createDocumentFragment(), xwidth:0, /*间距*/ ywidth:60, //行高 alldata:[], /*实际数据点*/ datapoints:[], /*单个数据点*/ initx:50, inity:30, linecolor:["#FF6666","#339999","#CCFF99","#CCCC33"], circlecolor:["#FF9966","#33CC33","#99CCCC","#CC99CC"], target:"", //目标节点 datar:5, //数据点半径 linewidth:3, //线条大小 frmaeline:2, //表格线条大小 fontcolor:"#99CC33", //坐标字体颜色 colordata:"#FFCC99" //数据具体演示颜色 }, extend:function(config,option){ for(var i in option){ config[i] = option[i] } return config; }, /*表格生成*/ crateform:function(){ var xdata = this.config.dataformx, ydata = this.config.dataformy; var ywidth = this.config.ywidth; var targetwidth = this.config.targetwidth, targetheight = this.config.targetheight; var initx = this.config.initx, inity = this.config.inity; /*横向表格*/ for(var i= xdata.length;i>=0;i--){ var path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path.setAttribute(‘d‘,"M"+initx+" "+(i*ywidth+inity)+" L"+(ydata.length*ywidth+initx)+" "+(i*ywidth+inity)+" "); path.setAttribute("stroke-width",this.config.frmaeline) path.setAttribute("stroke","#CCCCCC") path.setAttribute("stroke-dasharray","10,10") var text = document.createElementNS("http://www.w3.org/2000/svg", "text"); text.setAttribute("x",0); if(i!= xdata.length){ text.setAttribute("y",(i+1)*ywidth+inity); text.setAttribute("fill", this.config.fontcolor) text.innerHTML = xdata[xdata.length-1-i]; } this.config.parentdataformy.appendChild(text); this.config.parentdataformy.appendChild(path); } /*纵向表格*/ var xwidth= this.config.xwidth=this.config.ywidth; for(var i=0 ; i<=ydata.length;i++){ var path = document.createElementNS("http://www.w3.org/2000/svg", "path"); path.setAttribute(‘d‘,"M"+(i*xwidth+initx)+" "+inity+" L"+(i*xwidth+initx)+" "+(xdata.length*ywidth+inity)+" "); path.setAttribute("stroke-width",this.config.frmaeline) path.setAttribute("stroke","#CCCCCC") path.setAttribute("stroke-dasharray","10,10") var text = document.createElementNS("http://www.w3.org/2000/svg", "text"); text.setAttribute("x",i*xwidth+initx); text.setAttribute("y",(xdata.length*ywidth+inity+20)); text.setAttribute("fill", this.config.fontcolor) if(ydata[i]){ text.innerHTML = ydata[i]; } this.config.parentdataformy.appendChild(text); this.config.parentdataformy.appendChild(path); } document.getElementById(this.config.target).appendChild(this.config.parentdataformy); }, /*描点画线生成器*/ datapoints:function(index){ var dataformy = this.config.dataformy, dataformx = this.config.dataformx ,datapoints = this.config.datapoints; var ywidth = this.config.ywidth, xwidth = this.config.xwidth; var initx = this.config.initx, inity = this.config.inity; /*行高平局*/ var yavg = ((dataformx.length-1)*ywidth)/(dataformx[dataformx.length-1]-dataformx[0]); var xavg = ((dataformy.length-1)*xwidth)/(dataformy[dataformy.length-1]-dataformy[0]); var tempx=initx, tempy=((dataformx.length)*ywidth+inity), tempendx=0,tempendy=0; for(var i =0; i<datapoints.length;i++){ var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); var path = document.createElementNS("http://www.w3.org/2000/svg", "path"); var context = document.createElement("span") tempendx = (datapoints[i][0]-dataformy[0])*xavg+initx; tempendy = (dataformx.length*ywidth+inity)-(datapoints[i][1]-dataformx[0])*yavg; circle.setAttribute(‘cx‘,tempendx); circle.setAttribute(‘cy‘,tempendy); circle.setAttribute("fill",this.config.circlecolor[index]); circle.setAttribute("r",this.config.datar); circle.setAttribute("class", "circle") context.innerHTML =""+datapoints[i][0]+" , "+datapoints[i][1]+""; circle.appendChild(context); path.setAttribute(‘d‘,"M"+tempx+" "+tempy+" L"+tempendx+" "+tempendy+" "); path.setAttribute("stroke-width",this.config.linewidth) path.setAttribute("stroke",this.config.linecolor[index]) path.setAttribute("class", "line") tempx=tempendx; tempy = tempendy; this.config.parentdatapoints.appendChild(path); this.config.parentdatapoints.appendChild(circle); } document.getElementById(this.config.target).appendChild(this.config.parentdatapoints); }, /*数据点分发器*/ holaddata:function(){ var alldata = this.config.alldata; for(var i =0; i<alldata.length; i++){ this.config.datapoints = alldata[i]; this.datapoints.call(this,i) } }, holdfn:function(){ var target = document.getElementById(this.config.target); var that = this; var divcontext = document.createElement("div"); target.onmouseover = function(event){ var event = event?event:window.event; var tag = event.target||event.srcElement; if(tag.nodeName =="circle"){ var x = event.pageX; var y = event.pageY; divcontext.innerHTML = tag.children[0].innerHTML; divcontext.style.cssText ="position:absolute;top:"+y+"px;left:"+x+"px;line-height: 20px;color:"+that.config.colordata+""; divcontext.setAttribute("id", "tip") } document.body.appendChild(divcontext) } }, errtest:function(){ }, } function _svg(option){ new svg(option) } this._svg = _svg }).call(this) /*调用方法*/ /*参数传递*/ // _svg({ // /*纵坐标参数*/ // dataformx:[0,20,40,60,80,100], // /*横坐标参数*/ // dataformy:[1980,1990,2000,2010,2020,2030], // /*数据点参数*/ // alldata:[[[1982,15],[1985,40],[1995,5],[1998,95],[2003,5],[2008,85],[2015,65],[2021,55]], // [[1985,96],[1990,20],[1995,75],[1999,15],[2008,30],[2015,75],[2020,21],[2025,16]], // [[1991,23],[1996,26],[1999,36],[2005,15],[2012,36],[2017,85],[2025,56],[2029,25]], // [[1989,3],[1994,15],[1998,65],[2006,89],[2016,68],[2020,12],[2025,5],[2028,96]] // ], // /*目标节点ID*/ // target:"nicai", // //以上数据为必设数据 // //一下数据为选设数据 // /*表格间距*/ // ywidth:80, // /*设置数据点大小*/ // datar:5, // /*设置线条大小*/ // linewidth:2, // /*设置表格线条大小*/ // frmaeline:1, // /*线条颜色*/ // linecolor:["#FF6666","#339999","#CCFF99","#CCCC33"],//请务必设置完整对应数据 // /*数据点颜色*/ // circlecolor:["#FF9966","#33CC33","#99CCCC","#CC99CC"],//请务必设置完整对应数据 // /*坐标颜色*/ // fontcolor:"#FF9900", // /*数据具体演示颜色*/ // colordata:"#CCCC33" // })
html代码：
<svg width=600 height=550 id="discounted">
</svg>
调用代码
/*调用方法*/ /*参数传递*/ _svg({ /*纵坐标参数*/ dataformx:[0,20,40,60,80,100], /*横坐标参数*/ dataformy:[1980,1990,2000,2010,2020,2030], /*数据点参数*/ alldata:[[[1982,15],[1985,40],[1995,5],[1998,95],[2003,5],[2008,85],[2015,65],[2021,55]], [[1985,96],[1990,20],[1995,75],[1999,15],[2008,30],[2015,75],[2020,21],[2025,16]], [[1991,23],[1996,26],[1999,36],[2005,15],[2012,36],[2017,85],[2025,56],[2029,25]], [[1989,3],[1994,15],[1998,65],[2006,89],[2016,68],[2020,12],[2025,5],[2028,96]] ], /*目标节点ID*/ target:"discounted", //以上数据为必设数据 //一下数据为选设数据 /*表格间距*/ ywidth:80, /*设置数据点大小*/ datar:5, /*设置线条大小*/ linewidth:2, /*设置表格线条大小*/ frmaeline:1, /*线条颜色*/ linecolor:["#FF6666","#339999","#CCFF99","#CCCC33"],//请务必设置完整对应数据 /*数据点颜色*/ circlecolor:["#FF9966","#33CC33","#99CCCC","#CC99CC"],//请务必设置完整对应数据 /*坐标颜色*/ fontcolor:"#FF9900", /*数据具体演示颜色*/ colordata:"#CCCC33" })
哈哈哈，终于贴完了。调用的接口我做了，高自由度的控制，用户可以改变图标中的所有样式。大家戳这里看看(如果半天出来，要么是你网速太坑要么是github抽风了)http://fengchuantao.github.io/svg/web/discounted.html; 如果你和我的一样。请移步去github拷代码吧。嘿嘿。
以上全部手写个人原创不加防腐剂。哈哈哈，如果您看到这里了，跪求留个言。哪怕批评一下也好。嘿嘿。
标签：
原文地址：http://www.cnblogs.com/fctdream/p/4417209.html
