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. 推荐一个很棒的开源工作流elsa-core

    开源项目orchard主要开发人员Sipke Schoorstra 开源了一个netcore 工作流项目,地址:https://github.com/elsa-workflows/elsa-core, ...

  2. 国外大神制作的一个很棒的matplotlib 可视化教程

    国外大神制作的一个很棒的matplotlib 可视化教程 参考:https://www.machinelearningplus.com/plots/top-50-matplotlib-visualiz ...

  3. vis.js绘图库的一个BUG以及源码修正

    1. BUG 1.1 BUG触发情况 在使用vis.js绘图时,加入两个节点A和B之间既存在一条从A指向B的边,同时也存在一条从B指向A的边,那么这个绘图库就会崩溃. 1.2 BUG解析 vis.js ...

  4. Makefile经典教程(一个很棒很清晰的讲解)【转】

    转自:https://blog.csdn.net/seven_amber/article/details/70216216 该篇文章为转载,是对原作者系列文章的总汇加上标注. 支持原创,请移步陈浩大神 ...

  5. 一些很棒的js代码

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

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

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

  7. 一个很好的JS,ASP二级下拉框联动。

    在我们制作网站会员注册信息时,一般会涉及到填写自己所在省/市,如果用input或textarea做成填写形式不太理想.所以大部分网站都会选择联动下来列表形式,做起来也不算很复杂,同时看上去也很轻松. ...

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

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

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

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

随机推荐

  1. Nmap备忘单:从探索到漏洞利用(Part3)

    众所周知NMAP是经常用来进行端口发现.端口识别.除此之外我们还可以通过NMAP的NSE脚本做很多事情,比如邮件指纹识别,检索WHOIS记录,使用UDP服务等. 发现地理位置 Gorjan Petro ...

  2. Powershell常用命令

    Powershell常用命令1.Get-Command 得到Powshell所有命令2.Get-Process 获取所有进程3.Set-Alias 给指定命令重命名 如:Set-Alias aaa G ...

  3. BZOJ 1452 [JSOI2009] Count

    这道题好像有点简单的样子... absi找题目好厉害啊...确实是一道比较裸的2dBIT啊. 水掉吧. 附:2dBIT怎么做: 2dBIT就是BIT套BIT啦. 所以修改loop(x+=lowbit( ...

  4. PHP - 获取和设置include_path .

    PHP - 获取和设置include_path 分类:             PHP              2011-02-16 13:19     2818人阅读     评论(1)     ...

  5. 使用MegaCli和Smartctl获取普通磁盘

    设备名称: [root@DB232 shell]# cat /proc/scsi/scsi Attached devices:Host: scsi0 Channel: 02 Id: 00 Lun: 0 ...

  6. 使用clssneme改变图片或样式

    <title>使用className改变样式</title> <style type="text/css"> li{ font-size: 12 ...

  7. auto_ptr浅析(转载)

    转载自http://www.cnblogs.com/qytan36/archive/2010/06/28/1766555.html auto_ptr是C++标准库中(<utility>)为 ...

  8. iOS 关于Layer的疑问

    很久很久以前,就对ios的Layer十分的不解,学习了android后,打算通过android中的相关实现,分析一下ios中layer的作用,结果没有找到android中的对应的内容!十分让人郁闷.于 ...

  9. 9.Python笔记之面向对象高级部分

    类的成员 类的成员可以分为三大类:字段.方法和属性 注:所有成员中,只有普通字段的内容保存对象中,即:根据此类创建了多少对象,在内存中就有多少个普通字段.而其他的成员,则都是保存在类中,即:无论对象的 ...

  10. 3.python基础补充(集合,collection系列,深浅拷贝)

    一.集合 1.集合(set): 把不同的元素组成一起形成集合,是python基本的数据类型.集合元素(set elements):组成集合的成员 python的set和其他语言类似, 是一个无序不重复 ...