JQuery图表插件之Flot
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的Alert插件介绍
作者:Petter Liu
出处:http://www.cnblogs.com/wintersun/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
该文章也同时发布在我的独立博客中-Petter Liu Blog。
JQuery图表插件之Flot相关推荐
- 6款jQuery图表插件
图表应用能让数据显示更加直观易懂,但光靠CSS +Xhtml 或纯图片实现的图表显然有很多局限性,强大的jquery 让我们可以实现各种很强大的图表,下面是6款jQuery图表插件 ,另外,你也许也愿 ...
- JQuery图表插件Highcharts示例教程
JQuery图表插件Highcharts示例教程,先上图,大伙Show一下效果:先上三个图,分别是曲线.柱状.扇形. 图表中的数据纯属于DEMO的测试数据,没有实际用意.下面讲下大致的实现步骤 第一步 ...
- 一款可定制的外国jQuery图表插件jqplot
jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图和柱状图.jqPlot支持为图表设置各种不同的样式.提供Tooltips,数据点高亮显示等功能. 用法: 1.引入jQuery类库和相 ...
- jQuery 图表插件 jqChart 使用
jQuery 图表插件 jqChart显示效果效果非常好.支持以下几种图表: Area Bar Bubble Column Financial Chart - Candlestick Financia ...
- 【部分原创】jquery图表插件flot笔记
Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 它的特点是使用简单.图形美观,支持鼠标跟踪及缩放功能. Flot是基于ca ...
- flot - jQuery 图表插件(jquery.flot)使用
Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 它的特点是使用简单.图形美观,支持鼠标跟踪及缩放功能. Flot是基于ca ...
- flot - jQuery 图表插件(jquery.flot)使用-2
Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 它的特点是使用简单.图形美观,支持鼠标跟踪及缩放功能. Flot是基于ca ...
- 使用jQuery图表插件Sparklines来开发一个实用的网站PV(page view)实时监控应用
日期:2011/11/14 来源:Terry jQuery sparklines是一个jQuery的图表插件,可以帮助你快速构建行内的小图表,今天我们将使用Sparklines开发一个动态监视首页P ...
- 开源数据可视化 datart-自定义Jquery图表插件教程
在数据可视化应用方面,滚动图表插件一直备受欢迎,下面给大家一份关于滚动图标插件干活教程. 滚动图标插件教程 主要使用 jQuery jQuery.marquee jQuery-DataTables 视 ...
最新文章
- 参考框架 系统 基准_带有基准的前端框架的真实比较(2018更新)
- JVM判断对象是否已死?
- Chronometer的使用
- Vue2.0 Transition常见用法全解惑
- 面试官:数据量大的情况下分页查询很慢,有什么优化方案?
- 程序自删除方法大总结
- hdu2089 不要62
- jquery读取table的内容
- 光纤色散是什么?如何色散补偿?
- 见过仙女蹦迪吗?一起用python做个小仙女代码蹦迪视频
- vivo X7(全网通)线刷救砖教程
- c语言中isupper用法,isupper - [ C语言中文开发手册 ] - 在线原生手册 - php中文网
- json-server 和mock.js生成大量json数据
- win7的音量图标不见了
- 精选七条关于人工智能的经典语录
- ACCESS模糊查询like的解决方法SQL查询语句通配符问题
- 【037】PhotoMosh–艺术故障图片在线生成器
- 拼多多发布“双打行动”说明:已下架商品近430万件
- LCS算法:最长公共子序列
- Pycharm汉化,Pycharm怎么改成汉语,手把手教学,超详细(汉语插件安装教程)
热门文章
- libevent和libev的区别对比(二)
- NOI2002 贪吃的九头龙
- kbengine0.2.3发布,开源分布式游戏服务端引擎
- 第一个小项目 - 去掉指定文件中的注释
- android电话拨号器
- H3C交换机配置本地和远程登录用户名和密码
- 《ASP.NET办公自动化系统开发实例导航》笔记一
- Linux Load Average高但磁盘IO和CPU占用率不高的可能原因
- %@page contentType=text/html;charset=gbk%与meta http-equiv=Content-Type content=text/html; ch...
- 第二周课堂小结以及习题思考