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

zoukankan html css js c++ java

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

目前写了两种Feature

在IE,FF,Opera,Safari上测试通过

不过目前只是实现，还不是很优化^_^

样式定义：

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

类的定义：

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

使用方法：

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

查看全文

相关阅读:
关于C#中timer类 (转)
AutoResetEvent (转)
给韬哥的回复
 sql中的case when 的用法涉及到大于小于号
 vba中获取当前日期
 vba中的小技巧
 sql server2000中的两个整数相除保留十位小数
 vba中新建文件,关闭文件,锁屏，覆盖同名文件
 无法切换到google.com的解决办法
 mysql 常用命令

原文地址：https://www.cnblogs.com/Random/p/1241482.html