<!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. 关于Eclipse无法生成class文件的问题

    今天调试东西的时候发现怎么都无法build 遂用Eclipse里的clean功能 打算重新编译一下结果所有的class文件全部消失了 重新打包发包也不行 经过查找后得到方法:把properties属性 ...

  2. sockaddr结构体

    sockaddr 本词条缺少名片图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧! 一,用于存储参与(IP)Windows套接字通信的计算机上的一个internet协议(IP)地址.为了统一地 ...

  3. 在java中使用dom4j包对String格式的xm数据l解析

    在网上找了好久,都没搞出来,借鉴别人的代码,依葫芦画瓢,写了个自己用的解析类.注意节点属性和子节点的区别就好了,这个包的方法还挺好用的 package com.allinpay.utils; impo ...

  4. L11,one good turn deserves another

    one good turn deserves another 礼尚往来 gets a good salary 有一份很好的薪水 never pays it back 从不归还 deserve  应得的 ...

  5. c#动态生成word，在本地可以执行，但发布到iis上出错解决方案

    报错点: Microsoft.Office.Interop.Word.DocumentClass.SaveAs 解决方案: 1.在"开始"->"运行"中输 ...

  6. eclipse的插件

    jode_1.0.6(Java Optimize and Decompile Environment ) 非常好用的Eeclipse的反编译插件,随时点击,随时查看源代码,但他的官方下载的都是核心源码 ...

  7. 关于NIOS ii烧写的几种方式

    1. 方法一:.sof和.elf全部保存在FPGA内,程序加载和运行也是在FPGA内部. 把FPGA的配置文件.sof通过JTAG方式下载(其实是在线运行)进入FPGA本身,此时在NIOS II的界面 ...

  8. 使用Java打印杨辉三角

    package 杨辉三角; import java.util.Scanner; public class 三角 { private static Scanner scn; public static ...

  9. Unity3d之shaderLab内置变量

    float4 _WorldSpaceCameraPos camera在世界坐标系中的位置float4 _WorldSpaceLightPos0 灯光在世界坐标系中的位置 转载请注明出处: http:/ ...

  10. iOS开发——打包静态库与Framework

    最近老是需要做接口给别的客户,就顺便把打包的过程也写一下吧! 一.静态库 静态图里面只能是纯文件,里面不能再有第三方打包的静态库,也就是说,静态库不能打包静态库.这个用的比较多,一般自己公司写出来的东 ...