手写的一个图表插件

原创 2016年06月01日 22:02:41

转载请注明出处

<!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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

Highstock图表插件的一个详细的Demo,日期什么全部中文

Hightcharts是一个非常不错的图标插件,支持非常多的种类,柱形图,饼图,动态图,折线趋势图,真是应有尽有啊,官网是http://www.highcharts.com/,详细介绍的话里面也有AP...

FushionChart一个酷炫的图表插件

FushionChart是一个关于图表的js插件。它能够把很多简单的图表用很酷很炫的方式显示在html中。 它接受json,xml数据格式,我们只需要知道不同图表不同的数据格式就能够正确显示图表...

FushionChart一个酷炫的图表插件

FushionChart是一个关于图表的js插件。它能够把很多简单的图表用很酷很炫的方式显示在html中。它接受json,xml数据格式,我们只需要知道不同图表不同的数据格式就能够正确显示图表了。它操...

网页手写留痕插件

  • 2008年03月24日 13:50
  • 100KB
  • 下载

我的资源手写插件

  • 2012年01月21日 07:47
  • 10.44MB
  • 下载

轮播(纯天然手写,没用插件)

第一次写轮播,以前总是用插件,所以遇到好多坑 html     var timer=null;   var timer=setInterval(lunbo,3000)...

webAPP手写签名插件

  • 2017年02月02日 16:56
  • 83KB
  • 下载

jQuery手写签名插件jSignature

  • 2017年11月14日 13:54
  • 180KB
  • 下载

移动端滑动分页详解(手写插件+亲测demo)

这是本人尝试手写的一个基于jq uery 的插件 测试结构代码如下:(index.html) html lang="en"> head> meta charset="UTF...

推荐如何手写jQuery插件教程实例

不急着写,先想想实现原理 还不急,先想想实现原理。必要的时候,先写出简单的实现的原型。 我的这个美化表格的例子,实现原理倒是简单,无非就是找到表格的奇偶行,然后添加不同的class,活动行高亮显示...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:手写的一个图表插件
举报原因:
原因补充:

(最多只允许输入30个字)