ymyang 绘图实例代码

更新时间：2009年04月01日 00:54:06 作者：

非常不错的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需再刷新一下页面才能执行]

超简单的微信小程序轮播图
这篇文章主要为大家详细介绍了超简单的微信小程序轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11
微信小程序使用canvas画图保存图片到手机相册代码示例
在微信小程序中利用canvas API绘制图形后,可通过CanvasContext.draw方法将图形渲染到画布,并使用wx.canvasToTempFilePath将画布导出为图片,再通过wx.saveImageToPhotosAlbum方法保存到手机相册,,需要的朋友可以参考下
2024-09-09
JS 中的 Event Loop 是什么你真的懂
Event Loop，简单翻译就是事件循环，是 JS 语言下实现运行时的一个机制，这篇文章主要介绍了JS 中的 Event Loop 的基本知识,需要的朋友可以参考下
2022-06-06
layui table设置某一行的字体颜色方法
今天小编就为大家分享一篇layui table设置某一行的字体颜色方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JavaScript学习笔记（十）
今天学习的是window对象，还是有点用的。
2010-01-01
javascript多物体运动实现方法分析
这篇文章主要介绍了javascript多物体运动实现方法,结合实例形式分析了JavaScript多物体运动的相关注意事项与具体实现代码,包含四个div块的横向、竖向移动,颜色与边框渐变效果,需要的朋友可以参考下
2016-01-01
JS 获取页面尺寸的方法详解
通过 JS 获取页面相关的尺寸是比较常见的操作,尤其是在动态计算页面布局时,今天我们就来学习一下几个获取页面尺寸的基本方法,需要的朋友可以参考下
2023-09-09
JS处理下划线的方法步骤
本文主要介绍了使用JavaScript处理下划线,特别是在双引号内的下划线不作为分隔符的情况,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2025-01-01
js+css3实现炫酷时钟
这篇文章主要为大家详细介绍了js+css3实现炫酷时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-08-08
微信小程序methods中定义的方法互相调用的实例代码
这篇文章主要介绍了微信小程序methods中定义的方法互相调用的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-08-08