jquery 绘图工具 ------flot

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

下载 JS 文件,使用方法和 jquery 一样。

注意:flot是自动绘制在画布标签(canvas)内的,IE不支持,需要添加 excanvas.min.js ,此文件可以在上面给出的flot网址中下载

示例网址:http://people.iola.dk/olau/flot/examples/

参数说明:http://wenku.baidu.com/view/d504613331126edb6f1a1008.html

上面的两个网址已经将基础说的很清楚了。

示例说明:

语法: $.plot(id, data, options);

1.id :放置 canvas 的 div 的ID

2.data :数据,一般为二维数组的形式。

例如:[[x1,y1],[x2,y2],[x3,y3] , ...]

如果某个数据为空,则对应点将被忽略,且改点前后两个点将不再用直线连接。

3.options :样式,用于设置显示样式。 options 的格式:

var options = {
lines: { show: true },
points: { show: true },
xaxis: { tickDecimals: 0, tickSize: 1 }
};

参数:

1.lines { }  显示直线

show: true 显示

color: "#FFFFFF" 线条颜色

steps: true 阶梯形

2.points { }  显示点

3.bars { }  显示直方图

4.xaxis { } 横坐标的样式

例一:http://people.iola.dk/olau/flot/examples/basic.html

语法示例:$.plot($("#name"), [ d1,d2,d3 ]);
参数①:name 为画布所在 div 的 id 。

参数②:d2,d3 一般为数列数组 [x,y],x和y分别表示每个点的横轴和纵轴,例如可以定义如下:

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 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

flot会依据其最大值和画布大小自动设置刻度,例如设置div如下

<div id="placeholder" style="width:100px;height:100px;"></div>

则x方向每个像素表示 9/100=0.09 个单位,y方向每个像素表示 12/100=0.12 个单位。

例二:http://people.iola.dk/olau/flot/examples/graph-types.html

语法示例:


$.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
}

   
},

   
{

       
data: d6,

       
lines: { show:
true
, steps:
true
}

   
}

]);

参数说明:lins 表示直线,参数 steps:true 表示梯形图,bars 表示直方图,points 表示点状图。与示例一比较,实例二将示例一中的数据用花括号括起,此时需要用 "data:" 指定数据源,逗号之后指定其显示样式。

例三:指定刻度显示的内容

用法实例:


$.plot($(
"#placeholder"
), [{ label:
""
, data: vData}],

{

   
series: { lines: { show:
true
}, points: { show:
true
} },

   
xaxis: { ticks: [[1,
"1月"
], [3,
"3月"
], [5,
"5月"
], [7,
"7月"
], [9,
"9月"
], [11,
"11月"
]], min: 1, max: 12 },  
//指定固定的显示内容

   
yaxis: { ticks: 5, min: 0 }  
//在y轴方向显示5个刻度,此时显示内容由 flot 根据所给的数据自动判断

}

   
);

其中 vData 为自定义数据

var vData = [[1, 103], [2, 28], [3, 135], [4, 130], [5, 145], [6, 155], [7, 155], [8, 155], [9, 155], [10, 155], [11, 155], [12, 155]];

显示效果为:

关键参数为 ticks 。可以看到本例中 x轴刻度的显示内容是自己指定的,y轴让 flot 自动划分,当然也可以指定y轴。

jquery 绘图工具 ------flot

时间: 2024-11-05 22:48:01

jquery 绘图工具 ------flot的相关文章

jquery 绘图工具 flot 学习笔记

今天想做一个统计图表,像163博客的流量统计一样的,借助 flot 实现了,而且很简单. flot网址:http://code.google.com/p/flot/ 下载 JS 文件,使用方法和 jquery 一样. 注意:flot是自动绘制在画布标签(canvas)内的,IE不支持,需要添加 excanvas.min.js ,此文件可以在上面给出的flot网址中下载 示例网址:http://people.iola.dk/olau/flot/examples/ 参数说明:http://wenku

jquery 源码学习(四)构造jQuery对象-工具函数

jQuery源码分析-03构造jQuery对象-工具函数,需要的朋友可以参考下. 作者:nuysoft/高云 QQ:47214707 EMail:[email protected] 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 读读写写,不对的地方请告诉我,多多交流共同进步,本章的的PDF等本章写完了发布. jQuery源码分析系列的目录请查看 http://nuysoft.iteye.com/blog/1177451,想系统的好好写写,目前还是从我感兴趣的部分开始,如果大家有对哪

第一百七十五节,jQuery,工具函数

jQuery,工具函数 学习要点: 1.字符串操作 2.数组和对象操作 3.测试操作 4.URL 操作 5.浏览器检测 6.其他操作 工具函数是指直接依附于 jQuery 对象,针对 jQuery 对象本身定义的方法,即全局性 的函数.它的作用主要是提供比如字符串.数组.对象等操作方面的遍历. 一.字符串操作 在 jQuery 中,字符串的工具函数只有一个,就是去除字符串左右空格的工具函数: trim()去掉字符串两边空格 var str = ' jQuery '; alert(str); al

jQuery实用工具函数总结

一.数组和对象操作 1. $.each——遍历 $.each(obj,function(param1,param2))遍历数组时:param1为元素序号,param2为元素内容:遍历对象时:param1为元素属性名,param2为元素属性值. 例如:①遍历数组: $(function () { var arrStu = { "张三:": "60", "李四:": "70", "王二:": "80&

HTML5 canvas 在线画笔绘图工具(三)

组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之前我们来看一下程序的HTML代码. 画布由三个Canvas组成 toolbar用于绘制工具条,drawCanvas 用于画图的画布,openCanvas 用于在打开保存的图片时显示小图片. 通过建立一个新的TDrawBuilder对象 new TDrawBuilder(toolbar,drawcan

Android 绘图工具库AChartEngine

From: http://www.oschina.net/p/achartengine AChartEngine是为android应用而设计的绘图工具库.目前该库的最新稳定版本是0.7,支持绘制以下类型的图表: line chart area chart scatter chart time chart bar chart pie chart bubble chart doughnut chart range (high-low) bar chart dial chart / gauge com

JQuery开发工具和插件

最近在学习jquery,今天就为大家介绍几款开发工具,可以帮助你提高开发的效率. 1.Dreamweaver Dreamweaver是建立在WEB站点和应用程序的专业工具.将可视化工具.应用程序开发功能和代码编辑支持组合在一起,使得各个层次的开发人员和设计人员都能够快速创建基于标准的网站和应用程序. 要使Dreamweaver支持jquery自动提示代码功能,方法很简单,只需要下载一个插件即可.下载地址如下: 在Dreamweaver中依次选择命令-扩展管理-安装管理-JQurery_API_m

那些年,我追过的绘图工具

https://zhuanlan.zhihu.com/p/19900327 ***************************** 文档能力是一个工程师必不可少的基础能力,而高质量的文档往往伴随着高质量的图表."A picture is worth a thousand words",复杂的概念,逻辑,想法往往能够用图表清晰而生动地表达.一张好的图表离不开制作人的大脑对思维的描述,但同样离不开制作人所使用的工具.好的工具,让同样的事情事半功倍.我是一个工具爱好者,即便手头上有一个称

10款最佳HTML5绘图工具

HTML5无疑是当前最受宠的一项技术,每个web设计者都在热烈的讨论这种神奇的标记语言的兴起.HTML5是一种学起来毫不费力的标记语言,但它却能提供迷人的.富有艺术性的特征,帮助web设计人员完成他们的构思想象.HTML5对于一个设计人员来说能毫不费力的理解,轻松的掌握. 草绘和制图是设计工作者工作中一个重要的特征.HTML5将会这方面显露出不可限量的前途. 今天,我给web设计人员收集了几款最好的HTML5绘图或涂鸦工具.这些绘图工具大多数是用HTML5画布(Canvas)实现的,部分辅以Ja