ymyang 绘图实例代码- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > ymyang 绘图实例代码

Javascript: 自己开发Dojo的建议框架; js每次Title显示不同的名言; 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术; 无限级别的菜单（侧拉菜单）; 点选TOP后并不是直接跳到页顶的，而是滚动上去; js下拉菜单中自动信息轮换播放; 英文首字母全大写的js实现脚本; 实例区别onClick和onDBClick两事件方法; 改变文本框字体颜色的js脚本; js星空效果代码; 判断li是否有样式的js代码; 文本框点击时文字消失，失去焦点时文字出现; 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开; 右下角弹出窗口效果代码; JS控制对象移动效果; 验证用户是否修改过页面的数据的实现方法; Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]; 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度; EXT富客户端后台管理系统初步代码; 不同浏览器javascript变量作用域的处理方法

No. « ‹ 110 111 112 113 › »

技术文章搜索

关键字

Javascript 中的 ymyang 绘图实例代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 388 ::

收藏到网摘: n/a

响应鼠标变换表格背景或者颜色的代码 JS 单击连接保存图片的函数

非常不错的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/tech/20091012/20091012094658_632cee946db83e7a52ce5e8d6f0fed35.gif) no-repeat;
}
</style></head> <body> <div id="box"></div> <div id="box1"></div> </body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

响应鼠标变换表格背景或者颜色的代码 JS 单击连接保存图片的函数

Javascript 中的 ymyang 绘图 实例代码

评论 (0) All

Javascript 中的 ymyang 绘图实例代码