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.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
语法示例：

<span style="font-size:12px;">$.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 }}
]);</span>

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

例三：指定刻度显示的内容
用法实例：

<span style="font-size:12px;">$.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 根据所给的数据自动判断
});</span>

其中 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轴。

本文来自：http://www.cnblogs.com/xiangniu/archive/2011/03/12/1982163.html

jquery 绘图工具 flot 使用相关推荐

jquery 绘图工具 flot 学习笔记
原文地址为: jquery 绘图工具 flot 学习笔记今天想做一个统计图表,像163博客的流量统计一样的,借助 flot 实现了,而且很简单. flot网址:http://code.google. ...
＜笔记1＞matplotlib绘图工具笔记
matplotlib绘图工具笔记 python中有许多非常方便的可视化工具,例如matplotlib,seaborn等.在这里主要总结matplotlib的简单绘图方法. 设置图形的大小和中文显示,图 ...
HTML5 canvas 在线画笔绘图工具（三）
组装画板(TDrawBuilder) 在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作. 画板通过一个命名为TDrawBuilder来进行组装.在详细讲解TDrawBuilder对象之 ...
编程软件python图片-python Plotly绘图工具的简单使用
1.plotly库的相关介绍 1)相关说明 plotly是一个基于javascript的绘图库,plotly绘图种类丰富,效果美观: 易于保存与分享plotly的绘图结果,并且可以与Web无缝集成: ...
python 画柱状图-python使用Plotly绘图工具绘制柱状图
本文实例为大家分享了python使用Plotly绘图工具绘制柱状图的具体代码,供大家参考,具体内容如下使用Plotly绘制基本的柱状图,需要用到的函数是graph_objs 中 Bar函数通过参数 ...
用python画太阳花-python 简单的绘图工具turtle使用详解
目录 1. 画布(canvas) 1.1 设置画布大小 2. 画笔 2.1 画笔的状态 2.2 画笔的属性 2.3 绘图命令 3. 命令详解 4. 绘图举例 4.1 太阳花 4.2 绘制小蟒蛇 4.3 ...
python绘制饼图-Python使用Plotly绘图工具，绘制饼图
今天我们来学习一下如何使用Python的Plotly绘图工具,绘制饼图使用Plotly绘制饼图的方法,我们需要使用graph_objs中的Pie函数函数中最常用的两个属性values,用于赋值给需 ...
python画直方图代码-Python使用Plotly绘图工具，绘制直方图
今天我们再来讲解一下Python使用Plotly绘图工具如何绘制直方图使用plotly绘制直方图需要用到graph_objs包中的Histogram函数我们将数据赋值给函数中的x变量,x = da ...
【PC工具】创客、arduino爱好者必备，最最简单好用硬件电路连线绘图工具Fritzing...
微信关注 "DLGG创客DIY" 设为"星标",重磅干货,第一时间送达. 今天分享一个超级好用,超级简单粗暴的硬件连线绘图工具Fritzing. 如下图所示,即 ...

jquery 绘图工具 flot 使用

jquery 绘图工具 flot 使用相关推荐

最新文章

热门文章