커브(할인) 점 플러그 인
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title></title>
<script src="http://webgis.weather.com.cn/map/j/raphael.js"></script>
<script src="http://i.tq121.com.cn/j/jquery-1.8.2.js"></script>
<style type="text/css">
body{ }
</style>
</head>
<body style="background: #4097DB;">
<div id="cc"></div>
<div id="bb"></div>
<script type="text/javascript">
var H = {
_getArrMax:function(arr){
return Math.max.apply(Math,arr) || null;
},
_getArrMin:function(arr){
return Math.min.apply(Math,arr) || null;
},
len:0,
arrTem:[],
_clearArr:function(){
this.arrTem=[];
this.arrCircle = [];
this.arrPath = [];
},
_initWeaData:function(DataLIneY){//
this._clearArr();
this.arrTem = this.arrTem.concat(DataLIneY);
this.len = this.arrTem.length;
// svg circle path
var temMin = this._getArrMin(this.arrTem);//
var temMax = this._getArrMax(this.arrTem);
//temD = X
if(temMin != temMax){
var temD = (this.height-40)/(temMax - temMin);
}else{
var temD = (this.height-40)/1;
}
this.cel_w = this.width/this.len;
var that = this;
$.each(this.arrTem,function(i,v){
var circleX = that.cel_w*i+that.cel_w/2;
var circleY = (temMax-that.arrTem[i])*temD+20;
that.arrCircle.push({'x':circleX,'y':circleY});
that.arrPath.push([circleX,circleY]);
})
this.svgPath = this.arrPath.join(',');
},
arrPath:[],
width:680,
height:70,
cel_w:0,
svgPath:'',
arrCircle:[]
}
function CREAT_H_obj(options){
$.extend(this,options);
}
CREAT_H_obj.prototype = H;
function DrawLine(options){
var Line = new CREAT_H_obj(options);
Line._initWeaData(Line.lineData || []);
var paper = Raphael(Line.domId.replace('#',''),Line.width,Line.height);
//
paper.path('M10,20').attr({"stroke": Line.lineColor,"stroke-width":Line.lineStrokewidth,"path":"M"+Line.arrPath.slice(Line.pastNumber).join(',')});
//
paper.path('M10,20').attr({"stroke":Line.lineColor,"stroke-width":Line.lineStrokewidth,"opacity":"0.3","path":"M"+Line.arrPath.slice(0,Line.pastNumber+1).join(',')});
var objCircle = [],space; // circle
for(var i = 0; i<= Line.len-1; i++){
var circleX = Line.arrCircle[i].x;
var circleY = Line.arrCircle[i].y;
if(options.position=='up'){
var space = -15;
}else{
var space = 15;
}
var circleColor = options.circleColor;
if (i<options.pastNumber) {
objCircle.push(paper.circle(10,circleY,options.circleWidth).attr({'fill':circleColor,"opacity":"0.3",'stroke':circleColor}).animate({'cx':circleX-options.circleWidth},500));
paper.text(circleX-15,circleY+space,Line.lineData[i]+'℃'||'').attr({
"fill":"#aaa",
"font-size":"12px",
"text-anchor":"start"
});
}else{
objCircle.push(paper.circle(10,circleY,options.circleWidth).attr({'fill':circleColor,'stroke':circleColor}).animate({'cx':circleX},500));
paper.text(circleX-15,circleY+space,Line.lineData[i]+'℃'||'').attr({
"fill":"#fff",
"font-size":"12px",
"text-anchor":"start"
});
};
}
}
</script>
<script type="text/javascript">
//
var data=[31,34,36,34,33,31,31,30,30]
new DrawLine({
domId:'#cc',
width:800,
height:100,
lineData:data,//
circleColor:'#fff',
circleWidth:4,
lineColor:'#fff',
lineStrokewidth:2,
pastNumber:1,
position:'up',
animate:0
});
var data1=[1,12,50]
new DrawLine({
domId:'#bb',
width:800,
height:100,
lineData:data1,//
circleColor:'#fff',
circleWidth:4,
lineColor:'#fff',
lineStrokewidth:2,
pastNumber:1,
position:'down',
animate:0
});
</script>
</body>
</html>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.