当前位置:首页 > Windows程序 > 正文

JQuery flot API文档 中文版

2021-03-25 Windows程序

调用plot函数的方法如下: 
var plot = $.plot(placeholder, data, options) 
其 中placeholder可以是JQuery的对象,DOM元素或者JQuery的表达示,要把完成的图放到这个位置上。placeholder要有宽度 和高度。因为plot会修改placeholder的一些属性,所以建议大家使用一个简单的div,除了高度和宽度其它的属性都不要设置。 
Data的结构: 
data应该是data series的一个数组: 
[ series1, series2, ... ] 
一个series可以是原始数据或者是拥有属性的对象。原始数据是一个二维数组: 
[ [x1, y1], [x2, y2], ... ] 
为 了简化flot内容的逻辑关系,x轴和y轴的数值都要使用数字(当然,如果有特殊需要的话,flot也可以支持以时间一个轴,后面会有详细的说明)。因为 大多数的情况下,我们都是从数据库中直接提取数据并转换成JSON格式,但是没有关心过数据类型的问题。如果出现了奇怪的现象的话,请先检查数据的格式是 否有问题。 
如果在一个点的数据使用的是null的话,那么在绘制的过程中就会把这个点忽略。那么包含这个点的那条线就会有断开的现象。这个点之前和之后的点是无法进行连接的。 
线和点是相关连的。对于bars, 可以设置第三个关联值(默认是0)。 
一个单一的序列对象结构是: 
  { 
    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以外,其它的属性都没有必要明确的指定,因为大多数情况下它们都是使用默认值的。通常你只指定标签和数据: 
  { 
    label: "y = 3", 
    data: [[0, 3], [10, 3]] 
  } 
  label是说明这一个数据序列的含义的,如果只有一个序列的话就没有必要设置这个属性。如果有多个序列,就要设置label,从而可以在图中区分出序列的含义。 
  如果不设置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的含义: 
所有的选项都是完全可选的。如果想要修改的话,把它当作一个对象来处理就可以了: 
var options = { 
    series: { 
      lines: { show: true }, 
      points: { show: true } 
    } 
  }; 
可定制说明部分的用户设置: 
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这个函数:

labelFormatter: function(label, series) { 

// series is the series object for the label

return ‘‘; 

noColums是要把这个说明部分划分成几列。position是要把这个说明放到图表的哪个位置(top-right, top-left, 等等)以及与其它图表之间的距离。backgroundColor和backgroundOpacity是设置背景的颜色和透明度,正常都是默认的。 
如果你想把这个说明部分从图表中拿到来,并放到DOM中的一个元素中的话,就可以设置container这个属性,它可以是一个JQuery的对象或者表达式。psition和margin等等的一些属性就会被忽略,而且这个元素中的内容会被重写的。 
关于轴的用户设置:

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/67255.html