手写的一个图表插件

来源：互联网发布：李敖对女性的态度知乎编辑：程序博客网时间：2024/05/05 08:39
转载请注明出处
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{margin: 0;padding: 0;list-style-type: none;}        #box{            /*width: 300px;*/            padding: 0 10px;            height:500px;            border: 1px solid #444;        }        #box ul li{width: 100%;position: relative;}        #box ul li p{font: 12px/28px "微软雅黑";}        #box ul li .p2{position: absolute;top:0;left: 100px;color: #444;}        #box ul li .p3{width:0px;height: 15px;background: yellow;border-radius:0px 10px 10px 0px;}        #date{            border-bottom: 1px solid #444;            font: 14px/24px "微软雅黑";        }    </style></head><body>    <div id="box">        <div id="date">            <p class="p1">起始时间: <span></span></p>            <p class="p2">起始时间: <span></span></p>        </div>        <ul>            <li class="L1">                <p class="p1"></p>                <p class="p2"><span class="sp1"></span></p>                <p class="p3"></p>            </li>            <li class="L2">                <p class="p1"></p>                <p class="p2"><span class="sp1"></span></p>                <p class="p3"></p>            </li>            <li class="L3">                <p class="p1"></p>                <p class="p2"><span class="sp1"></span></p>                <p class="p3"></p>            </li>            <li class="L4">                <p class="p1"></p>                <p class="p2"><span class="sp1"></span></p>                <p class="p3"></p>            </li>            <li class="L5">                <p class="p1"></p>                <p class="p2"><span class="sp1"></span></p>                <p class="p3"></p>            </li>            <li class="L6">                <p class="p1"></p>                <p class="p2"><span class="sp1"></span></p>                <p class="p3"></p>            </li>            <li class="L7">                <p class="p1"></p>                <p class="p2"><span class="sp1"></span></p>                <p class="p3"></p>            </li>            <li class="L8">                <p class="p1"></p>                <p class="p2"><span class="sp1"></span></p>                <p class="p3"></p>            </li>        </ul>    </div>    <input type="button"value="查看"  id="btn"></body>    <script src="//cdn.bootcss.com/jquery/3.0.0-rc1/jquery.min.js"></script>    <script src="//cdn.bootcss.com/jquery-easing/1.3/jquery.easing.min.js"></script>    <script>        $(function () {            var xz=function(a){                a+="";                if(a.length==1){                    return "0"+a;                }                else{                    return a;                }            };            //时间            var oData=new Date();            var fullYear=oData.getFullYear();            var month=oData.getMonth()+1;            var day=oData.getDate();            var hours=oData.getHours();            var Minutes=oData.getMinutes();            $("#date p span").html(fullYear+"-"+xz(month)+"-"+xz(day)+" "+xz(hours)+":"+xz(Minutes));           // $("#date").find("p")[1].html(fullYear+"-"+month+"-"+day+"　"+hours+"-"+Minutes);            var oArrMax=function (tmp) {                var max = tmp[0];                for(var i=1;i<tmp.length;i++){                    if(max<tmp[i])max=tmp[i];                }                return max;            }            var getStyle=function ( obj , attr ){                return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];            };            var getRandomColor = function(){                return  '#' +                        (function(color){                            return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])                            && (color.length == 6) ?  color : arguments.callee(color);                        })('');            }            var oSfe=function (obj,oJson,max,cv,time){                var oName=[];                var oArr=[];                for(key in oJson){                    oName.push(key);                    oArr.push(oJson[key]);                }                if( max=="max")max=oArrMax(oArr);                var oWidthMax=parseInt(getStyle(obj,"width"));                $("#box ul li").each(function(i){                    $(this).find(".p3").css({background:getRandomColor()});                    $(this).find(".p3").animate({width:[oArr[i]/max*oWidthMax+"px",cv]},time);                    $(this).find(".p2").find(".sp1").html(oArr[i]);                    $(this).find(".p1").html(oName[i]);                })            }            var oJson={                张三:300,                李四:200,                王五:150,                马六:60,                vbn:300,                rty:200,                bmh:150,                fby:60            }            /*                第一个参数:图表对象                第二个参数:图表数据                第三个参数:可以是oJson中的最大值(传入字符串”max“)或指定数字大小                第四个参数:cv曲线                第五个参数:动画时间(数字)            */            oSfe($("#box")[0],oJson,"max","easeOutBounce",1000);            //ajax交互            /*$("#btn").click(function () {                var oAjax=$.ajax({                    type:"get",                    dataType: "json",                    url: "js/text.php",                    data: data,                    success: function (data) {                        return data;                    },                    error: function (XMLHttpRequest, textStatus, errorThrown) {                        alert(errorThrown);                    }                });                // oSfe($("#box")[0],oAjax,500);                alert(oAjax);            })*/        })    </script></html>
0 0