<!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. iOS:判断昨天，今天，今年

    - (BOOL)isThisYear { // 日历 NSCalendar *calendar = [NSCalendar currentCalendar]; NSInteger nowYear = ...

  2. error: QApplication: No such file or directory

    尝试用Qt5编译Qt4的工程.你会遇到下面的问题: 错误:C1083: 无法打开包括文件:“QApplication”: No such file or directory 出现原因:Qt5里不再用Q ...

  3. Activity中 左滑动返回监听

    网易新闻中有个比较炫的效果,在QQ进入聊天界面也有这种效果,就是从界面左侧滑动到右侧时,界面退出,其实功能很容易实现: 1) Activity 去实现 implements OnTouchListen ...

  4. oracle中nvl函数

    最近在修改项目中一个统计的bug,统计出的钱数不对,因为不是自己开发的模块,经过分析流程找到了统计的sql. sum(f_msmoney)+sum(f_fkmoney) as total, 上面这段是 ...

  5. POJ Sudoku 数独填数 DFS

    题目链接:Sudoku Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 18105   Accepted: 8772   Sp ...

  6. codeforces 492E. Vanya and Field（exgcd求逆元）

    题目链接:codeforces 492e vanya and field 留个扩展gcd求逆元的板子. 设i,j为每颗苹果树的位置,因为gcd(n,dx) = 1,gcd(n,dy) = 1,所以当走 ...

  7. php 缓存之 APC 和apcu

    php opcode 缓存 apc. 其实,我自己的理解, php apc 缓存其实分两部分, 一部分是 缓存 类似于 java 编译的中间的 字节码, 不同于c 语言编译之后的二进制的机器码. ph ...

  8. .net remoting 实现通用消息处理窗口

    .net remoting 实现通用消息处理窗口 实现机制是制作一个cmd窗口作为信息展示窗口,主程序将需要展示的信息抛出到cmd窗口显示,以此方式做到消息的展示. 以下是cmd窗口的代码,cmd窗体 ...

  9. 未在本地计算机上注册“Microsoft.Ace.OleDB.12.0”

    这是异常 我的电脑室x86的所以选择x86.

  10. 【python】一个备份把文件备份到邮箱的python实现

    公司服务器弄了跳板机,从服务器上拉文件变得好麻烦,弄了个脚本从服务器上向邮箱发送文件,还蛮方便哈- #!/usr/bin/env python2.7 #! coding:UTF-8 import sm ...