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轴数值
}

无标题文档

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 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;i0)
{
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

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;
}

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