jQuery图表插件Flot中文文档
最近正在使用JQuery的flot进行画图,但是这方面的中文帮助实在是太少了,干脆把英文的document直接翻译一下吧。因为也是再学习过程当中,难免会存在翻译不准确的地方,如果文中描述的不明白的话,可以参考一下原文:people.iola.dk/olau/
调用plot函数的方法如下:
1 | var plot = $.plot(placeholder, data, options) |
Data的结构:
data应该是data series的一个数组:
[ series1, series2, ... ]
一个series可以是原始数据或者是拥有属性的对象。原始数据是一个二维数组:
[ [x1, y1], [x2, y2], ... ]
为了简化flot内容的逻辑关系,x轴和y轴的数值都要使用数字(当然,如果有特殊需要的话,flot也可以支持以时间一个轴,后面会有详细的说明)。因 为大多数的情况下,我们都是从
data应该是data series的一个数组:
[ series1, series2, ... ]
一个series可以是原始数据或者是拥有属性的对象。原始数据是一个二维数组:
[ [x1, y1], [x2, y2], ... ]
为了简化flot内容的逻辑关系,x轴和y轴的数值都要使用数字(当然,如果有特殊需要的话,flot也可以支持以时间一个轴,后面会有详细的说明)。因 为大多数的情况下,我们都是从
数据库中直接提取数据并转换成JSON格式,但是没有关心过数据类型的问题。如果出现了奇怪的现象的话,请先检查数据的格式 是否有问题。
如果在一个点的数据使用的是null的话,那么在绘制的过程中就会把这个点忽略。那么包含这个点的那条线就会有断开的现象。这个点之前和之后的点是无法进行连接的。
线和点是相关连的。对于bars, 可以设置第三个关联值(默认是0)。
一个单一的序列对象结构是:
如果在一个点的数据使用的是null的话,那么在绘制的过程中就会把这个点忽略。那么包含这个点的那条线就会有断开的现象。这个点之前和之后的点是无法进行连接的。
线和点是相关连的。对于bars, 可以设置第三个关联值(默认是0)。
一个单一的序列对象结构是:
1 2 3 4 5 6 7 8 9 10 11 12 13 | { color: color or number data: rawdata label: string lines: specific lines options bars: specific bars options points: specific points options xaxis: 1 or 2 yaxis: 1 or 2 clickable: boolean hoverable: boolean shadowSize: number } |
除了其中的data以外,其它的属性都没有必要明确的指定,因为大多数情况下它们都是使用默认值的。通常你只指定标签和数据:
1 2 3 4 | { label: "y = 3", data: [[0, 3], [10, 3]] } |
label是说明这一个数据序列的含义的,如果只有一个序列的话就没有必要设置这个属性。如果有多个序列,就要设置label,从而可以在图中区分出序列的含义。
如果不设置color,那么会自动生成color来进行显示。
如果你想让用户添加和删除数据序列的话,剩下的属性就非常有用了。
xaxis和yaxis选项设置使用哪个维度,默认是设置成1的,如果设置成2的话,就使用第二个维度(x轴在上面,y轴在右边)。
clickable和hoverable可以设置成false,当整个图表设置成可交互时,这个选项可以让这条
如果不设置color,那么会自动生成color来进行显示。
如果你想让用户添加和删除数据序列的话,剩下的属性就非常有用了。
xaxis和yaxis选项设置使用哪个维度,默认是设置成1的,如果设置成2的话,就使用第二个维度(x轴在上面,y轴在右边)。
clickable和hoverable可以设置成false,当整个图表设置成可交互时,这个选项可以让这条
特定的数据序列让用户无法交互。
没有说明的属性会在后面详细介绍,大多数情况话都是使用默认值。当你要使用自己定义的值时,就会把默认的值给覆盖。
这是一个比较复杂的数据序列定义:
[ { label: "Foo", data: [ [10, 1], [17, -14], [30, 5] ] },
{ label: "Bar", data: [ [11, 13], [19, 11], [30, -7] ] } ]
Options的含义:
所有的选项都是完全可选的。如果想要修改的话,把它当作一个对象来处理就可以了:
没有说明的属性会在后面详细介绍,大多数情况话都是使用默认值。当你要使用自己定义的值时,就会把默认的值给覆盖。
这是一个比较复杂的数据序列定义:
[ { label: "Foo", data: [ [10, 1], [17, -14], [30, 5] ] },
{ label: "Bar", data: [ [11, 13], [19, 11], [30, -7] ] } ]
Options的含义:
所有的选项都是完全可选的。如果想要修改的话,把它当作一个对象来处理就可以了:
amaze ui zui1 2 w3c css规范3 4 5 6 | var options = { series: { lines: { show: true }, points: { show: true } } }; |
可定制说明部分的用户设置:
1 2 3 4 5 6 7 8 9 10 11 | legend: { show: boolean labelFormatter: null or (fn: string, series object -> string) labelBoxBorderColor: color noColumns: number position: "ne" or "nw" or "se" or "sw" margin: number of pixels or [x margin, y margin] 论坛模版 backgroundColor: null or color backgroundOpacity: number between 0 and 1 container: null or jQuery object/DOM element/jQuery expression } |
说明可以看成是一个表格,由两部分组成的:一个是所有数据序列的label,另一个是颜。如果想让label以其它的格式显示的话,可以使用lavelFormatter这个函数:
1 2 3 4 | labelFormatter: function(label, series) { // series is the series object for the label return '<a href="#' + label + '" mce_href="#' + label + '">' + label + '</a>'; } |
noColums是要把这个说明部分划分成几列。position是要把这个说明放到图表的哪个位置(top-right, top-left, 等等)以及与其它图表之间的距离。backgroundColor和backgroundOpacity是设置背景的颜和透明度,正常都是默认的。
如果你想把这个说明部分从图表中拿到来,并放到DOM中的一个元素中的话,就可以设置container这个属性,它可以是一个JQuery的对象或者表达式。psition和margin等等的一些属性就会被忽略,而且这个元素中的内容会被重写的。
如果你想把这个说明部分从图表中拿到来,并放到DOM中的一个元素中的话,就可以设置container这个属性,它可以是一个JQuery的对象或者表达式。psition和margin等等的一些属性就会被忽略,而且这个元素中的内容会被重写的。
关于轴的用户设置:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 format如何使用23 24 25 26 27 28 29 | xaxis, yaxis: { show: null or true/false position: "bottom" or "top" or "left" or "right" mode: null or "time" color: null or color spec tickColor: null or color spec min: null or number max: null or number autoscaleMargin: null or number transform: null or fn: number -> number inverseTransform: null or fn: number -> number ticks: null or number or ticks array or (fn: range -> ticks array) tickSize: number or array minTickSize: number or array tickFormatter: (fn: number, object -> string) or string tickDecimals: null or number labelWidth: null or number labelHeight: null or number reserveSpace: null or true tickLength: null or number alignTicksWithAxis: null or number } |
所有的都包含相同的属性。下面会详细的介绍每一个属性的含义。
show:如果不设置这个属性的话,flot会自动的来选择,比如:数据与轴有关系的话,那么就会把轴显示出来,当然更灵活的方式还是用
true或者false来设定这个属性。
position:用来定义轴文字显示的位置,是在X轴的上方还是下方,是在Y轴的左边还是右边。
mode:轴的数据类型,默认的是数值类型,当设置成time类型的话,就可以用时间做为一个轴。
color:定义轴标识文字和坐标的颜。如果不设置的话,就与图表中网格的颜是相同的。当然也可以自己来设置颜,使用"tickColor"还
color:定义轴标识文字和坐标的颜。如果不设置的话,就与图表中网格的颜是相同的。当然也可以自己来设置颜,使用"tickColor"还
可以单独定义坐标的颜。
min/max:描述轴最大值和最小值范围。如果不设置的话,flot会自动的计算并生成一个范围来进行显示。
autoscaleMargin:这个有一点难理解。flot自动计算min/max的范围的时候会加上一个值,从而防止有的点会放到图的边缘。这个属性只能
在不设置max/min的时候才可以使用。如果设置了一个margin,flot会延长轴的结束点从而构成一个完整的坐标。默认的设置是x轴没有margin,y轴有0.02的margin。默认的设置已经可以满足大多数的使用了。
"transform","inverseTransform":可以对原始的数据进行一些特殊的计算以后再进行绘制。比如:可以通过这种方法来绘制一些非线性
的曲线。例如:
1 2 3 4 | xaxis: { transform: function (v) { return Math.log(v); }, inverseTransform: function (v) { p(v); } jquery下载文件插件} |
scalancew700 |
同样的,想对Y轴做反转的话就可以:
1 2 3 4 | yaxis: { transform: function (v) { return -v; }, inverseTransform: function (v) { return -v; } } |
Flot中的数据都是单调的,也就是说原始的数据是不能出现乱序的。inverseTransform就是transform的反向函数,通过显示的数据可以得到原始数据,如果图表没有交互过程的话,这个属性可以不用设置。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论