<!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. Android利用canvas画各种图形 及Paint用法 .

    引自:http://blog.csdn.net/carlfan/article/details/8139984 1.首先说一下canvas类: Class Overview The Canvas cl ...

  2. HDU 1882 Strange Billboard（状态压缩+转置优化）

    状态压缩,我们枚举第一行的所有状态,然后根据第一行去转变下面的行,枚举或者深搜直到最后最后一行,可以判断是不是所有的1都可以全部转换为0,记录所有的解,输出最小的一个就可以. 这里有一个很重要的优化, ...

  3. B进制加法(洛谷1604)

    分析:码农题,照这模拟就行,高精度的B进制,注意字符串反转的技巧. #include <iostream> #include <cstdio> #include <cst ...

  4. 读书笔记——thinking in java

    1.一切都是对象,用引用操作对象 1.1程序存储的地方 引用存放在堆栈区(通用的RAM),所有对象存储在堆(一种通用的内存池).堆和堆栈的区别:堆栈中的这些引用,java系统是要知道确切的生命周期,堆 ...

  5. Cocos2dx 学习笔记整理----开发环境搭建

    最近在学习cocos2dx,预备将学习过程整理成笔记. 需要的工具和环境整理一下: 使用的版本 cocos2dx目前已经出到了v3.1.1,学习和项目的话还是用2.2.3为宜,毕竟不大想做小白鼠,并且 ...

  6. curl调用openstack API总结

    curl命令是Linux下一个可以使用多种协议收发数据的工具,包括http协议.openstack的API接口都是URL地址:http://controller:35357/v3可以使用curl命令进 ...

  7. MAC OS X 10.10 应用程序下载失败后lunchpad产生灰色图标的解决办法

    方法如下:打开应用程序- 实用工具 - 终端. 以此出入如下字符 defaults write com.apple.dock ResetLaunchPad -bool true killall Doc ...

  8. iOS开发 改变UINavigationController的UINavigationBar的高度和背景图片

    1.改变高度 自定义UINavigationBar的新类别: //UINavigationBar+BackgoundImage.h #import <Foundation/Foundation. ...

  9. VSC#2010打开视图编辑器假死/卡死

    最近写项目代码的时候写C#,VSC#2010刚配置好,打开之前同学写的项目的设计界面结果...我擦,卡死了,重复几次都是这样. 于是上网搜发现是VS一个bug,打一个VSSP1补丁就好了~ http: ...

  10. IOS开发使用YiRefresh进行刷新

    1.将YiRefresh下载后,拖进项目 YiRefresh地址:https://github.com/coderyi/YiRefresh 2.添加两个头文件 #import "YiRefr ...