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 par 3 은 그림 스타일 매개 변수 이 고 선택 가능 한 매개 변 수 는 기본 값 입 니 다


{ 
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 < 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,/드로잉 영역 높이 max Height:50,/y 축 최고 수치 barDistance:26,/x 축 좌표 간격 상단 거리:0,//상부 충전 하단 거리:0,//밑부분 충전 왼쪽 거리:20,pointWidth:5,//좌표 점 너비 point 높이:5,/좌표 점 높이 point Color:"\#ff 0000",/좌표 점 색상 lineColor:"\#ffd43a",//연결선 색상 value:20,/y 축 수치 너비 value Color:"\#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;ithis.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,28,26,50,35,28,34,39,55],/y 축 데이터[188,189,190,191,192,193,194,195,196,197,199,200,201,202,203,205,206,207,208]/x 축 데이터);var data 1=new period([48,23,10,2,12,8,24,25,15,35,25,14,42,58,46,25,12,8,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"}); }

[Ctrl+A 전체 선택:외부 Js 를 도입 하려 면 페이지 를 새로 고침 해 야 실행 할 수 있 습 니 다.]

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Android: 자체 애니메이션 실천 - Tencent OS 녹음기 파형 을 예 로 들 면

우 리 는 파형 함수 가 매 핑 관 계 를 가지 면 파형 상의 모든 샘플링 점 을 쉽게 얻 을 수 있 습 니 다. 우 리 는 Bugly 가 제시 한 효과 그림 의 파 내 에 그 라 데 이 션 효과 가 있 는 것 을 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

ymyang 그래 픽 인 스 턴 스 코드

좋은 웹페이지 즐겨찾기