Flot是一个Jquery下图表插件,具有简单使用,交互效果,具有吸引力外观特点。目前支持 Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+ 等浏览器,是一个基于Javascript和Jquery纯客端户的脚本库,下面看一个简单的示例,先插入js:

<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>

如果要支持IE9以下的浏览器,您需要使用Excanvas, 一个canvas 模拟器,所以还需要加入这段标签:

<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->

然后放置一个DIV:

<div id="placeholder" style="width:600px;height:300px;"></div>

接着Data:

<script type="text/javascript">
$(function () {
    var d1 = [];
    for (var i = 0; i < 14; i += 0.5)
        d1.push([i, Math.sin(i)]);
 
    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
 
    // a null signifies separate line segments
    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
    
    $.plot($("#placeholder"), [ d1, d2, d3 ]);
});
</script>

打开页面你就能看到这样的效果了:

这是一个简单的示例,它的特色之一是支持Ajax动态显示,请查看官方的示例,支持JSON的数据格式。同样,它也是开源的,您可以在这儿找到它的源代码 
希望对您Web开发有帮助。

jquery.flot.js简介的更多相关文章

  1. jQuery遮罩插件jQuery.blockUI.js简介

    利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 目标 : 1 . 弹出层的内容可以自定义任意的HTML元素 ...

  2. jquery.peity.js简介

    jQuery简单图表peity.js <html xmlns="http://www.w3.org/1999/xhtml"> <head> <titl ...

  3. jquery.easypiechart.js简介

    此插件主要是用来统计新的访问.跳出率.服务器负载.使用的RAM等,功能很强大,带有HTML5的动画效果,效果非常炫,看效果吧easyPieChart一款新型的EASY饼图数据统计Jquery插件截图: ...

  4. jquery.sparkline.js简介

    jQuery线状图插件Sparkline 官网地址:http://omnipotent.net/jquery.sparkline/ 文档地址:http://omnipotent.net/jquery. ...

  5. jquery.gritter.js简介

    Gritter 是一个小型的 jQuery 消息通知插件,通知效果如下图所示: 参考网

  6. jQuery.Flot开发手记

    目录 介绍 使用 自定义参数 自定义图例 自定义坐标 自定义数据序列 自定义网格 其他 鼠标停留在图表节点时显示tooltip 介绍 项目地址:http://www.flotcharts.org/ A ...

  7. flot - jQuery 图表插件(jquery.flot)使用

    Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 特别注意Flot使用的是UTC时间,最好修改flot.js去掉所有的UTC ...

  8. 当 jquery.unobtrusive-ajax.js 遇上Web API

    最近在熟悉Abp框架,其基于DDD领域驱动设计...前段可以绕过mvc直接调用根据app层动态生成的webapi,有点神奇~,Web API之前有简单接触过,WCF的轻量级版,一般用于做一写开发性的服 ...

  9. Vue.js简介

    Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然是Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJ ...

随机推荐

  1. e780. 设置JList中的已选项

    List selection events are fired when the following methods are used to change the set of selected it ...

  2. Quorumpeps 群体感应数据库简介

    群体感应的定义: 细菌能自发产生.释放一些特定的信号分子,并能感知其浓度变化,调节微生物的群体行为, 这一调控系统称为群体感应.细菌群体感应参与包括人类.动植物病原菌致病力在内的多种生物学功能的调节. ...

  3. bioerl 获取gi号

    代码示例: use Bio::DB::EUtilities; my @ids = qw(CAB02640 EAS10332 YP_250808 NP_623143 P41007); my $facto ...

  4. FrameBot 软件安装测试

    背景:           FrameBot 用于纠正DNA序列中的插入和缺失,然后正确的翻译成蛋白质序列,frameBot 工具集成在RDPTools 中   源代码:           http ...

  5. c/c++ 代码中使用sse指令集加速

    使用SSE指令,首先要了解这一类用于进行初始化加载数据以及将暂存器的数据保存到内存相关的指令, 我们知道,大多数SSE指令是使用的xmm0到xmm8的暂存器,那么使用之前,就需要将数据从内存加载到这些 ...

  6. iOS 模拟器的“调试-位置”总是变成无的问题

    选择项目的“Edit Scheme...” 并且选择“Options”选项卡,更改你喜欢的默认地理位置 你也可以编辑一个gpx文件永久保存坐标,或者在线生成(传送门). 转自:iOS Simulato ...

  7. scala分析数据作图

    参考网址:https://stackoverflow.com/questions/36984780/spark-shell-how-to-use-breeze-viz 刚开始按照网上的教程只导入了 两 ...

  8. 配置IDEA Scala环境

    http://snglw.blog.51cto.com/5832405/1634595

  9. IT规划,是否一定要梳理流程

    IT规划,是面向企业业务的 IT战略规划,必然需要考虑业务的运营特点和需求.以往为企业提供IT规划咨询服务时,很多企业都提出,IT规划要满足业务的需求,那就要对业务足够熟 悉,而通过梳理流程能够达到这 ...

  10. Oracle的动态SQL

    例1:传递表名,和Where条件删除数据 CREATE OR REPLACE PROCEDURE raise_emp_salary (column_value NUMBER, emp_column V ...