javascript实现的一个简单统计图类

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

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

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

22

graphic.showPointGraphic(pointStyle);
23

24

};
25

<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>

公告