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

目前写了两种Feature

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

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

样式定义：

var Style=
2

类的定义：

function Graphic(left,top)
2

使用方法：

function initialize()
2

完整示例:

<html>
    <head>

        <script type="text/javascript">

            var Style=
            {
                barStyle:
                {
                    style1:
                    {
                        backgroundColor:"#ff0000"
                    },
                    style2:
                    {
                        backgroundColor:"#ffff00",
                        borderStyle:"solid",
                        borderWidth:"1px",
                        borderColor:"#0000ff"
                    }
                },

                pointStyle:
                {
                    style1:
                    {
                        backgroundColor:"#ff0000",
                        lineColor:"#ff0000"
                    },
                    style2:
                    {
                        backgroundColor:"#00ff00",
                        lineColor:"#00ff00"
                    }
                }
            };

            function Graphic(left,top)
            {
                this.entity=document.createElement("div");

                this.height=200;
                this.barWidth=20;
                this.maxHeight=0;
                this.barDistance=20;
                this.topDistance=20;
                this.points=new Array();

                var This=this;
                var showPoints=new Array();
                var bars=new Array();
                var times=new Array();
                var values=new Array();
                var elements=new Array();

                function Constructor()
                {
                    This.entity.style.position="absolute";
                    This.entity.style.borderLeftStyle="solid";
                    This.entity.style.borderLeftWidth="1px";
                    This.entity.style.borderLeftColor="#000000";
                    This.entity.style.borderBottomStyle="solid";
                    This.entity.style.borderBottomWidth="1px";
                    This.entity.style.borderBottomColor="#000000";

                    This.setPosition(left,top);
                    document.body.appendChild(This.entity);
                };

                this.setPosition=function(left,top)
                {
                    var deltaX=left-parseInt(This.entity.style.left);
                    var deltaY=top-parseInt(This.entity.style.top);
                    This.entity.style.left=(isNaN(left)?"100":left)+"px";
                    This.entity.style.top=(isNaN(top)?"300":top)+"px";
                    for(var i=0;i<bars.length;i++)
                    {
                        bars[i].style.left=parseInt(bars[i].style.left)+deltaX+"px";
                        bars[i].style.top=parseInt(bars[i].style.top)+deltaY+"px";

                        values[i].style.left=parseInt(values[i].style.left)+deltaX+"px";
                        values[i].style.top=parseInt(values[i].style.top)+deltaY+"px";

                        times[i].style.left=parseInt(times[i].style.left)+deltaX+"px";
                        times[i].style.top=parseInt(times[i].style.top)+deltaY+"px";
                    }
                };

                this.addPoint=function(value,time)
                {
                    This.points.push(
                    {
                        id:This.points.legnth==0?0:This.points.length-1,
                        value:value,
                        time:time
                    });
                }

                this.showBarGraphic=function(barStyle)
                {
                    for(var i=0;i<This.points.length;i++)
                    {
                        var bar=document.createElement("div");
                        var spanValue=document.createElement("span");
                        var spanTime=document.createElement("span");

                        bar.value=This.points[i].value;
                        bar.time=This.points[i].time;
                        for(var bs in barStyle)
                        {
                            bar.style[bs]=barStyle[bs];
                        }

                        bar.style.fontSize="1px";
                        bar.style.position="absolute";
                        bar.style.width=This.barWidth;
                        bar.style.top=parseInt(This.entity.style.top)+This.topDistance+"px";

                        bar.style.left=(bars.length==0?
                                                        parseInt(This.entity.style.left)+This.barDistance:
                                                        parseInt(bars[bars.length-1].style.left)+parseInt(bars[bars.length-1].style.width)+This.barDistance)+"px";

                        if(bar.value>This.maxHeight)
                        {
                            bar.style.height=This.height-This.topDistance+"px";
                            This.maxHeight=bar.value;
                        }

                        spanValue.innerHTML=bar.value;
                        spanValue.style.position="absolute";
                        spanValue.style.left=bar.style.left;

                        spanTime.innerHTML=bar.time;
                        spanTime.style.position="absolute";
                        spanTime.style.left=bar.style.left;

                        bars.push(bar);
                        values.push(spanValue);
                        times.push(spanTime);

                        document.body.appendChild(bar);
                        elements.push(bar);

                        document.body.appendChild(spanValue);
                        elements.push(spanValue);

                        document.body.appendChild(spanTime);
                        elements.push(spanTime);

                    }
                    for(var i=0;i<bars.length;i++)
                    {
                        var percentage=bars[i].value/This.maxHeight;

                        bars[i].style.height=(This.height-This.topDistance)*percentage+"px";
                        bars[i].style.top=parseInt(This.entity.style.top)+(This.height-parseInt(bars[i].style.height))+"px";
                        values[i].style.top=parseInt(bars[i].style.top)-20+"px";
                        times[i].style.top=parseInt(bars[i].style.top)+parseInt(bars[i].style.height)+"px";
                    }

                    This.updateDisplay();
                };

                this.showPointGraphic=function(pointStyle)
                {
                    for(var i=0;i<This.points.length;i++)
                    {
                        var showPoint=document.createElement("div");
                        var spanValue=document.createElement("span");
                        var spanTime=document.createElement("span");

                        showPoint.value=This.points[i].value;
                        showPoint.time=This.points[i].time;
                        showPoint.lineColor=pointStyle.lineColor;
                        for(var ps in pointStyle)
                        {
                            showPoint.style[ps]=pointStyle[ps];
                        }

                        showPoint.style.fontSize="1px";
                        showPoint.style.position="absolute";
                        showPoint.style.width="5px";
                        showPoint.style.top=parseInt(This.entity.style.top)+This.topDistance+"px";

                        showPoint.style.left=(showPoints.length==0?
                                                        parseInt(This.entity.style.left)+This.barDistance:
                                                        parseInt(showPoints[showPoints.length-1].style.left)+parseInt(showPoints[showPoints.length-1].style.width)+This.barDistance)+"px";

                        if(showPoint.value>This.maxHeight)
                        {
                            This.maxHeight=showPoint.value;
                        }

                        spanValue.innerHTML=showPoint.value;
                        spanValue.style.position="absolute";
                        spanValue.style.left=showPoint.style.left;

                        spanTime.innerHTML=showPoint.time;
                        spanTime.style.position="absolute";
                        spanTime.style.left=showPoint.style.left;

                        showPoints.push(showPoint);
                        values.push(spanValue);
                        times.push(spanTime);

                        document.body.appendChild(showPoint);
                        elements.push(showPoint);

                        document.body.appendChild(spanValue);
                        elements.push(spanValue);

                        document.body.appendChild(spanTime);
                        elements.push(spanTime);

                        This.updateDisplay();
                        for(var j=0;j<showPoints.length;j++)
                        {
                            var percentage=showPoints[j].value/This.maxHeight;

                            pointHeight=(This.height-This.topDistance)*percentage;
                            showPoints[j].style.top=parseInt(This.entity.style.top)+(This.height-pointHeight)+"px";
                            showPoints[j].style.height="15px";
                            values[j].style.top=parseInt(showPoints[j].style.top)-20+"px";

                            times[j].style.top=parseInt(This.entity.style.top)+parseInt(This.entity.style.height)+"px";
                        }
                    }
                    for(var i=0;i<showPoints.length;i++)
                    {
                        if(i>0)
                            {
                                This.drawLine(parseInt(showPoints[i-1].style.left),
                                                            parseInt(showPoints[i-1].style.top),
                                                            parseInt(showPoints[i].style.left),
                                                            parseInt(showPoints[i].style.top),
                                                            showPoints[i-1].lineColor
                                                            );
                            }
                    }

                };

                this.updateDisplay=function()
                {
                    This.entity.style.width=(This.barWidth+This.barDistance)*This.points.length+This.barDistance;
                    This.entity.style.height=This.height;
                };

                this.drawLine=function(startX,startY,endX,endY,colorCode)
                {
                    var xDirection=(endX-startX)/Math.abs(endX-startX);
                    var yDirection=(endY-startY)/Math.abs(endY-startY);
                    var xDistance=endX-startX;
                    var yDistance=endY-startY;
                    var xPercentage=1/Math.abs(endX-startX);
                    var yPercentage=1/Math.abs(endY-startY);
                    if(Math.abs(startX-endX)>=Math.abs(startY-endY))
                    {
                        for(var i=0;i<=Math.abs(xDistance);i++)
                        {
                            var point=document.createElement("div");
                            point.style.position="absolute";
                            point.style.backgroundColor=colorCode;
                            point.style.fontSize="0";
                            point.style.width="2px";
                            point.style.height="2px";

                            startX+=xDirection;
                            point.style.left=startX+"px";
                            startY=startY+yDistance*xPercentage;
                            point.style.top=startY+"px";
                            document.body.appendChild(point);
                            elements.push(point);
                        }
                    }
                    else
                    {
                        for(var i=0;i<=Math.abs(yDistance);i++)
                        {
                            var point=document.createElement("div");
                            point.style.position="absolute";
                            point.style.backgroundColor=colorCode;
                            point.style.fontSize="0";
                            point.style.width="2px";
                            point.style.height="2px";

                            startY+=yDirection;
                            point.style.top=startY+"px";
                            startX=startX+xDistance*yPercentage;
                            point.style.left=startX+"px";
                            document.body.appendChild(point);
                            elements.push(point);
                        }
                    }
                };

                this.clear=function()
                {
                    for(var i=0;i<elements.length;i++)
                    {
                        document.body.removeChild(elements[i]);
                    }
                    showPoints.length=0;
                    bars.length=0;
                    times.length=0;
                    values.length=0;
                    elements.length=0;
                };

                Constructor();
            };

            var barStyle=Style.barStyle.style1;
            var pointStyle=Style.pointStyle.style1;
            var graphic;

            function initialize()
            {
                graphic=new Graphic(100,300);

                graphic.addPoint(1200,18);
                graphic.addPoint(1412,19);
                graphic.addPoint(1900,20);
                graphic.addPoint(1280,21);
                graphic.addPoint(2020,22);
                graphic.addPoint(1300,23);
                graphic.addPoint(300,24);
                graphic.addPoint(2152,25);
                graphic.addPoint(1300,26);
                graphic.addPoint(280,27);
                graphic.addPoint(3020,28);
                graphic.addPoint(2300,29);
                graphic.addPoint(1300,30);
                graphic.addPoint(2352,31);
                graphic.barDistance=30;

                graphic.clear();
                graphic.showPointGraphic(pointStyle);

            };

            function switchFeature(featureName)
            {
                switch(featureName)
                {
                    case "bar":
                        graphic.clear();
                        graphic.showBarGraphic(barStyle);
                        break;

                    case "point":
                        graphic.clear();
                        graphic.showPointGraphic(pointStyle);
                        break;
                }
            };

            function switchStyle(styleName)
            {
                switch(styleName)
                {
                    case "1":
                                                barStyle=Style.barStyle.style1;
                                                pointStyle=Style.pointStyle.style1;
                                                break;

                    case "2":
                                                barStyle=Style.barStyle.style2;
                                                pointStyle=Style.pointStyle.style2;
                                                break;
                }
            };

        </script>
    </head>
    <body  onload="initialize()">
        <select onchange="switchStyle(this.value)">
            <option value="1">Style1</option>
            <option value="2">Style2</option>
        </select>
        <input type="button" value="Feature1" onclick="switchFeature('bar')">
        <input type="button" value="Feature2" onclick="switchFeature('point')">
    </body>
</html>