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>
复制代码
posted @   随机  阅读(1401)  评论(6)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
点击右上角即可分享
微信分享提示
AI IDE Trae