Reference method:
Copy Code code as follows:
New Gov. Graphic (PAR1,PAR2,PAR3);
par1 for drawing data
Copy Code code as follows:
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 axis data [ 188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208]//x axis Data
);
PAR2 the container layer ID for the drawing
par3 for drawing style parameters, optional parameters
Default value:
Copy Code code as follows:
{
height:170,//drawing area Height
MAXHEIGHT:50,//y axis maximum value
bardistance:26,//x axis coordinate spacing
topdistance:0,//Upper Fill
bottomdistance:0,//Bottom padding
LEFTDISTANCE:20,//left-part padding
Pointwidth:5,//Coordinate point width
Pointheight:5,//coordinate point height
Pointcolor: "#ff0000",//Coordinate point color
LineColor: "#ffd43a",//Cable color
VALUEWIDTH:20,//y axis value width
Valuecolor: "#000",//y axis numerical color
TIMEWIDTH:20,//x axis value width
Timecolor: "#000",//x axis numerical color
Disvalue:true,//whether to display y-axis values
Distime:true//whether to display X axis values
}
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> Untitled document </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[p Roperty]; 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,//plot area height MaxHeight ://y axis Highest numerical bardistance:26,//x axis coordinate spacing topdistance:0,//Upper fill bottomdistance:0,//Bottom Fill leftdistance:20, pointwidth:5,//Coordinate point width pointheight:5,//coordinate point height Color: "#ff0000",//Coordinate point colors LineColor: "#ffd43a",///Connector color valuewidth:20,//y axis numerical width value Color: "#000",//y axis numerical color timewidth:20,//x axis value width timecolor: "#000",//x axis numerical color disvalue:t Rue,//whether to display y-axis values Distime:trUE//Show X axis value} 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 (showPoin Ts[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"; The Var _leng=showpoints.length for (Var i=0;i<_leng;i++) {if (I&G t;0) {This.drawline (PARseint (Showpoints[i-1].style.left), parseint (showpoints[i-1].style.to p), 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 axis data [188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208]//x axis data); 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 axis data [188,189,190,191,19 2,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208]//x axis data); 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></pead> <body> <div id= "box" ></div> <div id= "Box1" ></div& Gt </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
