Flot Reference

Table of Contents

Introduction| Data Format| Plot Options| Customizing the legend| Customizing the axes| Multiple axes| Time series data| Customizing the data series| Customizing the grid| Specifying gradients| Plot Methods| Hooks| Plugins| Version number


Introduction

Consider a call to the plot function:

var plot = $.plot(placeholder, data, options)

The placeholder is a jQuery object or DOM element or jQuery expression that the plot will be put into. This placeholder needs to have its width and height set as explained in the README (go read that now if you haven't, it's short). The plot will modify some properties of the placeholder so it's recommended you simply pass in a div that you don't use for anything else. Make sure you check any fancy styling you apply to the div, e.g. background p_w_picpaths have been reported to be a problem on IE 7.

The plot function can also be used as a jQuery chainable property.  This form naturally can't return the plot object directly, but you can still access it via the 'plot' data key, like this:

var plot = $("#placeholder").plot(data, options).data("plot");

The format of the data is documented below, as is the available options. The plot object returned from the call has some methods you can call. These are documented separately below.

Note that in general Flot gives no guarantees if you change any of the objects you pass in to the plot function or get out of it since they're not necessarily deep-copied.


中文

看看以下调用plot函数的例子:

var plot = $.plot(placeholder, data, options)

那个占位符(placeholder)是一个将要放进图表的jquery对象或者DOM元素或者jquery表达式。这个占位符需要设置有自己的宽度和高度(如同在readme文件中说明过)。图表会修改一些占位符的属性,所以推荐你只是简单地传入一个不用于其他事情的div中。确定你检查了用于该div的样式不会带来其他问题。

这个图表函数也可作为一个jquery的链式特性。这种情况自然就不会直接返回图表对象,但是你依然可以通过‘plot’数据键去访问它,象这样:

var plot = $("#placeholder").plot(data, options).data("plot");

数据的格式记录在下面,作为可用的配置选项。从调用返回的图表对象有一些你可以调用的方法。这些都单独列在下面。

注意:总的说来,Flot本插件不能保证,如果你改变了任意一个你传入图表函数的对象或者从图表函数得到的对象,因为他们没有被必要的深度拷贝。