html5---svg(折现数据表格)

浏览数：77 / 时间：2015年06月09日

上一篇我们说了如何画圆饼。这一次我们说如何做折线图。网上有个库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拷代码吧。嘿嘿。

以上全部手写个人原创不加防腐剂。哈哈哈，如果您看到这里了，跪求留个言。哪怕批评一下也好。嘿嘿。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

html5---svg(折现数据表格)