<!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. java在CMD环境下执行需注意字符集设定

    最近有个小工具需要将DMS系统中随机文件名替换为原始文件名,当导出原始文件名到csv文件中,用小 工具读取然后rename时,发现在eclipse环境下运行正常,简繁中文名称也正常:但放到cmd中执行 ...

  2. OpenGL学习-------visual studio 2010配置和第一个OpenGL程序讲解

    OpenGL作为当前主流的图形API之一,它在一些场合具有比DirectX更优越的特性. 1.与C语言紧密结合. OpenGL命令最初就是用C语言函数来进行描述的,对于学习过C语言的人来讲,OpenG ...

  3. Best Grass

    Description Bessie is planning her day of munching tender spring grass and is gazing out upon the pa ...

  4. libevent总结学习

    Memcached用了libevent,但是Redis没有用libevent.Redis的代码还没有libevent的三分之一. libevent有下面几大部分组成: * 事件管理包括各种IO(soc ...

  5. hdu-oj 1874 畅通工程续

    最短路基础 这个题目hdu-oj 1874可以用来练习最短路的一些算法. Dijkstra 无优化版本 #include<cstdio> #include<iostream> ...

  6. Protocol buffers--python 实践（一） 简介以及安装与使用

    由于最近对grpc产生了浓厚的兴趣,但是那是一整套东西,看了一下用到的东西不少,所以抽丝剥茧先写写这几天调研的protocol buffer -python的收获. 简介: 以下引用自官方首页文档: ...

  7. Email：2017

    Hi, 2017,我对自己有一个小小的期望:写写文字,安安心. Enjoy a simple life. 如我所愿吧! 明年再来问候你.

  8. http://mozilla.debian.net/

    deb http://mozilla.debian.net/ wheezy-backports iceweasel-release You can install it with the follow ...

  9. android 6.0获取权限

    Android版本升到6.0后最坑的就是权限问题,以下是我参考大神一个权限管理工具类,希望对大家有用 PermissionUtils.java import android.Manifest; imp ...

  10. tomcat 优化配置 java-8 tomcat-7

    tomcat 优化配置 , 说明 一.并发优化 1.JVM调优 以下为1G物理内存tomcat配置: JAVA_OPTS="-server -Xms512M -Xmx512M -Xss256 ...