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 id="box"></div> 
    <div id="box1"></div> 
    </body> 
</html>

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

«
»

PHP教程

PHP简介 PHP基本语法 PHP类型 PHP变量 PHP运算符 PHP控制结构 PHP函数 PHP类与对象 PHP异常处理函数库分类

ymyang 绘图 实例代码

ymyang 绘图实例代码