Flot是Ole Laursen开发的基于JQuery的纯JavaScript实现的绘图库,Flot使用起来非常简单,绘图效果相当绚丽,而且还支持一些图片的操作功能,例如图片的缩放。可以看一下Flot的demo:

绘制上面的图形所编写的JS也非常简单易读: 
[code="js"] 
<script language="javascript" type="text/javascript" id="source"> 
$(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]];

var d3 = []; 
for (var i = 0; i < 14; i += 0.5) 
d3.push([i, Math.cos(i)]);

var d4 = []; 
for (var i = 0; i < 14; i += 0.5) 
d4.push([i, Math.sqrt(i * 10)]);

var d5 = []; 
for (var i = 0; i < 14; i += 0.5) 
d5.push([i, Math.sqrt(i)]);

$.plot($("#placeholder"), [ 

data: d1, 
lines: { show: true, fill: true } 
}, 

data: d2, 
bars: { show: true } 
}, 

data: d3, 
points: { show: true } 
}, 

data: d4, 
lines: { show: true } 
}, 

data: d5, 
lines: { show: true }, 
points: { show: true } 

]); 
}); 
</script> 
[/code]

Flot的网站:

http://code.google.com/p/flot/

标签: jQueryjs

推荐一个很棒的JS绘图库Flot的更多相关文章

  1. 一些很棒的js代码

    本来是想放在博客园首页的,貌似篇幅不够被移除掉了.后来慢慢补上,看这篇文章吧:一些优秀的代码分析与学习[持续更新],里面的内容会持续更新,这篇文章作废了 1.jQuery初始化代码段 技术亮点:jQu ...

  2. 推荐一个很好的富文本web编辑器UEditor

    前天产品提了一个编辑器的bug,本人找是找到了问题的症结,就是不好改.框架是压缩兼混淆后的代码.查一下,好多年前的框架... 咨询了一个同事有关旧框架的事情,他也建议我升级编辑器并帮忙帮我找了UEdi ...

  3. MD4C/CO46/MD04一个很棒的工单缺料分析

    大家好~~~ 之前在MD04物料分析的时候,看到有订单预留,双击有个订单报告可以显示一个订单物料是否缺料清单 这个单独的工单分析可以在T-code:MD4C,CO46查看,如果只是单独的使用,那么这两 ...

  4. Linux 下一个很棒的命令行工具

    导读 Taskwarrior 是 Ubuntu/Linux 下一个简单而直接的基于命令行的 TODO 工具.这个开源软件是我曾用过的最简单的基于命令行的工具之一.Taskwarrior 可以帮助你更好 ...

  5. 一个很好介绍js的例子

    function UpdateInit(opt){ this.init(opt);} UpdateInit.prototype={ loadUrl:null, loadParam:null, befo ...

  6. 最近在学习UDP方面的通信,找到一个很棒的博客

    http://blog.csdn.net/kesalin/article/details/8798039

  7. 推荐一个很好用的HTTP操作类

    /// <summary> /// 类说明:HttpHelps类,用来实现Http访问,Post或者Get方式的,直接访问,带Cookie的,带证书的等方式,可以设置代理 /// 重要提示 ...

  8. 推荐25款很棒的 HTML5 开发框架和开发工具【上篇】

    HTML5 在不同的领域让网页设计更强大的.快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5.HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站 ...

  9. 推荐10个很棒的AngularJS学习指南

    AngularJS 是非常棒的JS框架,能够创建功能强大,动态功能的Web app.AngularJS自2009发布以来,已经广泛应用于Web 开发中.但是对想要学习Angular JS 的人而言,只 ...

随机推荐

  1. 求n!质因数分解之后素数a的个数

    n!质因数分解后P的个数=n/p+n/(p*p)+n/(p*p*p)+......直到n<p*p*p*...*p //主要代码,就这么点东西,数学真是厉害啊!幸亏我早早的就退了数学2333 do ...

  2. win7配置SMTP服务

    有人说WIN7系统没有SMTP服务 怎么可能呢??? 具体安装步骤如下: 控制面板\程序>打开和关闭Windows功能 Internet信息服务  将 万维网服务>应用程序开发功能> ...

  3. 在Ubuntu下配置舒服的Python开发环境

    Ubuntu 提供了一个良好的 Python 开发环境,但如果想使我们的开发效率最大化,还需要进行很多定制化的安装和配置.下面的是我们团队开发人员推荐的一个安装和配置步骤,基于 Ubuntu 12.0 ...

  4. 单用户模式下修改root密码

    1.重启或者开机时,在倒数3秒的界面按下任意键. 2.该界面有如下提示(e 编辑 a 更改内核选项 c 命令行  b 启动),所以我们按下"e"编辑. 3.上下键选中第二行再按下& ...

  5. Mac安装Brew

    安装命令如下:curl -LsSf http://github.com/mxcl/homebrew/tarball/master | sudo tar xvz -C/usr/local --strip ...

  6. Hibernate 和 快照

    Hibernate我们已经学了四天,该讲的知识我们已经讲完,明天放假,后天练习一天就要结束hibernate的学习,有点不舍的,想来hibernate也不是传说中的那么难,在次将hibernate中三 ...

  7. JQuery学习之jQuery尺寸

    1.width()和height()方法: width():设置或返回元素的宽度(不包括内边距,边框或外边距) height():设置或返回元素的高度(不包括内边距,边框或外边距) $("b ...

  8. ytu 1980:小鼠迷宫问题(DFS 深度优先搜索)

     小鼠迷宫问题 Time Limit: 2 Sec  Memory Limit: 64 MB Submit: 1  Solved: 1 [Submit][Status][Web Board] Desc ...

  9. Laravel 5 基础(十二)- 认证

    Laravel 出厂已经带有了用户认证系统,我们来看一下 routes.php,如果删除了,添加上: Route::controllers([ 'auth' => 'Auth\AuthContr ...

  10. java-testng-selenium优化

    由于项目中webui测试的需要,是用testng+selenium的方式,其中遇到过几个问题,记录下,方便以后查看 1.重复运行多次case 因为是selenium,所以有的时候需要运行多次,方法是写 ...