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. C# 浅谈接口的优势

    总结了一下接口的小优势,可以便于新手理解为什么要用接口,用接口有什么好处. 1.接口的定义: 关键字:interface,接口名一般大写I开头,接口中定义方法,但是不实现方法 interface IB ...

  2. 暑假热身 D. 条形码设计

    校ACM队准备筹划向学校批请一个专用机房.但是为了防止它变成公用机房,FL建议采用刷卡进入的办法,她设计了一种条形码,每人都对应一个.这种大小为2*n的条形码由以下三种元素构成:1*2.2*1.2*2 ...

  3. 【Django】如何按天 小时等查询统计?

    代码: from django.db import connection from django.db.models import Sum,Count #alarm_sum_group_items = ...

  4. 为eclipse设置好看的代码主题

    eclipse的默认代码背景是白色,上个文章简单说了字体设置,这边主要介绍代码高亮的主题设置,打造更酷的编程界面.网上有文章说可以在设置里面逐一设置,但是比较麻烦,可以去网上下载现成的主题包,网址为: ...

  5. Java for LeetCode 146 LRU Cache 【HARD】

    Design and implement a data structure for Least Recently Used (LRU) cache. It should support the fol ...

  6. c# 正则表达式 匹配回车

    1 "." 匹配除 "\n" 之外的任何单个字符,一般用".*?"匹配不包括回车的任意字符. 2 我们在用正则表达式分析html或者是xml ...

  7. C++ 提取字符串中的数字

    C++ 提取字符串中的数字 #include <iostream> using namespace std; int main() { ] = "1ab2cd3ef45g&quo ...

  8. error: insufficient permissions for device: verify udev rules

    error: insufficient permissions for device: verify udev rules.See [http://developer.android.com/tool ...

  9. adbWireless 简单教程

    adbWireless:无线使用ADB(siir.es.adbWireless) 下载: http://www.coolapk.com/apk/siir.es.adbWireless >> ...

  10. IE8上传文件时文件本地路径变成"C:\fakepath\"的问题

    转自:http://yunzhu.iteye.com/blog/1116893 在使用<input id="file_upl" type="file" / ...