jquery 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如下

则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轴。

引用自:http://www.cnblogs.com/xiangniu/archive/2011/03/12/1982163.html

jquery flot相关推荐

jquery flot pie画饼图
具体效果如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Ty ...
jquery.flot 在节点上显示提示
jquery.flot插件实现了数据图表显示,美中不足的是没有提供在监听后的提示.可以通过内置的监听器去添加DOM节点实现提示功能. 1.导入js文件<script language=" ...
jquery.flot.js简介
JQuery图表插件之Flot Flot是一个Jquery下图表插件,具有简单使用,交互效果,具有吸引力外观特点.目前支持 Internet Explorer 6+, Chrome, Firefox ...
jquery flot图表插件
1.节点步骤 a.引入jquery.js和jquery.flot.js文件 b.如果在IE高版本中运行需要加上 <!--[if lte IE 8]><script language= ...
使用jQuery+flot插件在网页中动态显示服务器CPU运行状态
本文转自:http://www.jqueryflottutorial.com/cn/how-to-make-jquery-flot-realtime-update-chart.html 实时更新图表可 ...
flot.js ajax,jquery.flot.js简单绘制折线图用法示例
本文实例讲述了jquery.flot.js简单绘制折线图用法.分享给大家供大家参考,具体如下: 1.完整实例代码: 折线图 $(function() { AlPriceQuery(); }); fun ...
flot - jQuery 图表插件(jquery.flot)使用
Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 它的特点是使用简单.图形美观,支持鼠标跟踪及缩放功能. Flot是基于ca ...
flot - jQuery 图表插件(jquery.flot)使用-2
Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图). 它的特点是使用简单.图形美观,支持鼠标跟踪及缩放功能. Flot是基于ca ...
jquery.flot图表插件使用
Flot是纯Javascript实现的基于jQuery的图表插件,主要支持线状图和柱状图的绘制(通过插件也可以支持饼状图).它的特点是使用简单.图形美观,支持鼠标跟踪及缩放功能.Flot是基于canv ...

jquery flot

jquery flot相关推荐

最新文章

热门文章