<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery-flot插件数据可视化显示</title>
    <link rel="stylesheet" href="../css/blue.css" media="screen" />
    <script src="../jquery-1.10.2.min.js"></script>
    <script src="../jquery.flot.v081.js"></script>
    <!--[if IE]>
    <script src="../excanvas.js"></script>
    <![endif]-->
    <style type="text/css">
    body{font-family: Arial,Helvetica,sans-serif;}
    /*table{border-collapse: collapse;width: 100%;}
    caption{font-weight: bold;font-size: 16px;color: #61b1ee;margin-bottom: 6px;}
    td,th{padding: 5px;border:1px solid #aaa;text-align: center;}*/
    .legend td,.legend th{padding: 2px;border: 0;}
    #wrapper>h1{padding: 0.4em 0;}
    </style>
</head>
<body>
    <div id="wrapper">
        <h1>jQuery Playground</h1>
        <ul id="nav">
            <li><a href="index.html" class="current">可视化显示统计数据</a></li>
            <li><a href="#">使用flot插件</a></li>
        </ul>
        <div id="content">
            <h2>可视化显示统计数据——折线图</h2>
            <div id="dataarea">
                <!-- <table>
                    <caption>站点访问人数统计表</caption>
                    <tbody>
                        <tr>
                            <td></td>
                            <th>8点</th>
                            <th>9点</th>
                            <th>10点</th>
                            <th>11点</th>
                            <th>12点</th>
                        </tr>
                        <tr>
                            <th>站点A</th>
                            <td>560</td>
                            <td>900</td>
                            <td>1200</td>
                            <td>1400</td>
                            <td>1500</td>
                        </tr>
                        <tr>
                            <th>站点B</th>
                            <td>620</td>
                            <td>1200</td>
                            <td>1000</td>
                            <td>1500</td>
                            <td>1450</td>
                        </tr>
                        <tr>
                            <th>站点C</th>
                            <td>420</td>
                            <td>1300</td>
                            <td>1800</td>
                            <td>1550</td>
                            <td>1600</td>
                        </tr>
                        <tr>
                            <th>站点D</th>
                            <td>300</td>
                            <td>600</td>
                            <td>1300</td>
                            <td>1600</td>
                            <td>1800</td>
                        </tr>
                    </tbody>
                </table> -->
            </div>
        </div>
        <div id="footer">Powered By Dennis Ji.</div>
    </div>
</body>
<script type="text/javascript">
$(function(){
    var data = [
    {
        label:"站点A",
        data:[
        [12,1500],
        [11,1400],
        [10,1200],
        [9,900],
        [8,560]
        ]
    },
    {
        label:"站点B",
        data:[
        [12,1450],
        [11,1500],
        [10,1000],
        [9,1200],
        [8,620]
        ]
    },
    {
        label:"站点C",
        data:[
        [12,1600],
        [11,1550],
        [10,1800],
        [9,1300],
        [8,420]
        ]
    },
    {
        label:"站点D",
        data:[
        [12,1800],
        [11,1600],
        [10,1300],
        [9,600],
        [8,300]
        ]
    }
    ];
    var options = {
        legend:{
            show:true,
            labelFormatter:null,
            margin:10,//[x,y]标签的margin值的x,y定位
            position:"ne",//标签的定位"ne"(默认是ne):是top-right,"nw":是top-left,"se":是bottom-right,"sw":是bottom-left,
            // labelBoxBorderColor:"#dbf5ab",//标签对象边框色
            // backgroundColor:"#dbf5ab",//标签对象背景色
            backgroundOpacity:0.5//标签对象背景色透明度设置
        },
        points:{
            show:true,
            radius:3
        },
        lines:{
            show:true
        },
        grid:{
            hoverable:true,
            clickable:true
        }
    };
    //获取显示区域
    var $dataarea = $("#dataarea");
    $dataarea.css("width","600px");
    $dataarea.css("height","300px");
    $.plot(dataarea,data,options);
    function showTooltip(x,y,contents){
        $('<div id="tooltip">'+contents+'</div>').css({
            position:'absolute',
            display:'none',
            top:y+5,//用到参数y
            left:x+5,//用到参数x
            border:'1px solid #fdd',
            padding:'2px',
            'background-color':'#fee',
            opacity:0.8
        }).appendTo("body").fadeIn(200);
    }
    var previouspoint = null;
    $dataarea.bind('plothover',function(e,pos,item){
        if (item) {
            if (previouspoint != item.datapoint) {
                previouspoint = item.datapoint;
                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(2),
                y = item.datapoint[1].toFixed(2);
                showTooltip(item.pageX,item.pageY,item.series.label+":"+x+"点访问人数："+y);
            }
        } else{//否则删除提示层，清空当前点标记
            $("#tooltip").remove();
            previouspoint = null;
        };
    });
});
</script>
</html>

jQuery插件Flot实战Demo的更多相关文章

  1. jQuery插件Flot的介绍

    Flot采用Canvas绘制图形(Web总共就有三种常见方式来绘制图形,不了解的同学请看这篇文章),在数据量非常大的时候,你需要考虑浏览器端的性能问题.顺便提一句,D3是采用SVG来绘制图形的,从我自 ...

  2. jquery插件Flot的简单讲解

    只是说一下基本用法,举一两个例子,详细用法请查看官方文档 使用方法是要先引入jquery插件,然后引入flot插件. <script type="text/javascript&quo ...

  3. jQuery插件实战之fullcalendar（日历插件）Demo

    jQuery的插件许多,应用的场景也很丰富,今天我这里给大家介绍一款很有用的日历页面开发插件 - fullcalendar,眼下最新版本号是1.5.1,使用这款插件可以高速帮助你高速编程实现基于web ...

  4. jQuery图表插件Flot中文文档

    转载自:http://www.itivy.com/ivy/archive/2011/6/4/jquery-flot-chinese-doc.html 最近正在使用JQuery的flot进行画图,但是这 ...

  5. 使用自定义 jQuery 插件的一个选项卡Demo

    前几天闲着没事,想着编写一个 jQuery 插件,或许这将是一个美好的开始. 这里是html页面: <!DOCTYPE html> <html lang="en" ...

  6. jQuery 插件编程精讲与技巧

    适应的读者: 1.有一定的jquery编程基础但是想在技能上有所提升的人 2.前端开发的程序员 3.对编程感兴趣的学生 为什么要学习jquery插件的编写? 为什么要学习jquery插件的编写?相信这 ...

  7. The ultimate jQuery Plugin List(终极jQuery插件列表)

    下面的文章可能出自一位奥地利的作者,  列出很多jQuery的插件.类似的网站:http://jquerylist.com/原文地址: http://www.kollermedia.at/archiv ...

  8. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

  9. 教你开发jQuery插件（转）

    教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...

随机推荐

  1. 字符串解析运用-将字符串分解为多个整数，求各整数之和(华为oj)

    描述 输入内容是一个字符串,输出结果为一个字符串.要求在输入的字符串中识别出多个整数单元,并且对各个整数单元求和运算,最终输出一个字符串,输出的字符串内容是对各个整数单元求和的结果.两个整数单元之间以 ...

  2. [转]Qt5.0 连接 webkit 错误解决

    新版的qt5.0把webkit拆分为webkit和webkitwidgets两个部分,所以如果遇到错误: Undefined symbols for architecture x86_64:“QWeb ...

  3. C#调用SCL2008 动态库SCL_API_cdecl.dll or SCL_API_Stdcall.dll，提示找不到指定模块

    在公司用的联想 ThinkPad T430i,原装配置及系统,开机巨慢.按下开机键到登陆界面超过1分钟,再到桌面这个时间就难说了,多时有超过3分钟,进入桌面还要等待几分钟才能正常操作.新年过来向公司领 ...

  4. 网页解析的全过程(输入url到展示页面)

    1.用户输入网址,浏览器发起DNS查询请求 用户访问网页,DNS服务器(域名解析系统)会根据用户提供的域名查找对应的IP地址. 域名解析服务器是基于UDP协议实现的一个应用程序,通常通过监听53端口来 ...

  5. 记一次gitlab添加账号收不到邮件的解决办法

    之前gitlab创建账号可以正常收到邮件,最近就收不到,查了gitlab的配置以及postfix都没有问题,发来查看了发信25端口,该端口被屏蔽,提交工单到阿里云那边收到回复说是服务器统一关闭25端口 ...

  6. Spring整合Hibernate--声明式事务管理

    Spring指定datasource 1. 新建jdbc.properties文件: jdbc.driverClassName=com.mysql.jdbc.Driver jdbc.url=jdbc: ...

  7. openstack controller ha测试环境搭建记录（六）——配置keystone

    在所有节点的hosts文件添加:10.0.0.10 myvip 在所有节点安装# yum install -y openstack-keystone python-keystoneclient# yu ...

  8. Mysql基本操作整理

    1.登录数据库 格式: mysql -h主机地址 -u用户名 -p用户密码 –P端口 –D数据库 –e “SQL 内容”>mysql -uroot -p 数据库名称~~~~~~~~~~~~~~~ ...

  9. Unity3D中的函数方法及解释

    一.刷新函数 Update 当MonoBehaviour启用时,其Update在每一帧被调用. LateUpdate 当Behaviour启用时,其LateUpdate在每一帧被调用. FixedUp ...

  10. Spring自学教程-注解的使用(三)

    一.java中的注解 定义注解 下面是一个定义注解的实例. @Target(ElementType.TYPE)@Retention(RetentionPolicy.RUNTIME)@Documente ...