ymyang 绘图实例代码

发布于 2017-07-20 23:36:33 | 38 次阅读 | 评论: 0 | 来源: 网友投递

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

非常不错的ymyang 绘图效果代码。

引用方法:


new gov.Graphic(par1,par2,par3);

par1 为绘图数据


var data=new period([0,10,22,13,34,25,28,26,30,35,28,34,39,28,26,50,35,28,34,39,55],//y轴数据[188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208]//x轴数据 
);

par2 为绘图的容器层id
par3 为绘图样式参数，可选参数
默认值：


{ 
height:170, //绘图区域高度 
maxHeight:50, //y轴最高数值 
barDistance:26, //x轴坐标间距 
topDistance:0, //上部填充 
bottomDistance:0, //底部填充 
leftDistance:20, //左部填充 
pointWidth:5, //坐标点宽度 
pointHeight:5, //坐标点高度 
pointColor:"#ff0000", //坐标点颜色 
lineColor:"#ffd43a", //连接线颜色 
valueWidth:20, //y轴数值宽度 
valueColor:"#000", //y轴数值颜色 
timeWidth:20, //x轴数值宽度 
timeColor:"#000", //x轴数值颜色 
disvalue:true, //是否显示y轴数值 
distime:true //是否显示x轴数值 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 
<script> 
var gov=new Object(); 
var Class = { 
create: function() { 
return function() { 
this.initialize.apply(this, arguments); 
} 
} 
} 
Object.extend = function(destination, source) { 
for (var property in source) { 
destination[property] = source[property]; 
} 
return destination; 
} 
var $ = function(elem) { 
if (arguments.length > 1) { 
for (var i = 0, elems = [], length = arguments.length; i < length; i++) 
elems.push($(arguments[i])); 
return elems; 
} 
if (typeof elem == 'string') { 
return document.getElementById(elem); 
} else { 
return elem; 
} 
}; 
var period = Class.create(); 
period.prototype = { 
            initialize:function(value,time){ 
                this.value = value;             
                this.time = time; 
            } 
}; 
gov.Graphic = Class.create(); 
gov.Graphic.prototype={ 
    initialize: function(data,elm,options){ 
        this.setOptions(options); 
        this.entity=document.createElement("div"); 
        this.pointBox=$(elm); 
        this.showPointGraphic(data); 
    }, 
    setOptions: function(options) { 
        this.options = { 
            height:170, //绘图区域高度 
            maxHeight:50, //y轴最高数值 
            barDistance:26, //x轴坐标间距 
            topDistance:0, //上部填充 
            bottomDistance:0, //底部填充 
            leftDistance:20, 
            pointWidth:5, //坐标点宽度 
            pointHeight:5, //坐标点高度 
            pointColor:"#ff0000", //坐标点颜色 
            lineColor:"#ffd43a", //连接线颜色 
            valueWidth:20, //y轴数值宽度 
            valueColor:"#000", //y轴数值颜色 
            timeWidth:20, //x轴数值宽度 
            timeColor:"#000", //x轴数值颜色 
            disvalue:true, //是否显示y轴数值 
            distime:true //是否显示x轴数值 
        } 
        Object.extend(this.options, options || {}); 
    }, 
    showPointGraphic:function(data,obj) 
    { 
            var This=this; 
            var showPoints=new Array(); 
            var values=new Array(); 
            var times=new Array(); 
            This.points=data; 
            This.count=data.value.length; 
            for(var i=0;i<This.count;i++) 
            { 
                var showPoint=document.createElement("div"); 
var spanValue=document.createElement("span"); 
var spanTime=document.createElement("span"); 
                showPoint.height=This.points.value[i]; 
showPoint.value=This.points.value[i]; 
showPoint.time=This.points.time[i]; 
                 
                showPoint.style.backgroundColor=this.options.pointColor; 
                showPoint.style.fontSize="0px"; 
                showPoint.style.position="absolute"; 
                showPoint.style.zIndex ="999"; 
                showPoint.style.width=this.options.pointWidth+"px"; 
                showPoint.style.height=this.options.pointHeight+"px"; 
                showPoint.style.top=this.options.topDistance+"px";

spanValue.style.position="absolute"; 
                spanValue.style.width=this.options.valueWidth+"px"; 
                spanValue.style.textAlign="center"; 
                spanValue.style.color=this.options.valueColor; 
                spanValue.style.zIndex ="999"; 
spanTime.style.position="absolute"; 
                spanTime.style.width=this.options.timeWidth+"px"; 
                spanTime.style.textAlign="center"; 
                spanTime.style.color=this.options.timeColor; 
                var timeHeight=15; 
                var valueHeight=21; 
                if(!this.options.disvalue) { 
                    spanValue.style.display="none"; 
                    valueHeight=this.options.pointHeight; 
                } 
                if(!this.options.distime) { 
                    spanTime.style.display="none"; 
                    timeHeight=0; 
                } 
                var left; 
                if(showPoints.length!=0){ 
                    left=parseInt(showPoints[showPoints.length-1].style.left)+parseInt(showPoints[showPoints.length-1].style.width)+this.options.barDistance; 
                } 
                else{ 
                    left=this.options.leftDistance; 
                } 
                 
                showPoint.style.left=left+"px"; 
spanValue.style.left=left+parseInt((this.options.pointWidth-this.options.valueWidth)/2)+"px"; 
spanTime.style.left=left+parseInt((this.options.pointWidth-this.options.timeWidth)/2)+"px"; 
                                                 
                if(showPoint.height>this.options.maxHeight) 
                { 
                    showPoint.height=this.options.maxHeight; 
                } 
                 
         spanValue.innerHTML=showPoint.value; 
                spanTime.innerHTML=showPoint.time;

showPoints.push(showPoint); 
values.push(spanValue); 
times.push(spanTime); 
                This.entity.appendChild(showPoint); 
                This.entity.appendChild(spanValue); 
                This.entity.appendChild(spanTime); 
                 
                var percentage=showPoints[i].height/this.options.maxHeight||0; 
                var pointTop=(this.options.height-this.options.topDistance-this.options.bottomDistance-timeHeight-valueHeight)*percentage; 
                showPoints[i].style.top=(this.options.height-this.options.bottomDistance-pointTop-timeHeight-this.options.pointHeight)+"px"; 
values[i].style.top=(this.options.height-this.options.bottomDistance-pointTop-timeHeight-valueHeight)+"px"; 
times[i].style.top=this.options.height-this.options.bottomDistance-timeHeight+"px"; 
            } 
            var _leng=showPoints.length 
            for(var i=0;i<_leng;i++) 
            { 
                if(i>0) 
                    { 
                        This.drawLine(parseInt(showPoints[i-1].style.left), 
                                                    parseInt(showPoints[i-1].style.top), 
                                                    parseInt(showPoints[i].style.left), 
                                                    parseInt(showPoints[i].style.top) 
                                                    ); 
                    } 
            } 
            This.Constructor.call(This); 
        }, 
        drawLine:function(startX,startY,endX,endY) 
        { 
            var xDirection=(endX-startX)/Math.abs(endX-startX); 
            var yDirection=(endY-startY)/Math.abs(endY-startY); 
            var xDistance=endX-startX; 
            var yDistance=endY-startY; 
            var xPercentage=1/Math.abs(endX-startX); 
            var yPercentage=1/Math.abs(endY-startY); 
            if(Math.abs(startX-endX)>=Math.abs(startY-endY)) 
            { 
                var _xnum=Math.abs(xDistance) 
                for(var i=0;i<=_xnum;i++) 
                { 
                    var point=document.createElement("div"); 
                    point.style.position="absolute"; 
                    point.style.backgroundColor=this.options.lineColor; 
                    point.style.fontSize="0"; 
                    point.style.width="1px"; 
                    point.style.height="1px";                             
                     
                    startX+=xDirection; 
                    point.style.left=startX+this.options.pointWidth/2+"px"; 
                    startY=startY+yDistance*xPercentage; 
                    point.style.top=startY+this.options.pointHeight/2+"px"; 
                    this.entity.appendChild(point); 
                } 
            } 
            else 
            { 
                var _ynum=Math.abs(yDistance) 
                for(var i=0;i<=_ynum;i++) 
                { 
                    var point=document.createElement("div"); 
                    point.style.position="absolute"; 
                    point.style.backgroundColor=this.options.lineColor; 
                    point.style.fontSize="0"; 
                    point.style.width="1px"; 
                    point.style.height="1px";                             
                     
                    startY+=yDirection; 
                    point.style.top=startY+this.options.pointWidth/2+"px"; 
                    startX=startX+xDistance*yPercentage; 
                    point.style.left=startX+this.options.pointHeight/2+"px"; 
                    this.entity.appendChild(point); 
                } 
            } 
        }, 
        Constructor:function() 
        { 
            this.entity.style.position="absolute"; 
            this.pointBox.innerHTML=""; 
            this.pointBox.appendChild(this.entity); 
        } 
} 
    window.onload=function(){ 
        var data=new period([0,10,22,13,34,25,28,26,30,35,28,34,39,28,26,50,35,28,34,39,55],//y轴数据 
            [188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208]//x轴数据 
            ); 
        var data1=new period([48,23,10,2,12,8,24,25,15,35,25,14,42,58,46,25,12,8,14,28,42],//y轴数据 
            [188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208]//x轴数据 
            ); 
        new gov.Graphic(data,"box"); 
        new gov.Graphic(data1,"box1",{ pointColor:"#3366ff",lineColor:"#33ffff"}); 
    } 
</script> 
<style type="text/css"> 
body,td,th { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    margin:0px; 
    padding:0px; 
} 
#box,#box1{ 
    padding:13px 0px 10px; 
    padding-left:28px; 
    width:677px; 
    height:180px; 
    background:url(/upload/20090401005357125.gif) no-repeat; 
} 
</style></head> 
    <body> 
    <div></div> 
    <div></div> 
    </body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

JavaScript客户端脚本语言

后端技术

前端技术

数据库

热门框架

常用IDE

其他

ymyang 绘图 实例代码

JavaScript客户端脚本语言

后端技术

前端技术

数据库

热门框架

常用IDE

其他

ymyang 绘图实例代码