上一篇我们说了如何画圆饼。这一次我们说如何做折线图。网上有个库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拷代码吧。嘿嘿。
以上全部手写个人原创不加防腐剂。哈哈哈，如果您看到这里了，跪求留个言。哪怕批评一下也好。嘿嘿。
时间： 2024-10-10 14:50:48