javascript实现的一个简单统计图类
目前写了两种Feature
在IE,FF,Opera,Safari上测试通过
不过目前只是实现,还不是很优化^_^
样式定义:
类的定义:
使用方法:
完整示例:
在IE,FF,Opera,Safari上测试通过
不过目前只是实现,还不是很优化^_^
样式定义:
1
var Style=
2
{
3
barStyle:
4
{
5
style1:
6
{
7
backgroundColor:"#ff0000"
8
},
9
style2:
10
{
11
backgroundColor:"#ffff00",
12
borderStyle:"solid",
13
borderWidth:"1px",
14
borderColor:"#0000ff"
15
}
16
},
17
18
pointStyle:
19
{
20
style1:
21
{
22
backgroundColor:"#ff0000",
23
lineColor:"#ff0000"
24
},
25
style2:
26
{
27
backgroundColor:"#00ff00",
28
lineColor:"#00ff00"
29
}
30
}
31
};
32![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
类的定义:
1
function Graphic(left,top)
2
{
3
this.entity=document.createElement("div");
4
5
this.height=200;
6
this.barWidth=20;
7
this.maxHeight=0;
8
this.barDistance=20;
9
this.topDistance=20;
10
this.points=new Array();
11
12
var This=this;
13
var showPoints=new Array();
14
var bars=new Array();
15
var times=new Array();
16
var values=new Array();
17
var elements=new Array();
18
19
function Constructor()
20
{
21
This.entity.style.position="absolute";
22
This.entity.style.borderLeftStyle="solid";
23
This.entity.style.borderLeftWidth="1px";
24
This.entity.style.borderLeftColor="#000000";
25
This.entity.style.borderBottomStyle="solid";
26
This.entity.style.borderBottomWidth="1px";
27
This.entity.style.borderBottomColor="#000000";
28
29
This.setPosition(left,top);
30
document.body.appendChild(This.entity);
31
};
32
33
this.setPosition=function(left,top)
34
{
35
var deltaX=left-parseInt(This.entity.style.left);
36
var deltaY=top-parseInt(This.entity.style.top);
37
This.entity.style.left=(isNaN(left)?"100":left)+"px";
38
This.entity.style.top=(isNaN(top)?"300":top)+"px";
39
for(var i=0;i<bars.length;i++)
40
{
41
bars[i].style.left=parseInt(bars[i].style.left)+deltaX+"px";
42
bars[i].style.top=parseInt(bars[i].style.top)+deltaY+"px";
43
44
values[i].style.left=parseInt(values[i].style.left)+deltaX+"px";
45
values[i].style.top=parseInt(values[i].style.top)+deltaY+"px";
46
47
times[i].style.left=parseInt(times[i].style.left)+deltaX+"px";
48
times[i].style.top=parseInt(times[i].style.top)+deltaY+"px";
49
}
50
};
51
52
this.addPoint=function(value,time)
53
{
54
This.points.push(
55
{
56
id:This.points.legnth==0?0:This.points.length-1,
57
value:value,
58
time:time
59
});
60
}
61
62
this.showBarGraphic=function(barStyle)
63
{
64
for(var i=0;i<This.points.length;i++)
65
{
66
var bar=document.createElement("div");
67
var spanValue=document.createElement("span");
68
var spanTime=document.createElement("span");
69
70
bar.value=This.points[i].value;
71
bar.time=This.points[i].time;
72
for(var bs in barStyle)
73
{
74
bar.style[bs]=barStyle[bs];
75
}
76
77
bar.style.fontSize="1px";
78
bar.style.position="absolute";
79
bar.style.width=This.barWidth;
80
bar.style.top=parseInt(This.entity.style.top)+This.topDistance+"px";
81
82
bar.style.left=(bars.length==0?
83
parseInt(This.entity.style.left)+This.barDistance:
84
parseInt(bars[bars.length-1].style.left)+parseInt(bars[bars.length-1].style.width)+This.barDistance)+"px";
85
86
if(bar.value>This.maxHeight)
87
{
88
bar.style.height=This.height-This.topDistance+"px";
89
This.maxHeight=bar.value;
90
}
91
92
spanValue.innerHTML=bar.value;
93
spanValue.style.position="absolute";
94
spanValue.style.left=bar.style.left;
95
96
spanTime.innerHTML=bar.time;
97
spanTime.style.position="absolute";
98
spanTime.style.left=bar.style.left;
99
100
bars.push(bar);
101
values.push(spanValue);
102
times.push(spanTime);
103
104
document.body.appendChild(bar);
105
elements.push(bar);
106
107
document.body.appendChild(spanValue);
108
elements.push(spanValue);
109
110
document.body.appendChild(spanTime);
111
elements.push(spanTime);
112
113
}
114
for(var i=0;i<bars.length;i++)
115
{
116
var percentage=bars[i].value/This.maxHeight;
117
118
bars[i].style.height=(This.height-This.topDistance)*percentage+"px";
119
bars[i].style.top=parseInt(This.entity.style.top)+(This.height-parseInt(bars[i].style.height))+"px";
120
values[i].style.top=parseInt(bars[i].style.top)-20+"px";
121
times[i].style.top=parseInt(bars[i].style.top)+parseInt(bars[i].style.height)+"px";
122
}
123
124
This.updateDisplay();
125
};
126
127
this.showPointGraphic=function(pointStyle)
128
{
129
for(var i=0;i<This.points.length;i++)
130
{
131
var showPoint=document.createElement("div");
132
var spanValue=document.createElement("span");
133
var spanTime=document.createElement("span");
134
135
showPoint.value=This.points[i].value;
136
showPoint.time=This.points[i].time;
137
showPoint.lineColor=pointStyle.lineColor;
138
for(var ps in pointStyle)
139
{
140
showPoint.style[ps]=pointStyle[ps];
141
}
142
143
showPoint.style.fontSize="1px";
144
showPoint.style.position="absolute";
145
showPoint.style.width="5px";
146
showPoint.style.top=parseInt(This.entity.style.top)+This.topDistance+"px";
147
148
showPoint.style.left=(showPoints.length==0?
149
parseInt(This.entity.style.left)+This.barDistance:
150
parseInt(showPoints[showPoints.length-1].style.left)+parseInt(showPoints[showPoints.length-1].style.width)+This.barDistance)+"px";
151
152
if(showPoint.value>This.maxHeight)
153
{
154
This.maxHeight=showPoint.value;
155
}
156
157
spanValue.innerHTML=showPoint.value;
158
spanValue.style.position="absolute";
159
spanValue.style.left=showPoint.style.left;
160
161
spanTime.innerHTML=showPoint.time;
162
spanTime.style.position="absolute";
163
spanTime.style.left=showPoint.style.left;
164
165
showPoints.push(showPoint);
166
values.push(spanValue);
167
times.push(spanTime);
168
169
document.body.appendChild(showPoint);
170
elements.push(showPoint);
171
172
document.body.appendChild(spanValue);
173
elements.push(spanValue);
174
175
document.body.appendChild(spanTime);
176
elements.push(spanTime);
177
178
This.updateDisplay();
179
for(var j=0;j<showPoints.length;j++)
180
{
181
var percentage=showPoints[j].value/This.maxHeight;
182
183
pointHeight=(This.height-This.topDistance)*percentage;
184
showPoints[j].style.top=parseInt(This.entity.style.top)+(This.height-pointHeight)+"px";
185
showPoints[j].style.height="15px";
186
values[j].style.top=parseInt(showPoints[j].style.top)-20+"px";
187
188
times[j].style.top=parseInt(This.entity.style.top)+parseInt(This.entity.style.height)+"px";
189
}
190
}
191
for(var i=0;i<showPoints.length;i++)
192
{
193
if(i>0)
194
{
195
This.drawLine(parseInt(showPoints[i-1].style.left),
196
parseInt(showPoints[i-1].style.top),
197
parseInt(showPoints[i].style.left),
198
parseInt(showPoints[i].style.top),
199
showPoints[i-1].lineColor
200
);
201
}
202
}
203
204
};
205
206
this.updateDisplay=function()
207
{
208
This.entity.style.width=(This.barWidth+This.barDistance)*This.points.length+This.barDistance;
209
This.entity.style.height=This.height;
210
};
211
212
this.drawLine=function(startX,startY,endX,endY,colorCode)
213
{
214
var xDirection=(endX-startX)/Math.abs(endX-startX);
215
var yDirection=(endY-startY)/Math.abs(endY-startY);
216
var xDistance=endX-startX;
217
var yDistance=endY-startY;
218
var xPercentage=1/Math.abs(endX-startX);
219
var yPercentage=1/Math.abs(endY-startY);
220
if(Math.abs(startX-endX)>=Math.abs(startY-endY))
221
{
222
for(var i=0;i<=Math.abs(xDistance);i++)
223
{
224
var point=document.createElement("div");
225
point.style.position="absolute";
226
point.style.backgroundColor=colorCode;
227
point.style.fontSize="0";
228
point.style.width="2px";
229
point.style.height="2px";
230
231
startX+=xDirection;
232
point.style.left=startX+"px";
233
startY=startY+yDistance*xPercentage;
234
point.style.top=startY+"px";
235
document.body.appendChild(point);
236
elements.push(point);
237
}
238
}
239
else
240
{
241
for(var i=0;i<=Math.abs(yDistance);i++)
242
{
243
var point=document.createElement("div");
244
point.style.position="absolute";
245
point.style.backgroundColor=colorCode;
246
point.style.fontSize="0";
247
point.style.width="2px";
248
point.style.height="2px";
249
250
startY+=yDirection;
251
point.style.top=startY+"px";
252
startX=startX+xDistance*yPercentage;
253
point.style.left=startX+"px";
254
document.body.appendChild(point);
255
elements.push(point);
256
}
257
}
258
};
259
260
this.clear=function()
261
{
262
for(var i=0;i<elements.length;i++)
263
{
264
document.body.removeChild(elements[i]);
265
}
266
showPoints.length=0;
267
bars.length=0;
268
times.length=0;
269
values.length=0;
270
elements.length=0;
271
};
272
273
Constructor();
274
};
275![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
35
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
36
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
37
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
38
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
39
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
40
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
41
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
42
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
43
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
44
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
45
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
46
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
47
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
48
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
49
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
50
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
51
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
52
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
53
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
54
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
55
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
56
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
57
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
58
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
59
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
60
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
61
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
62
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
63
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
64
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
65
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
66
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
67
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
68
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
69
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
70
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
71
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
72
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
73
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
74
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
75
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
76
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
77
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
78
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
79
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
80
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
81
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
82
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
83
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
84
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
85
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
86
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
87
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
88
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
89
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
90
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
91
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
92
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
93
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
94
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
95
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
96
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
97
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
98
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
99
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
100
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
101
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
102
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
103
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
104
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
105
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
106
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
107
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
108
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
109
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
110
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
111
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
112
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
113
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
114
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
115
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
116
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
117
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
118
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
119
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
120
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
121
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
122
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
123
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
124
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
125
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
126
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
127
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
128
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
129
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
130
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
131
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
132
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
133
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
134
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
135
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
136
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
137
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
138
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
139
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
140
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
141
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
142
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
143
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
144
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
145
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
146
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
147
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
148
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
149
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
150
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
151
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
152
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
153
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
154
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
155
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
156
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
157
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
158
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
159
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
160
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
161
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
162
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
163
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
164
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
165
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
166
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
167
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
168
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
169
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
170
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
171
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
172
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
173
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
174
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
175
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
176
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
177
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
178
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
179
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
180
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
181
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
182
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
183
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
184
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
185
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
186
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
187
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
188
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
189
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
190
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
191
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
192
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
193
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
194
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
195
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
196
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
197
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
198
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
199
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
200
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
201
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
202
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
203
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
204
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
205
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
206
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
207
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
208
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
209
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
210
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
211
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
212
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
213
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
214
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
215
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
216
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
217
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
218
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
219
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
220
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
221
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
222
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
223
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
224
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
225
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
226
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
227
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
228
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
229
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
230
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
231
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
232
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
233
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
234
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
235
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
236
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
237
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
238
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
239
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
240
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
241
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
242
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
243
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
244
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
245
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
246
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
247
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
248
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
249
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
250
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
251
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
252
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
253
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
254
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
255
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
256
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
257
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
258
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
259
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
260
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
261
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
262
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
263
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
264
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
265
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
266
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
267
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
268
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
269
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
270
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
271
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
272
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
273
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
274
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
275
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
使用方法:
1
function initialize()
2
{
3
var pointStyle=Style.pointStyle.style1;
4
var graphic=new Graphic(100,300);
5
6
graphic.addPoint(1200,18);
7
graphic.addPoint(1412,19);
8
graphic.addPoint(1900,20);
9
graphic.addPoint(1280,21);
10
graphic.addPoint(2020,22);
11
graphic.addPoint(1300,23);
12
graphic.addPoint(300,24);
13
graphic.addPoint(2152,25);
14
graphic.addPoint(1300,26);
15
graphic.addPoint(280,27);
16
graphic.addPoint(3020,28);
17
graphic.addPoint(2300,29);
18
graphic.addPoint(1300,30);
19
graphic.addPoint(2352,31);
20
graphic.barDistance=30;
21![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
22
graphic.showPointGraphic(pointStyle);
23
24
};
25![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
完整示例:
<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>
<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>