javascript实现的一个简单统计图类
2008-07-12 17:09
597 查看
目前写了两种Feature
在IE,FF,Opera,Safari上测试通过
不过目前只是实现，还不是很优化^_^
样式定义：
1var Style=
2
类的定义：
1function Graphic(left,top)
2
使用方法：
1function initialize()
2
完整示例:
<html>
<head>
<script type="text/javascript">
var Style=
{
barStyle:
{
style1:
{
backgroundColor:"#ff0000"
},
style2:
{
backgroundColor:"#ffff00",
borderStyle:"solid",
borderWidth:"1px",
borderColor:"#0000ff"
}
},
pointStyle:
{
style1:
{
backgroundColor:"#ff0000",
lineColor:"#ff0000"
},
style2:
{
backgroundColor:"#00ff00",
lineColor:"#00ff00"
}
}
};
function Graphic(left,top)
{
this.entity=document.createElement("div");
this.height=200;
this.barWidth=20;
this.maxHeight=0;
this.barDistance=20;
this.topDistance=20;
this.points=new Array();
var This=this;
var showPoints=new Array();
var bars=new Array();
var times=new Array();
var values=new Array();
var elements=new Array();
function Constructor()
{
This.entity.style.position="absolute";
This.entity.style.borderLeftStyle="solid";
This.entity.style.borderLeftWidth="1px";
This.entity.style.borderLeftColor="#000000";
This.entity.style.borderBottomStyle="solid";
This.entity.style.borderBottomWidth="1px";
This.entity.style.borderBottomColor="#000000";
This.setPosition(left,top);
document.body.appendChild(This.entity);
};
this.setPosition=function(left,top)
{
var deltaX=left-parseInt(This.entity.style.left);
var deltaY=top-parseInt(This.entity.style.top);
This.entity.style.left=(isNaN(left)?"100":left)+"px";
This.entity.style.top=(isNaN(top)?"300":top)+"px";
for(var i=0;i<bars.length;i++)
{
bars[i].style.left=parseInt(bars[i].style.left)+deltaX+"px";
bars[i].style.top=parseInt(bars[i].style.top)+deltaY+"px";
values[i].style.left=parseInt(values[i].style.left)+deltaX+"px";
values[i].style.top=parseInt(values[i].style.top)+deltaY+"px";
times[i].style.left=parseInt(times[i].style.left)+deltaX+"px";
times[i].style.top=parseInt(times[i].style.top)+deltaY+"px";
}
};
this.addPoint=function(value,time)
{
This.points.push(
{
id:This.points.legnth==0?0:This.points.length-1,
value:value,
time:time
});
}
this.showBarGraphic=function(barStyle)
{
for(var i=0;i<This.points.length;i++)
{
var bar=document.createElement("div");
var spanValue=document.createElement("span");
var spanTime=document.createElement("span");
bar.value=This.points[i].value;
bar.time=This.points[i].time;
for(var bs in barStyle)
{
bar.style[bs]=barStyle[bs];
}
bar.style.fontSize="1px";
bar.style.position="absolute";
bar.style.width=This.barWidth;
bar.style.top=parseInt(This.entity.style.top)+This.topDistance+"px";
bar.style.left=(bars.length==0?
parseInt(This.entity.style.left)+This.barDistance:
parseInt(bars[bars.length-1].style.left)+parseInt(bars[bars.length-1].style.width)+This.barDistance)+"px";
if(bar.value>This.maxHeight)
{
bar.style.height=This.height-This.topDistance+"px";
This.maxHeight=bar.value;
}
spanValue.innerHTML=bar.value;
spanValue.style.position="absolute";
spanValue.style.left=bar.style.left;
spanTime.innerHTML=bar.time;
spanTime.style.position="absolute";
spanTime.style.left=bar.style.left;
bars.push(bar);
values.push(spanValue);
times.push(spanTime);
document.body.appendChild(bar);
elements.push(bar);
document.body.appendChild(spanValue);
elements.push(spanValue);
document.body.appendChild(spanTime);
elements.push(spanTime);
}
for(var i=0;i<bars.length;i++)
{
var percentage=bars[i].value/This.maxHeight;
bars[i].style.height=(This.height-This.topDistance)*percentage+"px";
bars[i].style.top=parseInt(This.entity.style.top)+(This.height-parseInt(bars[i].style.height))+"px";
values[i].style.top=parseInt(bars[i].style.top)-20+"px";
times[i].style.top=parseInt(bars[i].style.top)+parseInt(bars[i].style.height)+"px";
}
This.updateDisplay();
};
this.showPointGraphic=function(pointStyle)
{
for(var i=0;i<This.points.length;i++)
{
var showPoint=document.createElement("div");
var spanValue=document.createElement("span");
var spanTime=document.createElement("span");
showPoint.value=This.points[i].value;
showPoint.time=This.points[i].time;
showPoint.lineColor=pointStyle.lineColor;
for(var ps in pointStyle)
{
showPoint.style[ps]=pointStyle[ps];
}
showPoint.style.fontSize="1px";
showPoint.style.position="absolute";
showPoint.style.width="5px";
showPoint.style.top=parseInt(This.entity.style.top)+This.topDistance+"px";
showPoint.style.left=(showPoints.length==0?
parseInt(This.entity.style.left)+This.barDistance:
parseInt(showPoints[showPoints.length-1].style.left)+parseInt(showPoints[showPoints.length-1].style.width)+This.barDistance)+"px";
if(showPoint.value>This.maxHeight)
{
This.maxHeight=showPoint.value;
}
spanValue.innerHTML=showPoint.value;
spanValue.style.position="absolute";
spanValue.style.left=showPoint.style.left;
spanTime.innerHTML=showPoint.time;
spanTime.style.position="absolute";
spanTime.style.left=showPoint.style.left;
showPoints.push(showPoint);
values.push(spanValue);
times.push(spanTime);
document.body.appendChild(showPoint);
elements.push(showPoint);
document.body.appendChild(spanValue);
elements.push(spanValue);
document.body.appendChild(spanTime);
elements.push(spanTime);
This.updateDisplay();
for(var j=0;j<showPoints.length;j++)
{
var percentage=showPoints[j].value/This.maxHeight;
pointHeight=(This.height-This.topDistance)*percentage;
showPoints[j].style.top=parseInt(This.entity.style.top)+(This.height-pointHeight)+"px";
showPoints[j].style.height="15px";
values[j].style.top=parseInt(showPoints[j].style.top)-20+"px";
times[j].style.top=parseInt(This.entity.style.top)+parseInt(This.entity.style.height)+"px";
}
}
for(var i=0;i<showPoints.length;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),
showPoints[i-1].lineColor
);
}
}
};
this.updateDisplay=function()
{
This.entity.style.width=(This.barWidth+This.barDistance)*This.points.length+This.barDistance;
This.entity.style.height=This.height;
};
this.drawLine=function(startX,startY,endX,endY,colorCode)
{
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))
{
for(var i=0;i<=Math.abs(xDistance);i++)
{
var point=document.createElement("div");
point.style.position="absolute";
point.style.backgroundColor=colorCode;
point.style.fontSize="0";
point.style.width="2px";
point.style.height="2px";
startX+=xDirection;
point.style.left=startX+"px";
startY=startY+yDistance*xPercentage;
point.style.top=startY+"px";
document.body.appendChild(point);
elements.push(point);
}
}
else
{
for(var i=0;i<=Math.abs(yDistance);i++)
{
var point=document.createElement("div");
point.style.position="absolute";
point.style.backgroundColor=colorCode;
point.style.fontSize="0";
point.style.width="2px";
point.style.height="2px";
startY+=yDirection;
point.style.top=startY+"px";
startX=startX+xDistance*yPercentage;
point.style.left=startX+"px";
document.body.appendChild(point);
elements.push(point);
}
}
};
this.clear=function()
{
for(var i=0;i<elements.length;i++)
{
document.body.removeChild(elements[i]);
}
showPoints.length=0;
bars.length=0;
times.length=0;
values.length=0;
elements.length=0;
};
Constructor();
};
var barStyle=Style.barStyle.style1;
var pointStyle=Style.pointStyle.style1;
var graphic;
function initialize()
{
graphic=new Graphic(100,300);
graphic.addPoint(1200,18);
graphic.addPoint(1412,19);
graphic.addPoint(1900,20);
graphic.addPoint(1280,21);
graphic.addPoint(2020,22);
graphic.addPoint(1300,23);
graphic.addPoint(300,24);
graphic.addPoint(2152,25);
graphic.addPoint(1300,26);
graphic.addPoint(280,27);
graphic.addPoint(3020,28);
graphic.addPoint(2300,29);
graphic.addPoint(1300,30);
graphic.addPoint(2352,31);
graphic.barDistance=30;
graphic.clear();
graphic.showPointGraphic(pointStyle);
};
function switchFeature(featureName)
{
switch(featureName)
{
case "bar":
graphic.clear();
graphic.showBarGraphic(barStyle);
break;
case "point":
graphic.clear();
graphic.showPointGraphic(pointStyle);
break;
}
};
function switchStyle(styleName)
{
switch(styleName)
{
case "1":
barStyle=Style.barStyle.style1;
pointStyle=Style.pointStyle.style1;
break;
case "2":
barStyle=Style.barStyle.style2;
pointStyle=Style.pointStyle.style2;
break;
}
};
</script>
</head>
<body onload="initialize()">
<select onchange="switchStyle(this.value)">
<option value="1">Style1</option>
<option value="2">Style2</option>
</select>
<input type="button" value="Feature1" onclick="switchFeature('bar')">
<input type="button" value="Feature2" onclick="switchFeature('point')">
</body>
</html>
在IE,FF,Opera,Safari上测试通过
不过目前只是实现，还不是很优化^_^
样式定义：
1var Style=
2
类的定义：
1function Graphic(left,top)
2
使用方法：
1function initialize()
2
完整示例:
<html>
<head>
<script type="text/javascript">
var Style=
{
barStyle:
{
style1:
{
backgroundColor:"#ff0000"
},
style2:
{
backgroundColor:"#ffff00",
borderStyle:"solid",
borderWidth:"1px",
borderColor:"#0000ff"
}
},
pointStyle:
{
style1:
{
backgroundColor:"#ff0000",
lineColor:"#ff0000"
},
style2:
{
backgroundColor:"#00ff00",
lineColor:"#00ff00"
}
}
};
function Graphic(left,top)
{
this.entity=document.createElement("div");
this.height=200;
this.barWidth=20;
this.maxHeight=0;
this.barDistance=20;
this.topDistance=20;
this.points=new Array();
var This=this;
var showPoints=new Array();
var bars=new Array();
var times=new Array();
var values=new Array();
var elements=new Array();
function Constructor()
{
This.entity.style.position="absolute";
This.entity.style.borderLeftStyle="solid";
This.entity.style.borderLeftWidth="1px";
This.entity.style.borderLeftColor="#000000";
This.entity.style.borderBottomStyle="solid";
This.entity.style.borderBottomWidth="1px";
This.entity.style.borderBottomColor="#000000";
This.setPosition(left,top);
document.body.appendChild(This.entity);
};
this.setPosition=function(left,top)
{
var deltaX=left-parseInt(This.entity.style.left);
var deltaY=top-parseInt(This.entity.style.top);
This.entity.style.left=(isNaN(left)?"100":left)+"px";
This.entity.style.top=(isNaN(top)?"300":top)+"px";
for(var i=0;i<bars.length;i++)
{
bars[i].style.left=parseInt(bars[i].style.left)+deltaX+"px";
bars[i].style.top=parseInt(bars[i].style.top)+deltaY+"px";
values[i].style.left=parseInt(values[i].style.left)+deltaX+"px";
values[i].style.top=parseInt(values[i].style.top)+deltaY+"px";
times[i].style.left=parseInt(times[i].style.left)+deltaX+"px";
times[i].style.top=parseInt(times[i].style.top)+deltaY+"px";
}
};
this.addPoint=function(value,time)
{
This.points.push(
{
id:This.points.legnth==0?0:This.points.length-1,
value:value,
time:time
});
}
this.showBarGraphic=function(barStyle)
{
for(var i=0;i<This.points.length;i++)
{
var bar=document.createElement("div");
var spanValue=document.createElement("span");
var spanTime=document.createElement("span");
bar.value=This.points[i].value;
bar.time=This.points[i].time;
for(var bs in barStyle)
{
bar.style[bs]=barStyle[bs];
}
bar.style.fontSize="1px";
bar.style.position="absolute";
bar.style.width=This.barWidth;
bar.style.top=parseInt(This.entity.style.top)+This.topDistance+"px";
bar.style.left=(bars.length==0?
parseInt(This.entity.style.left)+This.barDistance:
parseInt(bars[bars.length-1].style.left)+parseInt(bars[bars.length-1].style.width)+This.barDistance)+"px";
if(bar.value>This.maxHeight)
{
bar.style.height=This.height-This.topDistance+"px";
This.maxHeight=bar.value;
}
spanValue.innerHTML=bar.value;
spanValue.style.position="absolute";
spanValue.style.left=bar.style.left;
spanTime.innerHTML=bar.time;
spanTime.style.position="absolute";
spanTime.style.left=bar.style.left;
bars.push(bar);
values.push(spanValue);
times.push(spanTime);
document.body.appendChild(bar);
elements.push(bar);
document.body.appendChild(spanValue);
elements.push(spanValue);
document.body.appendChild(spanTime);
elements.push(spanTime);
}
for(var i=0;i<bars.length;i++)
{
var percentage=bars[i].value/This.maxHeight;
bars[i].style.height=(This.height-This.topDistance)*percentage+"px";
bars[i].style.top=parseInt(This.entity.style.top)+(This.height-parseInt(bars[i].style.height))+"px";
values[i].style.top=parseInt(bars[i].style.top)-20+"px";
times[i].style.top=parseInt(bars[i].style.top)+parseInt(bars[i].style.height)+"px";
}
This.updateDisplay();
};
this.showPointGraphic=function(pointStyle)
{
for(var i=0;i<This.points.length;i++)
{
var showPoint=document.createElement("div");
var spanValue=document.createElement("span");
var spanTime=document.createElement("span");
showPoint.value=This.points[i].value;
showPoint.time=This.points[i].time;
showPoint.lineColor=pointStyle.lineColor;
for(var ps in pointStyle)
{
showPoint.style[ps]=pointStyle[ps];
}
showPoint.style.fontSize="1px";
showPoint.style.position="absolute";
showPoint.style.width="5px";
showPoint.style.top=parseInt(This.entity.style.top)+This.topDistance+"px";
showPoint.style.left=(showPoints.length==0?
parseInt(This.entity.style.left)+This.barDistance:
parseInt(showPoints[showPoints.length-1].style.left)+parseInt(showPoints[showPoints.length-1].style.width)+This.barDistance)+"px";
if(showPoint.value>This.maxHeight)
{
This.maxHeight=showPoint.value;
}
spanValue.innerHTML=showPoint.value;
spanValue.style.position="absolute";
spanValue.style.left=showPoint.style.left;
spanTime.innerHTML=showPoint.time;
spanTime.style.position="absolute";
spanTime.style.left=showPoint.style.left;
showPoints.push(showPoint);
values.push(spanValue);
times.push(spanTime);
document.body.appendChild(showPoint);
elements.push(showPoint);
document.body.appendChild(spanValue);
elements.push(spanValue);
document.body.appendChild(spanTime);
elements.push(spanTime);
This.updateDisplay();
for(var j=0;j<showPoints.length;j++)
{
var percentage=showPoints[j].value/This.maxHeight;
pointHeight=(This.height-This.topDistance)*percentage;
showPoints[j].style.top=parseInt(This.entity.style.top)+(This.height-pointHeight)+"px";
showPoints[j].style.height="15px";
values[j].style.top=parseInt(showPoints[j].style.top)-20+"px";
times[j].style.top=parseInt(This.entity.style.top)+parseInt(This.entity.style.height)+"px";
}
}
for(var i=0;i<showPoints.length;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),
showPoints[i-1].lineColor
);
}
}
};
this.updateDisplay=function()
{
This.entity.style.width=(This.barWidth+This.barDistance)*This.points.length+This.barDistance;
This.entity.style.height=This.height;
};
this.drawLine=function(startX,startY,endX,endY,colorCode)
{
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))
{
for(var i=0;i<=Math.abs(xDistance);i++)
{
var point=document.createElement("div");
point.style.position="absolute";
point.style.backgroundColor=colorCode;
point.style.fontSize="0";
point.style.width="2px";
point.style.height="2px";
startX+=xDirection;
point.style.left=startX+"px";
startY=startY+yDistance*xPercentage;
point.style.top=startY+"px";
document.body.appendChild(point);
elements.push(point);
}
}
else
{
for(var i=0;i<=Math.abs(yDistance);i++)
{
var point=document.createElement("div");
point.style.position="absolute";
point.style.backgroundColor=colorCode;
point.style.fontSize="0";
point.style.width="2px";
point.style.height="2px";
startY+=yDirection;
point.style.top=startY+"px";
startX=startX+xDistance*yPercentage;
point.style.left=startX+"px";
document.body.appendChild(point);
elements.push(point);
}
}
};
this.clear=function()
{
for(var i=0;i<elements.length;i++)
{
document.body.removeChild(elements[i]);
}
showPoints.length=0;
bars.length=0;
times.length=0;
values.length=0;
elements.length=0;
};
Constructor();
};
var barStyle=Style.barStyle.style1;
var pointStyle=Style.pointStyle.style1;
var graphic;
function initialize()
{
graphic=new Graphic(100,300);
graphic.addPoint(1200,18);
graphic.addPoint(1412,19);
graphic.addPoint(1900,20);
graphic.addPoint(1280,21);
graphic.addPoint(2020,22);
graphic.addPoint(1300,23);
graphic.addPoint(300,24);
graphic.addPoint(2152,25);
graphic.addPoint(1300,26);
graphic.addPoint(280,27);
graphic.addPoint(3020,28);
graphic.addPoint(2300,29);
graphic.addPoint(1300,30);
graphic.addPoint(2352,31);
graphic.barDistance=30;
graphic.clear();
graphic.showPointGraphic(pointStyle);
};
function switchFeature(featureName)
{
switch(featureName)
{
case "bar":
graphic.clear();
graphic.showBarGraphic(barStyle);
break;
case "point":
graphic.clear();
graphic.showPointGraphic(pointStyle);
break;
}
};
function switchStyle(styleName)
{
switch(styleName)
{
case "1":
barStyle=Style.barStyle.style1;
pointStyle=Style.pointStyle.style1;
break;
case "2":
barStyle=Style.barStyle.style2;
pointStyle=Style.pointStyle.style2;
break;
}
};
</script>
</head>
<body onload="initialize()">
<select onchange="switchStyle(this.value)">
<option value="1">Style1</option>
<option value="2">Style2</option>
</select>
<input type="button" value="Feature1" onclick="switchFeature('bar')">
<input type="button" value="Feature2" onclick="switchFeature('point')">
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript实现一个简单的贪吃蛇游戏
- 一个简单的用javascript实现的页面内容过滤显示小程序源码
- JavaScript数据绑定实现一个简单的 MVVM 库
- JavaScript数据绑定实现一个简单的 MVVM 库
- JavaScript之实现一个简单的Vue
- Html5 Canvas+Javascript实现一个简单画图程序（一）
- Html5 Canvas+Javascript实现一个简单画图程序（三）
- 学习javascript的闭包特性用C#来实现一个简单的例子
- blockchain 区块链200行代码：在JavaScript实现的一个简单的例子
- javascript实现一个简单的隐藏式侧边栏
- JavaScript实现一个简单数据结构树
- javascript实现一个简单的弹出窗
- 一个简单的JavaScript数据缓存系统实现代码
- Linux下之使用简单3种创建文件的命令，并实现一个Html和JavaScript小程序
- 一个简单但常用的javascript表格样式_鼠标划过行变色 简洁实现
- 用JavaScript实现一个最简单的多级树
- JavaScript实现一个简单验证码
- 一个简单的例子：javascript实现日期的比较（3）
- 中级JavaScript例子, 如何实现一个简单实用的模板套用机制, GXTemplate , 第3章(估计要写9章)