关闭

手写的一个图表插件

标签: 插件图表
217人阅读 评论(0) 收藏 举报
分类:

转载请注明出处

<!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
猜你在找
【套餐】Hadoop生态系统零基础入门
【套餐】嵌入式Linux C编程基础
【套餐】2017软考系统集成项目——任铄
【套餐】Android 5.x顶级视频课程——李宁
【套餐】深度学习入门视频课程——唐宇迪
【直播】广义线性模型及其应用——李科
【直播】从0到1 区块链的概念到实践
【直播】计算机视觉原理及实战——屈教授
【直播】机器学习之凸优化——马博士
【直播】机器学习&数据挖掘7周实训--韦玮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:51601次
    • 积分:930
    • 等级:
    • 排名:千里之外
    • 原创:33篇
    • 转载:46篇
    • 译文:0篇
    • 评论:2条
    最新评论