jquery.flot.js简介
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简介的更多相关文章
- jQuery遮罩插件jQuery.blockUI.js简介
利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 利用Jquery.blockui.js创建可拖动.自定义内容的弹出层 目标 : 1 . 弹出层的内容可以自定义任意的HTML元素 ...
- jquery.peity.js简介
jQuery简单图表peity.js <html xmlns="http://www.w3.org/1999/xhtml"> <head> <titl ...
- jquery.easypiechart.js简介
此插件主要是用来统计新的访问.跳出率.服务器负载.使用的RAM等,功能很强大,带有HTML5的动画效果,效果非常炫,看效果吧easyPieChart一款新型的EASY饼图数据统计Jquery插件截图: ...
- jquery.sparkline.js简介
jQuery线状图插件Sparkline 官网地址:http://omnipotent.net/jquery.sparkline/ 文档地址:http://omnipotent.net/jquery. ...
- jquery.gritter.js简介
Gritter 是一个小型的 jQuery 消息通知插件,通知效果如下图所示: 参考网
- jQuery.Flot开发手记
目录 介绍 使用 自定义参数 自定义图例 自定义坐标 自定义数据序列 自定义网格 其他 鼠标停留在图表节点时显示tooltip 介绍 项目地址:http://www.flotcharts.org/ A ...
- flot - jQuery 图表插件(jquery.flot)使用
Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 特别注意Flot使用的是UTC时间,最好修改flot.js去掉所有的UTC ...
- 当 jquery.unobtrusive-ajax.js 遇上Web API
最近在熟悉Abp框架,其基于DDD领域驱动设计...前段可以绕过mvc直接调用根据app层动态生成的webapi,有点神奇~,Web API之前有简单接触过,WCF的轻量级版,一般用于做一写开发性的服 ...
- Vue.js简介
Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然是Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJ ...
随机推荐
- 用不上索引的SQL语句
下面介绍六种建立索引后不起作用的sql语句. 1.使用不等于操作符(<>, !=) SELECT * FROM dept WHERE staff_num <> 1000; × ...
- 嵌入式开发之hi3519---网络不通问题rmii
http://www.ebaina.com/bbs/forum.php?mod=viewthread&tid=18092&extra=page%3D1%26filter%3Dtypei ...
- Error configuring application listener of class org.springframework.web.context.ContextLoaderListener
严重: Error configuring application listener of class org.springframework.web.context.Co ...
- TI单节电量计基本介绍及常见问题解答
电量计(gas gauge /fuel gauge)是用来计量显示电池电量,通常包括mAh剩余容量(RM),满充容量(FCC),百分比容量(SOC),电压,电流,温度等,部分电量计还包含放空,充满时间 ...
- gitlab的安装和基本维护
基本介绍 GitLab是一个自托管的Git项目仓库,可以自己搭建个人代码管理的仓库,功能与github类似. 安装 操作系统:CentOS6.5 gitlab官网下载安装地址:https://abou ...
- Windows下安装Oracle12C(一)
1,在官网上下载oracle的压缩文件,两个都要下载. 并两个同时选中解压在一个文件夹里面. 2,解压之后,如下图,点击setup.exe稍等一会儿 ,3,开始安装: 不选点击下一步,或者直接点击下一 ...
- centos:解决docker容器内挂载目录无权限 ls: cannot open directory .: Permission denied
docker运行一个容器后,将主机中当前目录下的文件夹挂载到容器的文件夹后 进入到docker容器内对应的挂载目录中,运行命令ls后提示: ls: cannot open directory .: P ...
- winform c#中子窗体关闭刷新父窗体
父窗体Form1 子窗体Form2 Form1中有一个datagridview控件和一添加按钮,Form2中有一个Text控件和一个保存按钮 要求点击Form1窗体上的添加按钮,弹出Form2,再te ...
- Hibernate的七种映射关系之七种关联映射(二)
继续上篇博客 七.Hibernate双向一对多关联映射:让多的一端来维护关系. 主要是解决一对多单向关联的缺陷,而不是需求驱动的. 1.在Student.java实体类里添加Classes引用.pri ...
- 细说Python2.x与3.x版本区别
Python的3.0版本,常被称为Python 3000,或简称Py3k.相对于Python的早期版本,这是一个较大的升级. 为了不带入过多的累赘,Python 3.0在设计的时候没有考虑向下相容 ...