當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

flot中文API（转载）

發(fā)布時(shí)間：2025/3/21 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 flot中文API（转载）小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

Flot Reference
flot參考文檔
--------------

Consider a call to the plot function:
下面是對(duì)繪圖函數(shù)plot的調(diào)用：

?? 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 images have been reported to be a
problem on IE 7.

占位符placeholder是一個(gè)jQuery對(duì)象或者DOM元素或者jQuery表單式，繪圖函數(shù)將把圖表畫在placeholder內(nèi)。
這個(gè)占位符需要設(shè)置高寬(這在README文檔里面已經(jīng)介紹過(guò)，如果你還沒(méi)有閱讀過(guò)現(xiàn)在就去閱讀吧，文檔很短)。
plot函數(shù)畫圖時(shí)將修改這個(gè)占位符的內(nèi)容，因此你最好使用一個(gè)空的DIV元素作為占位符，另外注意不要給占位符
設(shè)置花哨的樣式，比如，在IE7.0下，給占位符設(shè)置背景圖將會(huì)出錯(cuò)。

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

函數(shù)可以使用的數(shù)據(jù)格式會(huì)在后面說(shuō)明，plot返回對(duì)象有一些方法可供調(diào)用，在后面會(huì)分開介紹。

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.

另外請(qǐng)注意，flot不保證plot函數(shù)內(nèi)的對(duì)象被修改或刪除后仍然能正常工作(廢話)。

Data Format
數(shù)據(jù)格式
-----------

The data is an array of data series:
flot的數(shù)據(jù)是一個(gè)數(shù)列數(shù)組(plot函數(shù)中的data參數(shù):每條曲線一個(gè)data項(xiàng)參數(shù)，繪制多條曲線時(shí)，是一個(gè)數(shù)組，每個(gè)數(shù)組元素是一條曲線的data項(xiàng)參數(shù))：

? [ series1, series2, ... ]

A series can either be raw data or an object with properties. The raw
data format is an array of points:

數(shù)列可以是原始數(shù)據(jù)，也可以是數(shù)據(jù)對(duì)象，原始數(shù)據(jù)格式是由一組表示數(shù)據(jù)點(diǎn)的坐標(biāo)值的數(shù)組構(gòu)成：

? [ [x1, y1], [x2, y2], ... ]

E.g.

? [ [1, 3], [2, 14.01], [3.5, 3.14] ]

Note that to simplify the internal logic in Flot both the x and y
values must be numbers (even if specifying time series, see below for
how to do this). This is a common problem because you might retrieve
data from the database and serialize them directly to JSON without
noticing the wrong type. If you're getting mysterious errors, double
check that you're inputting numbers and not strings.

請(qǐng)注意，flot的縱橫坐標(biāo)值都必須是數(shù)字(即使用時(shí)間數(shù)列也是，后面會(huì)介紹到)，
這是個(gè)很常見的錯(cuò)誤，因?yàn)槟愫芸赡軓臄?shù)據(jù)庫(kù)獲取數(shù)據(jù)后沒(méi)有檢查數(shù)據(jù)類型就直接轉(zhuǎn)化成json對(duì)象使用。
如果你覺(jué)得遇到了莫名其妙的錯(cuò)誤，請(qǐng)確認(rèn)一下你輸入的是數(shù)字而不是字符串。

If a null is specified as a point or if one of the coordinates is null
or couldn't be converted to a number, the point is ignored when
drawing. As a special case, a null value for lines is interpreted as a
line segment end, i.e. the points before and after the null value are
not connected.

如果坐標(biāo)為值為空 ,或者其中的一個(gè)坐標(biāo)值為空，或者不是數(shù)字，或者說(shuō)不能轉(zhuǎn)換為數(shù)字，那么這個(gè)節(jié)點(diǎn)將被忽略，
并且該節(jié)點(diǎn)前后的2個(gè)節(jié)點(diǎn)之間不會(huì)使用直線來(lái)連接。

Lines and points take two coordinates. For bars, you can specify a
third coordinate which is the bottom of the bar (defaults to 0).

折線圖和散點(diǎn)圖每個(gè)節(jié)點(diǎn)有2個(gè)參數(shù)，直方圖則有3個(gè)參數(shù)，第三個(gè)參數(shù)來(lái)指定直方圖的底部位置(缺省值是0)。

The format of a single series object is as follows:

單個(gè)圖表對(duì)象的數(shù)據(jù)格式參數(shù)如下所示：

? {
??? color: color or number?? //顏色
??? data: rawdata? //數(shù)據(jù)
??? label: string? //曲線名稱
??? lines: specific lines options? //折線圖坐標(biāo)參數(shù)
??? bars: specific bars options?? //直方圖坐標(biāo)參數(shù)
??? points: specific points options? //散點(diǎn)圖坐標(biāo)參數(shù)
??? xaxis: 1 or 2? //使用哪一條X軸，如果某條數(shù)軸沒(méi)有被任何一條曲線使用，該數(shù)軸不會(huì)在圖表上出現(xiàn)
??? yaxis: 1 or 2? //使用哪一條Y軸
??? clickable: boolean? //允許監(jiān)聽鼠標(biāo)點(diǎn)擊事件
??? hoverable: boolean? //允許監(jiān)聽鼠標(biāo)懸停事件
??? shadowSize: number //曲線陰影
? }

You don't have to specify any of them except the data, the rest are
options that will get default values. Typically you'd only specify
label and data, like this:

一般情況下你無(wú)須設(shè)置每一個(gè)參數(shù)，你只需要設(shè)置其中幾個(gè)特定的參數(shù)即可，其他參數(shù)會(huì)使用默認(rèn)值。例如：
? {
??? label: "y = 3",
??? data: [[0, 3], [10, 3]]
? }

The label is used for the legend, if you don't specify one, the series
will not show up in the legend.

label用于指定曲線名稱，如果沒(méi)有設(shè)置label的值，圖表標(biāo)題區(qū)域不會(huì)出現(xiàn)。

If you don't specify color, the series will get a color from the
auto-generated colors. The color is either a CSS color specification
(like "rgb(255, 100, 123)") or an integer that specifies which of
auto-generated colors to select, e.g. 0 will get color no. 0, etc.

如果沒(méi)有設(shè)置曲線顏色，程序會(huì)自動(dòng)采用默認(rèn)顏色(options項(xiàng)里的colors數(shù)列)。顏色值可以是CSS顏色格式(RGB格式、16進(jìn)制顏色、WEB通用顏色名)，
還可以是數(shù)字編號(hào)，數(shù)字編號(hào)表示顏色數(shù)列里面顏色的編號(hào)。

The latter is mostly useful if you let the user add and remove series,
in which case you can hard-code the color index to prevent the colors
from jumping around between the series.

如果你允許用戶重置或刪除曲線，后者會(huì)比較有用，你可以在代碼里面設(shè)置曲線使用的默認(rèn)顏色的序號(hào)防止相同顏色在不用曲線間重復(fù)出現(xiàn)。

The "xaxis" and "yaxis" options specify which axis to use, specify 2
to get the secondary axis (x axis at top or y axis to the right).
E.g., you can use this to make a dual axis plot by specifying
{ yaxis: 2 } for one data series.

xaxis" 和 "yaxis" 設(shè)置曲線使用的數(shù)軸(第二條X軸是頂部橫軸，第二條Y軸是右邊的縱軸)，你可以使用這個(gè)屬性制作雙數(shù)軸曲線

"clickable" and "hoverable" can be set to false to disable
interactivity for specific series if interactivity is turned on in
the plot, see below.

"clickable" 和 "hoverable"用于關(guān)閉該曲線的鼠標(biāo)點(diǎn)擊效果或鼠標(biāo)懸停效果，具體說(shuō)明看后面。
(options中的"clickable" 或 "hoverable"設(shè)置為true時(shí)可以在某條曲線的data里設(shè)置"clickable" 或 "hoverable"為false，但options中設(shè)置為false時(shí)，不能在這里設(shè)置為true)

The rest of the options are all documented below as they are the same
as the default options passed in via the options parameter in the plot
commmand. When you specify them for a specific data series, they will
override the default options for the plot for that data series.

其他參數(shù)在后面介紹，他們與plot函數(shù)的"options"參數(shù)的設(shè)置項(xiàng)是一樣的，
如果你為某條曲線在data里面設(shè)置了這些參數(shù)的值，他們會(huì)覆蓋掉options的默認(rèn)值。

Here's a complete example of a simple data specification:

下面是一個(gè)簡(jiǎn)單例子，設(shè)置了2條曲線的參數(shù)：

? [ { label: "Foo", data: [ [10, 1], [17, -14], [30, 5] ] },
??? { label: "Bar", data: [ [11, 13], [19, 11], [30, -7] ] } ]

Plot Options
plot的options參數(shù)
------------

All options are completely optional. They are documented individually
below, to change them you just specify them in an object, e.g.

options的所有選項(xiàng)都是可選的，他們都有默認(rèn)值，后面會(huì)逐條對(duì)他們進(jìn)行講解，如果要修改這些選項(xiàng)的默認(rèn)值你只需要明確指定他們的值即可，例如：

? var options = {
??? series: {
????? lines: { show: true },
????? points: { show: true }
??? }
? };

? $.plot(placeholder, data, options);

Customizing the legend
legend：定制曲線圖表標(biāo)題
======================

? 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
? }

The legend is generated as a table with the data series labels and
small label boxes with the color of the series. If you want to format
the labels in some way, e.g. make them to links, you can pass in a
function for "labelFormatter". Here's an example that makes them
clickable:

legend 用于生成圖表標(biāo)題，圖表標(biāo)題以表格的方式顯示在曲線圖上，內(nèi)容包括每條曲線的名稱及其對(duì)應(yīng)顏色，
如果你想定制圖表標(biāo)題的格式，比如做成超鏈接，你可以在"labelFormatter"項(xiàng)使用函數(shù)來(lái)定制，下面的例子把圖表標(biāo)題做成鏈接

? labelFormatter: function(label, series) {
??? // series is the series object for the label? //series是名稱為label的曲線的數(shù)據(jù)對(duì)象
??? return '<a href="#' + label + '">' + label + '</a>';
? }

"noColumns" is the number of columns to divide the legend table into.

"noColumns" 用于設(shè)置legend表格的列數(shù)

"position" specifies the overall placement of the legend within the
plot (top-right, top-left, etc.) and margin the distance to the plot
edge (this can be either a number or an array of two numbers like [x,
y]). "backgroundColor" and "backgroundOpacity" specifies the
background. The default is a partly transparent auto-detected
background.

position：用于指定legend在曲線圖內(nèi)的位置，"ne"東北角，"se"東南 , "nw"西北 , "sw"西南
margin：設(shè)置legend與曲線圖邊框的距離,可以是x y軸偏移量的數(shù)值對(duì)[x,y]也可以是單個(gè)數(shù)字，單個(gè)數(shù)字值表示相對(duì)x,y軸的偏移量使用相同的值
采用哪條X軸和Y軸作為參照物取決于position的值
backgroundColor：設(shè)置legend的背景顏色
backgroundOpacity：設(shè)置legend背景的透明度

If you want the legend to appear somewhere else in the DOM, you can
specify "container" as a jQuery object/expression to put the legend
table into. The "position" and "margin" etc. options will then be
ignored. Note that Flot will overwrite the contents of the container.

如果你想把legend放在其他DOM元素內(nèi)，可以為container設(shè)定一個(gè)值，
container的值可以是jQuery對(duì)象或表達(dá)式，例如：container: $("#showChartLegend")，把標(biāo)題顯示在id為showChartLegend的div或其他容器類標(biāo)簽內(nèi)，
container為legend指定容器后，"position" 和 "margin" 等與圖表相關(guān)的位置屬性會(huì)被忽略，
另外請(qǐng)注意，container指定的容器內(nèi)容會(huì)被覆蓋掉。

Customizing the axes
數(shù)軸定制
====================

? xaxis, yaxis, x2axis, y2axis: {
??? mode: null or "time"? //數(shù)軸是否為時(shí)間模式
??? min: null or number? //數(shù)軸最小值
??? max: null or number? //數(shù)軸最大值
??? autoscaleMargin: null or number? //按百分比為數(shù)軸延長(zhǎng)一小段來(lái)縮放曲線以避免曲線最遠(yuǎn)的數(shù)據(jù)點(diǎn)出現(xiàn)在圖表邊框上
???????????????????????????????????? //延長(zhǎng)的距離為單位刻度的整數(shù)倍，且剛好不小于(max-min)*number，其中min端增加1個(gè)刻度單位的長(zhǎng)度,當(dāng)對(duì)應(yīng)數(shù)軸的min和max值至少一個(gè)為null時(shí)才生效
???????????????????????????????????? //其中一個(gè)特例是，如果數(shù)據(jù)點(diǎn)的最小值為0，則min端不增長(zhǎng)數(shù)軸，數(shù)據(jù)點(diǎn)會(huì)出現(xiàn)的邊框上
???????????????????????????????????? //對(duì)X軸，該值默認(rèn)為null，對(duì)Y軸，該值默認(rèn)為0.02
???
??? labelWidth: null or number
??? labelHeight: 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
? }

All axes have the same kind of options. The "mode" option
determines how the data is interpreted, the default of null means as
decimal numbers. Use "time" for time series data, see the next section.

所有數(shù)軸都有相同的參數(shù)設(shè)置，mode為null表示數(shù)軸十進(jìn)制，為time設(shè)置為時(shí)間軸

The options "min"/"max" are the precise minimum/maximum value on the
scale. If you don't specify either of them, a value will automatically
be chosen based on the minimum/maximum data values.

"min"/"max" 設(shè)置數(shù)軸最大值和最小值，如果沒(méi)有明確指定他們，將自動(dòng)使用數(shù)據(jù)中的最小值和最大值

The "autoscaleMargin" is a bit esoteric: it's the fraction of margin
that the scaling algorithm will add to avoid that the outermost points
ends up on the grid border. Note that this margin is only applied
when a min or max value is not explicitly set. If a margin is
specified, the plot will furthermore extend the axis end-point to the
nearest whole tick. The default value is "null" for the x axis and
0.02 for the y axis which seems appropriate for most cases.

"autoscaleMargin"的解釋見上文

"labelWidth" and "labelHeight" specifies a fixed size of the tick
labels in pixels. They're useful in case you need to align several
plots.

"labelWidth" 和 "labelHeight" 用于設(shè)置數(shù)軸刻度標(biāo)簽的高寬，這個(gè)屬性在你需要排列整齊幾個(gè)圖表的時(shí)候會(huì)派上用場(chǎng)。

"transform" and "inverseTransform" are callbacks you can put in to
change the way the data is drawn. You can design a function to
compress or expand certain parts of the axis non-linearly, e.g.
suppress weekends or compress far away points with a logarithm or some
other means. When Flot draws the plot, each value is first put through
the transform function. Here's an example, the x axis can be turned
into a natural logarithm axis with the following code:

"transform" and "inverseTransform" 是回調(diào)函數(shù)，用于改變數(shù)軸上的數(shù)據(jù)顯示方式，
你可以設(shè)計(jì)一個(gè)函數(shù)來(lái)非線性地?cái)U(kuò)展或壓縮數(shù)軸上的特定數(shù)據(jù)段

? xaxis: {
??? transform: function (v) { return Math.log(v); },
??? inverseTransform: function (v) { return Math.exp(v); }
? }

Note that for finding extrema, Flot assumes that the transform
function does not reorder values (monotonicity is assumed).
需要注意的是，flot假定transform函數(shù)不會(huì)修改數(shù)據(jù)點(diǎn)的排列順序

The inverseTransform is simply the inverse of the transform function
(so v == inverseTransform(transform(v)) for all relevant v). It is
required for converting from canvas coordinates to data coordinates,
e.g. for a mouse interaction where a certain pixel is clicked. If you
don't use any interactive features of Flot, you may not need it.

inverseTransform 函數(shù)是對(duì)transform的逆運(yùn)算，因此有：v == inverseTransform(transform(v)
當(dāng)需要把坐標(biāo)數(shù)據(jù)轉(zhuǎn)換回?cái)?shù)值數(shù)據(jù)時(shí)就會(huì)用到這個(gè)函數(shù)，這常在圖表的動(dòng)態(tài)交互時(shí)發(fā)生，比如鼠標(biāo)在
圖標(biāo)上面點(diǎn)擊并獲取該點(diǎn)數(shù)據(jù)，但是如果你不做任何動(dòng)態(tài)的交互，你可能不會(huì)用到這個(gè)函數(shù)。

The rest of the options deal with the ticks.
其他與刻度的網(wǎng)格線有關(guān)的參數(shù)。

If you don't specify any ticks, a tick generator algorithm will make
some for you. The algorithm has two passes. It first estimates how
many ticks would be reasonable and uses this number to compute a nice
round tick interval size. Then it generates the ticks.

如果你沒(méi)有明確地設(shè)置刻度間隔，程序會(huì)自動(dòng)設(shè)置，設(shè)置過(guò)程分為2步，
首先估計(jì)數(shù)軸刻度間隔所需數(shù)目，其次根據(jù)這個(gè)數(shù)目通過(guò)四舍五入方法估算合適的步長(zhǎng)，最后生成刻度

You can specify how many ticks the algorithm aims for by setting
"ticks" to a number. The algorithm always tries to generate reasonably
round tick values so even if you ask for three ticks, you might get
five if that fits better with the rounding. If you don't want any
ticks at all, set "ticks" to 0 or an empty array.

通過(guò)設(shè)置"ticks" 的值為數(shù)字，你可以設(shè)置圖表產(chǎn)生刻度間隔的個(gè)數(shù)，但是程序盡量會(huì)設(shè)置最合適的刻度
個(gè)數(shù)，因此，盡管你設(shè)置了3個(gè)刻度數(shù)，卻可能得到5個(gè)，如果你不需要自己設(shè)置刻度，把"ticks"的值設(shè)置為0或一個(gè)空數(shù)組

Another option is to skip the rounding part and directly set the tick
interval size with "tickSize". If you set it to 2, you'll get ticks at
2, 4, 6, etc. Alternatively, you can specify that you just don't want
ticks at a size less than a specific tick size with "minTickSize".
Note that for time series, the format is an array like [2, "month"],
see the next section.

"tickSize"直接跳過(guò)估算步驟設(shè)置刻度間隔步長(zhǎng)，如果你設(shè)置該值為2，生成的刻度將會(huì)是形如2，4，6
"minTickSize"可以設(shè)置刻度間隔的最小值，

If you want to completely override the tick algorithm, you can specify
an array for "ticks", either like this:

如果你想完全的自定義刻度，可以設(shè)置參數(shù)"ticks"的值為一個(gè)數(shù)組，賦值方法如下例：

? ticks: [0, 1.2, 2.4]

Or like this where the labels are also customized:
或者像下面的例子，連刻度的標(biāo)簽也自定義：

? ticks: [[0, "zero"], [1.2, "one mark"], [2.4, "two marks"]]

You can mix the two if you like.
這兩種方法可以混合使用

?
For extra flexibility you can specify a function as the "ticks"
parameter. The function will be called with an object with the axis
min and max and should return a ticks array. Here's a simplistic tick
generator that spits out intervals of pi, suitable for use on the x
axis for trigonometric functions:

刻度可以用函數(shù)來(lái)生成，方法是把一個(gè)函數(shù)賦給"ticks"，該函數(shù)應(yīng)該以一個(gè)具有最大刻度值及最小刻度值的數(shù)軸對(duì)象為參數(shù)，
該函數(shù)返回一個(gè)刻度數(shù)組賦給"ticks"。
下例是一個(gè)簡(jiǎn)單的刻度生成器，例子以pi值為刻度間隔大小，這對(duì)三角函數(shù)曲線非常適用。

? function piTickGenerator(axis) {
??? var res = [], i = Math.floor(axis.min / Math.PI);
??? do {
????? var v = i * Math.PI;
????? res.push([v, i + "\u03c0"]);
????? ++i;
??? } while (v < axis.max);
???
??? return res;
? }

You can control how the ticks look like with "tickDecimals", the
number of decimals to display (default is auto-detected).

"tickDecimals" 用于設(shè)置刻度的小數(shù)位數(shù)，默認(rèn)情況下程序會(huì)自動(dòng)判斷截取

Alternatively, for ultimate control over how ticks look like you can
provide a function to "tickFormatter". The function is passed two
parameters, the tick value and an "axis" object with information, and
should return a string. The default formatter looks like this:

"tickFormatter"可以通過(guò)函數(shù)來(lái)設(shè)置刻度顯示格式，格式函數(shù)有2個(gè)參數(shù)，刻度值及數(shù)軸對(duì)象。函數(shù)應(yīng)該返回一個(gè)字符串賦給tickFormatter。
"tickFormatter"格式函數(shù)基本格式如下：

? function formatter(val, axis) {
??? return val.toFixed(axis.tickDecimals);
? }

The axis object has "min" and "max" with the range of the axis,
"tickDecimals" with the number of decimals to round the value to and
"tickSize" with the size of the interval between ticks as calculated
by the automatic axis scaling algorithm (or specified by you). Here's
an example of a custom formatter:

數(shù)軸對(duì)象可以獲取數(shù)軸數(shù)據(jù)的最大值和最小值，tickDecimals可以獲取刻度標(biāo)簽的小數(shù)位數(shù)，
tickSize可以獲取刻度間隔長(zhǎng)度(程序算法自動(dòng)計(jì)算出或自定義)。

? function suffixFormatter(val, axis) {
??? if (val > 1000000)
????? return (val / 1000000).toFixed(axis.tickDecimals) + " MB";? // toFixed() 函數(shù)，把數(shù)值四舍五入為指定小數(shù)位數(shù)
??? else if (val > 1000)
????? return (val / 1000).toFixed(axis.tickDecimals) + " kB";
??? else
????? return val.toFixed(axis.tickDecimals) + " B";
? }

Time series data
時(shí)間數(shù)軸
================

Time series are a bit more difficult than scalar data because
calendars don't follow a simple base 10 system. For many cases, Flot
abstracts most of this away, but it can still be a bit difficult to
get the data into Flot. So we'll first discuss the data format.

時(shí)間數(shù)軸比標(biāo)量數(shù)軸要難一點(diǎn)，因?yàn)闀r(shí)間數(shù)軸并不遵循10進(jìn)制。下面討論時(shí)間數(shù)軸的數(shù)據(jù)格式

The time series support in Flot is based on Javascript timestamps,
i.e. everywhere a time value is expected or handed over, a Javascript
timestamp number is used. This is a number, not a Date object. A
Javascript timestamp is the number of milliseconds since January 1,
1970 00:00:00 UTC. This is almost the same as Unix timestamps, except it's
in milliseconds, so remember to multiply by 1000!

flot對(duì)時(shí)間軸的支持是基于javascript的時(shí)間戳的，也就是說(shuō)每個(gè)已經(jīng)過(guò)去的或未來(lái)的時(shí)間都對(duì)應(yīng)一個(gè)時(shí)間戳。
時(shí)間戳是一個(gè)數(shù)字，不是時(shí)間對(duì)象。
javascript時(shí)間戳精確到毫秒，起始時(shí)間從通用協(xié)調(diào)時(shí)間(UTC)的1970年1月1日零時(shí)零分零秒開始，這幾乎跟unix時(shí)間戳一致，不同的是
javascript時(shí)間戳是以毫秒來(lái)計(jì)算的，因此如果使用unix時(shí)間戳的話不要忘記乘以1000.

You can see a timestamp like this
通過(guò)下面的例子可以查看一個(gè)時(shí)間的時(shí)間戳：

? alert((new Date()).getTime())

Normally you want the timestamps to be displayed according to a
certain time zone, usually the time zone in which the data has been
produced. However, Flot always displays timestamps according to UTC.
It has to as the only alternative with core Javascript is to interpret
the timestamps according to the time zone that the visitor is in,
which means that the ticks will shift unpredictably with the time zone
and daylight savings of each visitor.

你可能希望時(shí)間戳根據(jù)某一時(shí)區(qū)(通常是產(chǎn)生數(shù)據(jù)的時(shí)區(qū))來(lái)顯示，但是，flot總是根據(jù)UTC時(shí)區(qū)來(lái)顯示時(shí)間戳，
因此你只能在javascript代碼里設(shè)置根據(jù)用戶本地時(shí)區(qū)來(lái)解釋時(shí)間戳，這意味著UTC時(shí)間戳按不同時(shí)區(qū)轉(zhuǎn)換之后處于不同時(shí)區(qū)的用戶看到的時(shí)間將不一樣

So given that there's no good support for custom time zones in
Javascript, you'll have to take care of this server-side.

如果客戶端的javascript對(duì)時(shí)區(qū)的支持不是很好的話，就要在服務(wù)器端小心的處理好數(shù)據(jù)了

The easiest way to think about it is to pretend that the data
production time zone is UTC, even if it isn't. So if you have a
datapoint at 2002-02-20 08:00, you can generate a timestamp for eight
o'clock UTC even if it really happened eight o'clock UTC+0200.

最簡(jiǎn)單的方法是，不管數(shù)據(jù)產(chǎn)生地的時(shí)區(qū)是哪里，都假定為UTC，也就是說(shuō)，如果有一個(gè)數(shù)據(jù)點(diǎn)
在2002-02-20 08:00產(chǎn)生，就算是在UTC+0200 時(shí)區(qū)8時(shí)產(chǎn)生的，你也要按UTC時(shí)區(qū)8時(shí)產(chǎn)生時(shí)間戳。
(做數(shù)據(jù)文件里保存UTC時(shí)間戳，實(shí)際在客戶端顯示時(shí)通過(guò)程序指定時(shí)區(qū)--通常是數(shù)據(jù)產(chǎn)生地所在時(shí)區(qū)--進(jìn)行轉(zhuǎn)換)

In PHP you can get an appropriate timestamp with
'strtotime("2002-02-20 UTC") * 1000', in Python with
'calendar.timegm(datetime_object.timetuple()) * 1000', in .NET with
something like:

下面服務(wù)器端生成恰當(dāng)?shù)臅r(shí)間戳方法：
在PHP程序中? strtotime("2002-02-20 UTC") * 1000
Python中? calendar.timegm(datetime_object.timetuple()) * 1000
在 .net中代碼如下：

? public static int GetJavascriptTimestamp(System.DateTime input)
? {
??? System.TimeSpan span = new System.TimeSpan(System.DateTime.Parse("1/1/1970").Ticks);
??? System.DateTime time = input.Subtract(span);
??? return (long)(time.Ticks / 10000);
? }

Javascript also has some support for parsing date strings, so it is
possible to generate the timestamps manually client-side.

javascript 也有一些對(duì)時(shí)間字符串進(jìn)行解析的支持，因此在客戶端生成時(shí)間戳也是可能的。

If you've already got the real UTC timestamp, it's too late to use the
pretend trick described above. But you can fix up the timestamps by
adding the time zone offset, e.g. for UTC+0200 you would add 2 hours
to the UTC timestamp you got. Then it'll look right on the plot. Most
programming environments have some means of getting the timezone
offset for a specific date (note that you need to get the offset for
each individual timestamp to account for daylight savings).

如果你得到的時(shí)間數(shù)據(jù)已經(jīng)是數(shù)據(jù)產(chǎn)生時(shí)對(duì)應(yīng)時(shí)區(qū)的時(shí)間戳，使用上面的方法已經(jīng)來(lái)不及了，
不過(guò)你可以通過(guò)增加時(shí)區(qū)偏移的方法修改時(shí)間戳。例如，你得到一個(gè)UTC+0200時(shí)區(qū)(比UTC時(shí)區(qū)快2小時(shí))
的時(shí)間戳，那么你需要在這個(gè)時(shí)間戳上減去2小時(shí)(或者說(shuō)加上UTC時(shí)間對(duì)本地區(qū)時(shí)間的時(shí)差-2小時(shí))，這樣在圖表上看起來(lái)時(shí)間就正確了，
很多編程環(huán)境都有專門用于計(jì)算時(shí)差的方法，需要注意的是，你需要為每個(gè)時(shí)間戳計(jì)算時(shí)差來(lái)解釋日光節(jié)約時(shí)間(歐美在夏天天亮較早的季節(jié)使用的一個(gè)時(shí)間計(jì)算法，
人為地把時(shí)間撥快一小時(shí)，促使人早起早睡，節(jié)約用電)

Once you've gotten the timestamps into the data and specified "time"
as the axis mode, Flot will automatically generate relevant ticks and
format them. As always, you can tweak the ticks via the "ticks" option
- just remember that the values should be timestamps (numbers), not
Date objects.

一旦你在數(shù)據(jù)里面使用時(shí)間戳并把數(shù)軸設(shè)置為時(shí)間模式，flot會(huì)自動(dòng)格式化并生成時(shí)間數(shù)軸刻度。
你也可以通過(guò)"ticks"參數(shù)來(lái)自定義時(shí)間刻度，但是要注意的是，對(duì)應(yīng)的參數(shù)值應(yīng)該是時(shí)間戳數(shù)字而不是時(shí)間對(duì)象。

Tick generation and formatting can also be controlled separately
through the following axis options:

通過(guò)設(shè)置下面的數(shù)軸參數(shù)可以個(gè)別的控制時(shí)間軸刻度生成的格式：

? minTickSize: array
? timeformat: null or format string //null 或格式化字符串
? monthNames: null or array of size 12 of strings //null或一個(gè)長(zhǎng)度為12的字符串?dāng)?shù)組
? twelveHourClock: boolean?? //12時(shí)模式

Here "timeformat" is a format string to use. You might use it like this:

timeformat的用法如下例：

? xaxis: {
??? mode: "time"
??? timeformat: "%y/%m/%d"
? }
?
This will result in tick labels like "2000/12/24". The following
specifiers are supported

這個(gè)例子產(chǎn)生的時(shí)間抽刻度標(biāo)簽形如"2000/12/24" ，下面是flot支持的時(shí)間格式化字符串：

? %h: hours
? %H: hours (left-padded with a zero)
? %M: minutes (left-padded with a zero)
? %S: seconds (left-padded with a zero)
? %d: day of month (1-31)
? %m: month (1-12)
? %y: year (four digits)
? %b: month name (customizable)
? %p: am/pm, additionally switches %h/%H to 12 hour instead of 24
? %P: AM/PM (uppercase version of %p)

You can customize the month names with the "monthNames" option. For
instance, for Danish you might specify:

"monthNames" 參數(shù)自定義月份名稱的方法如下：

? monthNames: ["jan", "feb", "mar", "apr", "maj", "jun", "jul", "aug", "sep", "okt", "nov", "dec"]

If you set "twelveHourClock" to true, the autogenerated timestamps
will use 12 hour AM/PM timestamps instead of 24 hour.
?
"twelveHourClock"設(shè)置為true，將使用12時(shí)AM/PM 格式的時(shí)間戳來(lái)替代24時(shí)時(shí)間戳。

The format string and month names are used by a very simple built-in
format function that takes a date object, a format string (and
optionally an array of month names) and returns the formatted string.
If needed, you can access it as $.plot.formatDate(date, formatstring,
monthNames) or even replace it with another more advanced function
from a date library if you're feeling adventurous.

格式化字符串和月份名稱經(jīng)常用在格式化函數(shù)中，該函數(shù)可能使用時(shí)間對(duì)象，格式化字符串，月份名稱數(shù)組作為參數(shù)，
返回格式化了的字符串，如果需要，你可以使用flot提供的方法 $.plot.formatDate(date, formatstring,monthNames)
也可以自定義函數(shù)來(lái)替換該方法。

If everything else fails, you can control the formatting by specifying
a custom tick formatter function as usual. Here's a simple example
which will format December 24 as 24/12:

如果以上方法格式化不能達(dá)到你的要求，你可以定義一個(gè)函數(shù)來(lái)格式化并自定義刻度標(biāo)簽。

? tickFormatter: function (val, axis) {
??? var d = new Date(val);
??? return d.getUTCDate() + "/" + (d.getUTCMonth() + 1);
? }

Note that for the time mode "tickSize" and "minTickSize" are a bit
special in that they are arrays on the form "[value, unit]" where unit
is one of "second", "minute", "hour", "day", "month" and "year". So
you can specify

請(qǐng)注意，時(shí)間軸的"tickSize" 和 "minTickSize"是一個(gè)數(shù)組，數(shù)組形如 [數(shù)值，單位]，
單位可以是 "second", "minute", "hour", "day", "month" and "year" ，因此你可以這樣設(shè)置最小刻度為一個(gè)月：

? minTickSize: [1, "month"]

to get a tick interval size of at least 1 month and correspondingly,
if axis.tickSize is [2, "day"] in the tick formatter, the ticks have
been produced with two days in-between.

類似地，axis.tickSize設(shè)置為[2, "day"]，則時(shí)間軸最小刻度為2天。

Customizing the data series
數(shù)據(jù)顯示定制
===========================

? series: {
??? lines, points, bars: {
????? show: boolean
????? lineWidth: number
????? fill: boolean or number
????? fillColor: null or color/gradient
??? }

??? points: {
????? radius: number
??? }

??? bars: {
????? barWidth: number
????? align: "left" or "center"
????? horizontal: boolean
??? }

??? lines: {
????? steps: boolean
??? }

??? shadowSize: number
? }
?
? colors: [ color1, color2, ... ]

The options inside "series: {}" are copied to each of the series. So
you can specify that all series should have bars by putting it in the
global options, or override it for individual series by specifying
bars in a particular the series object in the array of data.

"series: {}" 內(nèi)的參數(shù)將對(duì)每一個(gè)數(shù)據(jù)序列生效，可以用來(lái)為圖表設(shè)置全局參數(shù)，
如果需要為特定數(shù)據(jù)序列的圖表設(shè)置不同屬性，可以在對(duì)應(yīng)的數(shù)據(jù)序列對(duì)象里面設(shè)置相應(yīng)的參數(shù)把全局參數(shù)覆蓋掉。
?
The most important options are "lines", "points" and "bars" that
specify whether and how lines, points and bars should be shown for
each data series. In case you don't specify anything at all, Flot will
default to showing lines (you can turn this off with
lines: { show: false}). You can specify the various types
independently of each other, and Flot will happily draw each of them
in turn (this is probably only useful for lines and points), e.g.

?"lines", "points" 和 "bars"是最重要的參數(shù)，這些參數(shù)設(shè)置每條數(shù)據(jù)序列的圖表的折線圖、散點(diǎn)圖、直方圖是否顯示和如何顯示。
如果沒(méi)有專門設(shè)置這三個(gè)參數(shù)中的任何一個(gè)，默認(rèn)情況下將顯示折線圖，關(guān)閉折線圖的方法是lines: { show: false}
你可以分別設(shè)置這三種顯示方式，flot會(huì)一次把它們?nèi)匡@示出來(lái)(通常情況下折線圖和散點(diǎn)圖同時(shí)顯示比較有意義)，如下例：

? var options = {
??? series: {
????? lines: { show: true, fill: true, fillColor: "rgba(255, 255, 255, 0.8)" },
????? points: { show: true, fill: false }
??? }
? };

"lineWidth" is the thickness of the line or outline in pixels. You can
set it to 0 to prevent a line or outline from being drawn; this will
also hide the shadow.

"lineWidth"用于設(shè)置折線圖線條的粗細(xì)或其他圖型的邊框，你可以把這個(gè)值設(shè)置成0來(lái)關(guān)閉折線圖的輸出
或關(guān)閉其他圖形的邊框及陰影效果(例如散點(diǎn)圖的鼠標(biāo)點(diǎn)擊效果及直方圖的邊框效果)

"fill" is whether the shape should be filled. For lines, this produces
area graphs. You can use "fillColor" to specify the color of the fill.
If "fillColor" evaluates to false (default for everything except
points which are filled with white), the fill color is auto-set to the
color of the data series. You can adjust the opacity of the fill by
setting fill to a number between 0 (fully transparent) and 1 (fully
opaque).

"fill" 用于設(shè)置圖表填充的透明度(0-1)，對(duì)于折線，填充范圍是折線與數(shù)軸圍成的區(qū)域
"fillColor" 設(shè)置填充顏色，如果填null,將使用線條顏色一致的顏色，如果顏色名解析失敗將使用默認(rèn)顏色(折線圖直方圖黑色，散點(diǎn)圖白色)

For bars, fillColor can be a gradient, see the gradient documentation
below. "barWidth" is the width of the bars in units of the x axis (or
the y axis if "horizontal" is true), contrary to most other measures
that are specified in pixels. For instance, for time series the unit
is milliseconds so 24 * 60 * 60 * 1000 produces bars with the width of
a day. "align" specifies whether a bar should be left-aligned
(default) or centered on top of the value it represents. When
"horizontal" is on, the bars are drawn horizontally, i.e. from the y
axis instead of the x axis; note that the bar end points are still
defined in the same way so you'll probably want to swap the
coordinates if you've been plotting vertical bars first.

直方圖的填充顏色可以是漸變的，關(guān)于漸變的說(shuō)明在后面會(huì)提及。
"barWidth" 用于設(shè)置直方圖的寬度，單位是數(shù)軸的單位而非像素。
例如，時(shí)間軸的單位是毫秒，因此，barWidth的值設(shè)置為24 * 60 * 60 * 1000 表示直方圖的寬度是一天時(shí)間的在時(shí)間軸上的長(zhǎng)度。
"align" 用于設(shè)置數(shù)據(jù)點(diǎn)對(duì)應(yīng)刻度線與直方圖之間的對(duì)齊關(guān)系，默認(rèn)情況下，刻度線在直方圖的左側(cè)(left,靠近數(shù)軸最小值一側(cè))，
如果設(shè)置為center，刻度線在直方圖中間。

For lines, "steps" specifies whether two adjacent data points are
connected with a straight (possibly diagonal) line or with first a
horizontal and then a vertical line. Note that this transforms the
data by adding extra points.

對(duì)于折線圖，"steps"可以設(shè)置是否使用階梯狀折線，設(shè)置為true采用階梯狀折線，相鄰2個(gè)數(shù)據(jù)點(diǎn)之間先以水平線連接，
后然用垂直線連接，需要注意的是，這種模式會(huì)在同一垂直線上增加數(shù)據(jù)點(diǎn)來(lái)實(shí)現(xiàn)。

"shadowSize" is the default size of shadows in pixels. Set it to 0 to
remove shadows.

"shadowSize" 可以設(shè)置曲線陰影大小，設(shè)置為0關(guān)閉陰影效果。

The "colors" array specifies a default color theme to get colors for
the data series from. You can specify as many colors as you like, like
this:

"colors"可以預(yù)定義一系列顏色保存在數(shù)組里供曲線使用，你可以設(shè)置任意多種顏色。

? colors: ["#d18b2c", "#dba255", "#919733"]

If there are more data series than colors, Flot will try to generate
extra colors by lightening and darkening colors in the theme.

如果曲線的數(shù)目比預(yù)定義的顏色數(shù)目多，程序?qū)L試通過(guò)改變顏色的明暗程度來(lái)生成其他顏色賦給曲線。

Customizing the grid
背景柵格定制
====================

? grid: {
??? show: boolean
??? aboveData: boolean
??? color: color
??? backgroundColor: color/gradient or null
??? tickColor: color
??? labelMargin: number
??? markings: array of markings or (fn: axes -> array of markings)
??? borderWidth: number
??? borderColor: color or null
??? clickable: boolean
??? hoverable: boolean
??? autoHighlight: boolean
??? mouseActiveRadius: number
? }

The grid is the thing with the axes and a number of ticks. "color" is
the color of the grid itself whereas "backgroundColor" specifies the
background color inside the grid area. The default value of null means
that the background is transparent. You can also set a gradient, see
the gradient documentation below.

grid由數(shù)軸和刻度線構(gòu)成的柵格背景，"color"定義的是grid的顏色，包括刻度值標(biāo)簽的顏色。
但是背景顏色是填充在Grid里面的，因此實(shí)際上只影響邊框和刻度值標(biāo)簽的顏色。
背景顏色"backgroundColor"是填充在grid內(nèi)部的，默認(rèn)情況下背景是透明的，
可以為背景設(shè)置顏色漸變，具體細(xì)節(jié)后面會(huì)提到。

You can turn off the whole grid including tick labels by setting
"show" to false. "aboveData" determines whether the grid is drawn on
above the data or below (below is default).

如果grid的"show"參數(shù)設(shè)置為false，柵格背景包括數(shù)軸及數(shù)軸刻度標(biāo)簽將被隱藏，
"aboveData" 用于設(shè)置柵格放置在數(shù)據(jù)點(diǎn)上面還是下面，默認(rèn)情況false是放在數(shù)據(jù)點(diǎn)下面。
"aboveData"設(shè)置為true且設(shè)置了背景顏色，曲線將被grid的背景顏色遮蓋。

"tickColor" is the color of the ticks and "labelMargin" is the spacing
between tick labels and the grid. Note that you can style the tick
labels with CSS, e.g. to change the color. They have class "tickLabel".
"borderWidth" is the width of the border around the plot. Set it to 0
to disable the border. You can also set "borderColor" if you want the
border to have a different color than the grid lines.

"tickColor"?? 設(shè)置刻度線的顏色
"labelMargin" 設(shè)置刻度值標(biāo)簽與網(wǎng)格的距離，
"borderWidth" 設(shè)置邊框?qū)挾?#xff0c;設(shè)為0則取消邊框
"borderColor" 設(shè)置邊框顏色，
"tickLabel"?? 設(shè)置刻度值標(biāo)簽的CSS樣式，(未實(shí)驗(yàn)，設(shè)置方法不明)

"markings" is used to draw simple lines and rectangular areas in the
background of the plot. You can either specify an array of ranges on
the form { xaxis: { from, to }, yaxis: { from, to } } (secondary axis
coordinates with x2axis/y2axis) or with a function that returns such
an array given the axes for the plot in an object as the first
parameter.

You can set the color of markings by specifying "color" in the ranges
object. Here's an example array:

"markings" 用于在背景上繪畫出一塊矩形，矩形的位置及長(zhǎng)寬通過(guò)縱橫軸的起始終止坐標(biāo)來(lái)確定，
第一橫軸與第一縱軸對(duì)應(yīng)，第二橫軸與第二縱軸對(duì)應(yīng)，color參數(shù)可以設(shè)置畫出區(qū)塊的顏色，
賦值方式是一個(gè)數(shù)組，每個(gè)數(shù)組元素是一個(gè)json數(shù)據(jù)格式，每個(gè)數(shù)組元素繪制一個(gè)區(qū)塊。可以用函數(shù)返回?cái)?shù)組來(lái)賦值。
下面是個(gè)簡(jiǎn)單例子：

? markings: [ { xaxis: { from: 0, to: 2 }, yaxis: { from: 10, to: 10 }, color: "#bb0000" }, ... ]

If you leave out one of the values, that value is assumed to go to the
border of the plot. So for example if you only specify { xaxis: {
from: 0, to: 2 } } it means an area that extends from the top to the
bottom of the plot in the x range 0-2.

A line is drawn if from and to are the same, e.g.

? markings: [ { yaxis: { from: 1, to: 1 } }, ... ]

would draw a line parallel to the x axis at y = 1. You can control the
line width with "lineWidth" in the range object.

如果只設(shè)置一個(gè)數(shù)軸的數(shù)據(jù)范圍，則缺省數(shù)軸的數(shù)據(jù)范圍默認(rèn)為[min,max]，
如果數(shù)軸起止值相等，則畫出一條線，并且可以使用"lineWidth"設(shè)定線段的大小。

An example function might look like this:

? markings: function (axes) {
??? var markings = [];
??? for (var x = Math.floor(axes.xaxis.min); x < axes.xaxis.max; x += 2)
????? markings.push({ xaxis: { from: x, to: x + 1 } });
??? return markings;
? }

If you set "clickable" to true, the plot will listen for click events
on the plot area and fire a "plotclick" event on the placeholder with
a position and a nearby data item object as parameters. The coordinates
are available both in the unit of the axes (not in pixels) and in
global screen coordinates.

"clickable" 設(shè)置為true時(shí)，圖表將監(jiān)聽鼠標(biāo)單擊事件，單擊圖表時(shí)將觸發(fā)"plotclick"事件，
回調(diào)函數(shù)的參數(shù)是鼠標(biāo)坐標(biāo)和數(shù)據(jù)點(diǎn)的坐標(biāo)值，即以像素為單位的位置坐標(biāo)及以數(shù)軸為單位的數(shù)據(jù)坐標(biāo)。
如果鼠標(biāo)點(diǎn)擊位置沒(méi)有數(shù)據(jù)點(diǎn)，則數(shù)據(jù)點(diǎn)的參數(shù)值是null，反之，是一個(gè)json對(duì)象

Likewise, if you set "hoverable" to true, the plot will listen for
mouse move events on the plot area and fire a "plothover" event with
the same parameters as the "plotclick" event. If "autoHighlight" is
true (the default), nearby data items are highlighted automatically.
If needed, you can disable highlighting and control it yourself with
the highlight/unhighlight plot methods described elsewhere.

同樣地，"hoverable" 設(shè)置為true將監(jiān)聽鼠標(biāo)移動(dòng)事件，鼠標(biāo)移動(dòng)到某個(gè)位置時(shí)發(fā)生"plothover"事件，
回調(diào)函數(shù)的參數(shù)與"clickable"一致，
"autoHighlight"的值為true，則發(fā)生"hoverable"事件和"plotclick"事件時(shí)，數(shù)據(jù)點(diǎn)顯示高亮效果，
數(shù)據(jù)點(diǎn)高亮的發(fā)生及消失對(duì)應(yīng)有highlight/unhighlight方法，這在后面會(huì)描述。

You can use "plotclick" and "plothover" events like this:

"plotclick" 和 "plothover" 事件用法如下：

??? $.plot($("#placeholder"), [ d ], { grid: { clickable: true } });

??? $("#placeholder").bind("plotclick", function (event, pos, item) {
??????? alert("You clicked at " + pos.x + ", " + pos.y);?????????????????
??????? // secondary axis coordinates if present are in pos.x2, pos.y2,???????? //pos.x pos.y 數(shù)軸坐標(biāo)值，pos.x2, pos.y2 第二對(duì)數(shù)軸的坐標(biāo)值
??????? // if you need global screen coordinates, they are pos.pageX, pos.pageY //pos.pageX, pos.pageY 屏幕坐標(biāo)值

??????? if (item) {??? //item !=null ,點(diǎn)擊了數(shù)據(jù)點(diǎn)
????????? highlight(item.series, item.datapoint);? // item.datapoint 該數(shù)據(jù)點(diǎn)的縱橫坐標(biāo)值,是一對(duì)以逗號(hào)分割的數(shù)值如： 3.5,2.14 表示該點(diǎn)X軸的值為3.5，Y軸的值為2.14
????????? alert("You clicked a point!");?????????? //注意，item.datapoint的值不一定與 pos.x pos.y的值相等，因?yàn)辄c(diǎn)擊在數(shù)據(jù)點(diǎn)附近，數(shù)據(jù)點(diǎn)也激活了
??????? }
??? });

The item object in this example is either null or a nearby object on the form:

? item: {?? //item參數(shù)的屬性
????? datapoint: the point, e.g. [0, 2]
????? dataIndex: the index of the point in the data array? //該點(diǎn)數(shù)據(jù)在對(duì)應(yīng)數(shù)列數(shù)組里的下標(biāo)
????? series: the series object //曲線對(duì)象
????? seriesIndex: the index of the series? //在多曲線體系中該曲線的下標(biāo)，即第幾條曲線，編號(hào)從0開始
????? pageX, pageY: the global screen coordinates of the point? //該點(diǎn)屏幕坐標(biāo)，單位是像素
? }

For instance, if you have specified the data like this
? 下面是一條曲線的定義，

??? $.plot($("#placeholder"), [ { label: "Foo", data: [[0, 10], [7, 3]] } ], ...);

and the mouse is near the point (7, 3), "datapoint" is [7, 3],
"dataIndex" will be 1, "series" is a normalized series object with
among other things the "Foo" label in series.label and the color in
series.color, and "seriesIndex" is 0. Note that plugins and options
that transform the data can shift the indexes from what you specified
in the original data array.

鼠標(biāo)的(7,3)坐標(biāo)附近觸發(fā)事件時(shí)，"datapoint" 的值是[7,3]，

item.datapoint=="7,3"
item.dataIndex ==1
item.seriesIndex == 0?
item.series 曲線對(duì)象，
item.series.label =="Foo" 曲線名稱
item.series.color 曲線顏色，rgb格式

If you use the above events to update some other information and want
to clear out that info in case the mouse goes away, you'll probably
also need to listen to "mouseout" events on the placeholder div.

如果你在以上事件觸發(fā)時(shí)修改數(shù)據(jù)點(diǎn)的一些值，鼠標(biāo)移開時(shí)想復(fù)原這些值，你很可能就需要在占位符上監(jiān)聽鼠標(biāo)移開事件

"mouseActiveRadius" specifies how far the mouse can be from an item
and still activate it. If there are two or more points within this
radius, Flot chooses the closest item. For bars, the top-most bar
(from the latest specified data series) is chosen.

"mouseActiveRadius" 用來(lái)設(shè)置可以激活數(shù)據(jù)點(diǎn)的鼠標(biāo)與數(shù)據(jù)點(diǎn)之間的距離，如果在符合距離內(nèi)有多個(gè)數(shù)據(jù)點(diǎn)，flot會(huì)激活最近的數(shù)據(jù)點(diǎn)
對(duì)于直方圖，則激活最遲設(shè)置的直方圖。

If you want to disable interactivity for a specific data series, you
can set "hoverable" and "clickable" to false in the options for that
series, like this { data: [...], label: "Foo", clickable: false }.

在某條曲線數(shù)據(jù)本身設(shè)置"hoverable" 和 "clickable" 為false則該曲線不會(huì)觸發(fā)事件
但options內(nèi)設(shè)置為false時(shí)，不能在某條曲線內(nèi)通過(guò)設(shè)置true來(lái)開啟事件監(jiān)聽功能

Specifying gradients
定義變化模式
====================

A gradient is specified like this:
曲線顏色預(yù)定義：

? { colors: [ color1, color2, ... ] }

For instance, you might specify a background on the grid going from
black to gray like this:
圖表柵格背景顏色漸變：

? grid: {
??? backgroundColor: { colors: ["#000", "#999"] }
? }

For the series you can specify the gradient as an object that
specifies the scaling of the brightness and the opacity of the series
color, e.g.

曲線顏色明暗程度及透明度漸變?cè)O(shè)置，包括開始狀態(tài)和結(jié)束狀態(tài)的數(shù)據(jù)(實(shí)驗(yàn)不成功)：

? { colors: [{ opacity: 0.8 }, { brightness: 0.6, opacity: 0.8 } ] }

where the first color simply has its alpha scaled, whereas the second
is also darkened. For instance, for bars the following makes the bars
gradually disappear, without outline:

如下例，第一條直方圖明度正常，但是后面的逐漸變暗，最后消失：

? bars: {
????? show: true,
????? lineWidth: 0,
????? fill: true,
????? fillColor: { colors: [ { opacity: 0.8 }, { opacity: 0.1 } ] }
? }
?
Flot currently only supports vertical gradients drawn from top to
bottom because that's what works with IE.

flot目前只支持從圖表top到bottom的垂直漸變，因?yàn)镮E只能這樣實(shí)現(xiàn)漸變

Plot Methods
方法
------------

The Plot object returned from the plot function has some methods you
can call:

plot函數(shù)返回的對(duì)象有下面一些方法可供調(diào)用：

? - highlight(series, datapoint)? //激活數(shù)據(jù)點(diǎn) series：曲線編號(hào)，datapoint：數(shù)據(jù)點(diǎn)在曲線數(shù)據(jù)序列中的編號(hào)，編號(hào)都是從0開始例如：highlight(1, 1) 激活第二條曲線的第二個(gè)數(shù)據(jù)點(diǎn)
????????????????????????????????? //datapoint 也可以是一個(gè)數(shù)據(jù)點(diǎn)的真實(shí)數(shù)據(jù)對(duì)象，是一個(gè)數(shù)組，例如： highlight(1, [3,6]) 激活第二條曲線上坐標(biāo)為[3,6]的點(diǎn)
????????????????????????????????? //如果指定坐標(biāo)的數(shù)據(jù)點(diǎn)不在該曲線上，仍然以該曲線的顏色顯示要激活的數(shù)據(jù)點(diǎn)

??? Highlight a specific datapoint in the data series. You can either
??? specify the actual objects, e.g. if you got them from a
??? "plotclick" event, or you can specify the indices, e.g.
??? highlight(1, 3) to highlight the fourth point in the second series
??? (remember, zero-based indexing).

?
? - unhighlight(series, datapoint) or unhighlight() //取消數(shù)據(jù)點(diǎn)的激活效果,參數(shù)與highlight相同

??? Remove the highlighting of the point, same parameters as
??? highlight.

??? If you call unhighlight with no parameters, e.g. as
??? plot.unhighlight(), all current highlights are removed.? //如果unhighlight()沒(méi)有設(shè)置參數(shù)，取消所有數(shù)據(jù)點(diǎn)的激活狀態(tài)

? - setData(data)

??? You can use this to reset the data used. Note that axis scaling,
??? ticks, legend etc. will not be recomputed (use setupGrid() to do
??? that). You'll probably want to call draw() afterwards.

??? 重新設(shè)置曲線數(shù)據(jù)，參數(shù)data是plot(placeholder, data, options)中的data參數(shù)，可以不包含options的設(shè)置內(nèi)容。
??? 重新設(shè)置數(shù)據(jù)后，如果需要立即改變圖表顯示，請(qǐng)調(diào)用draw()方法來(lái)重新繪制圖表
??? 請(qǐng)注意，setData()方法并不會(huì)重新設(shè)置數(shù)軸的縮放比例、刻度、曲線名稱等，如果需要修改這些屬性，請(qǐng)使用setupGrid()方法，

??? You can use this function to speed up redrawing a small plot if
??? you know that the axes won't change. Put in the new data with
??? setData(newdata), call draw(), and you're good to go. Note that
??? for large datasets, almost all the time is consumed in draw()
??? plotting the data so in this case don't bother.

??? 如果你預(yù)先知道重新設(shè)置數(shù)據(jù)后數(shù)軸不需要改變，可以用setData(data)來(lái)設(shè)置數(shù)據(jù)然后調(diào)用draw()快速重繪曲線
??? 如果數(shù)據(jù)量比較大，draw()方法可能會(huì)消耗較長(zhǎng)時(shí)間，因此可能會(huì)有一點(diǎn)延遲，請(qǐng)不必感到疑惑。

???
? - setupGrid()

??? Recalculate and set axis scaling, ticks, legend etc.
??
?? 修改數(shù)軸、刻度、曲線名稱等，參數(shù)是 options 不包括data部分

??? Note that because of the drawing model of the canvas, this
??? function will immediately redraw (actually reinsert in the DOM)
??? the labels and the legend, but not the actual tick lines because
??? they're drawn on the canvas. You need to call draw() to get the
??? canvas redrawn.
???
??? 請(qǐng)注意，該方法不會(huì)重繪曲線就立即修改刻度標(biāo)簽及曲線名稱，因?yàn)檫@些屬性是以DOM節(jié)點(diǎn)的形式來(lái)實(shí)現(xiàn)的
??? 在canvas標(biāo)簽內(nèi)實(shí)現(xiàn)的屬性，比如刻度線，你需要調(diào)用draw()方法來(lái)重繪在canvas標(biāo)簽內(nèi)實(shí)現(xiàn)的屬性。
??? 應(yīng)該注意，如果原來(lái)圖表上沒(méi)有的數(shù)軸，在setupGrid()設(shè)置之后出現(xiàn)該數(shù)軸，那么該數(shù)軸會(huì)疊在Grid上，

? - draw()

??? Redraws the plot canvas.? //重繪圖表的canvas

? - triggerRedrawOverlay()

??? Schedules an update of an overlay canvas used for drawing
??? interactive things like a selection and point highlights. This
??? is mostly useful for writing plugins. The redraw doesn't happen
??? immediately, instead a timer is set to catch multiple successive
??? redraws (e.g. from a mousemove).

??? 添加一個(gè)覆蓋在圖標(biāo)上的canvas，這個(gè)方法對(duì)圖表插件的開發(fā)非常有用，特別是一些動(dòng)態(tài)的交互性的設(shè)置
??? 比如彈出一個(gè)下拉菜單或增加一個(gè)亮點(diǎn)。
??? 這個(gè)方法不會(huì)立即繪制設(shè)置的canvas內(nèi)容，繪制的時(shí)機(jī)可以通過(guò)設(shè)置延時(shí)或鼠標(biāo)事件來(lái)觸發(fā)。

? - width()/height()

??? Gets the width and height of the plotting area inside the grid.
??? This is smaller than the canvas or placeholder dimensions as some
??? extra space is needed (e.g. for labels).

??? 獲取圖表柵格的寬和高，寬高值會(huì)比canvas和占位符的尺寸小。

? - offset()

??? Returns the offset of the plotting area inside the grid relative
??? to the document, useful for instance for calculating mouse
??? positions (event.pageX/Y minus this offset is the pixel position
??? inside the plot).
??
?? 獲取圖表的繪制區(qū)相對(duì)文檔的坐標(biāo)，鼠標(biāo)事件觸發(fā)獲取的文檔坐標(biāo)減去該坐標(biāo)將得到當(dāng)前位置相對(duì)于繪圖區(qū)的位置偏移。
?? offset().left , offset().top 獲取左偏移和頂部偏移
???

? - pointOffset({ x: xpos, y: ypos })

??? Returns the calculated offset of the data point at (x, y) in data
??? space within the placeholder div. If you are working with dual axes, you
??? can specify the x and y axis references, e.g.

?? 獲取某個(gè)數(shù)據(jù)點(diǎn)位置相對(duì)于占位符的偏移。注意，不是相對(duì)canvas,而是相對(duì)于DIV
?? 可以為數(shù)據(jù)點(diǎn)的值注明采用的數(shù)軸，默認(rèn)采用第一坐標(biāo)系。
?? pointOffset({ x: 3, y: 3.5 }).left? pointOffset({ x: 3, y: 3.5 }).top? 分別是數(shù)據(jù)點(diǎn)(3,3.5)位置相對(duì)于容器DIV的偏移
???
????? o = pointOffset({ x: xpos, y: ypos, xaxis: 2, yaxis: 2 })
????? // o.left and o.top now contains the offset within the div
?

There are also some members that let you peek inside the internal
workings of Flot which is useful in some cases. Note that if you change
something in the objects returned, you're changing the objects used by
Flot to keep track of its state, so be careful.

? 下面是一些獲取圖表相關(guān)屬性的方法，

? - getData()

??? Returns an array of the data series currently used in normalized
??? form with missing settings filled in according to the global
??? options. So for instance to find out what color Flot has assigned
??? to the data series, you could do this:

??? 獲取plot(placeholder, data, options) 函數(shù)的data 和 options 合成的數(shù)據(jù)，
??? getData() 并非僅僅返回函數(shù)的 data 參數(shù)，他是一個(gè)數(shù)組，里面的信息包含了這個(gè)曲線的信息，
??? 包括options,每一條曲線的每一個(gè)參數(shù)設(shè)置、包括默認(rèn)設(shè)置的值及格式函數(shù)
??? 注意與setData()的參數(shù)區(qū)別，oo.setData(data), 則 data!= oo.getData()

????? var series = plot.getData();
????? for (var i = 0; i < series.length; ++i)
??????? alert(series[i].color);?? //逐個(gè)彈出曲線的顏色

??? A notable other interesting field besides color is datapoints
??? which has a field "points" with the normalized data points in a
??? flat array (the field "pointsize" is the increment in the flat
??? array to get to the next point so for a dataset consisting only of
??? (x,y) pairs it would be 2).

? - getAxes()

??? Gets an object with the axes settings as { xaxis, yaxis, x2axis,
??? y2axis }.

??? 該方法返回?cái)?shù)軸信息的json對(duì)象，該對(duì)象有四個(gè)成員，分別為xaxis, yaxis, x2axis, y2axis 四條數(shù)軸

??? Various things are stuffed inside an axis object, e.g. you could
??? use getAxes().xaxis.ticks to find out what the ticks are for the
??? xaxis. Two other useful attributes are p2c and c2p, functions for
??? transforming from data point space to the canvas plot space and
??? back. Both returns values that are offset with the plot offset.
???
??? 數(shù)軸內(nèi)部包含了各種信息(具體信息可以把json對(duì)象轉(zhuǎn)化成字符串細(xì)看，這里不細(xì)述，本文后面有將json對(duì)象系列化成字符串的方法)
??? 例如獲取X軸第一個(gè)刻度標(biāo)簽： getAxes().xaxis.ticks[0].label
??? 【c2p p2c兩個(gè)函數(shù)是用于計(jì)算并返回?cái)?shù)據(jù)點(diǎn)與數(shù)軸直接的偏移量(包含曲線偏移量)】看不太明白，待證實(shí)

?
? - getPlaceholder()

??? Returns placeholder that the plot was put into. This can be useful
??? for plugins for adding DOM elements or firing events.
???
??? 獲取圖表容器div，返回的是一個(gè)json對(duì)象
??? getPlaceholder().selector 返回該容器的jQuery選擇器，即 '#' + id

? - getCanvas()

??? Returns the canvas used for drawing in case you need to hack on it
??? yourself. You'll probably need to get the plot offset too.
?
?? 獲取繪制區(qū)canvas，返回的是一個(gè)json對(duì)象

?
? - getPlotOffset()

??? Gets the offset that the grid has within the canvas as an object
??? with distances from the canvas edges as "left", "right", "top",
??? "bottom". I.e., if you draw a circle on the canvas with the center
??? placed at (left, top), its center will be at the top-most, left
??? corner of the grid.

?? 獲取柵格邊緣與canvas邊緣之間的距離，有數(shù)軸的一邊間隔會(huì)大一些，因?yàn)樾枰s小柵格防止數(shù)軸疊加在柵格上。
?? 該方法返回一個(gè)json對(duì)象，形如 {left:36,right:6,top:6,bottom:20}

? - getOptions()

??? Gets the options for the plot, in a normalized format with default
??? values filled in.

??? 獲取繪制函數(shù)的options參數(shù)，返回的是一個(gè)json對(duì)象
???

Hooks
事件鉤子
====================================================

In addition to the public methods, the Plot object also has some hooks
that can be used to modify the plotting process. You can install a
callback function at various points in the process, the function then
gets access to the internal data structures in Flot.

除了各種方法，flot還提供一些事件鉤子，你可以在圖表繪制過(guò)程中為事件鉤子設(shè)置回調(diào)函數(shù)以
修改圖表繪制過(guò)程，這些回調(diào)函數(shù)具備使用flot內(nèi)部數(shù)據(jù)結(jié)構(gòu)的權(quán)限。

Here's an overview of the phases Flot goes through:
下面是flot繪圖的步驟：

? 1. Plugin initialization, parsing options? //初始化引入的插件(如果有的話)設(shè)置，解析options的參數(shù)設(shè)置
?
? 2. Constructing the canvases used for drawing //創(chuàng)建canvas標(biāo)簽

? 3. Set data: parsing data specification, calculating colors,???
???? copying raw data points into internal format,
???? normalizing them, finding max/min for axis auto-scaling

??????? //設(shè)置數(shù)據(jù)：解析數(shù)據(jù)設(shè)定，確定曲線顏色，把原始數(shù)據(jù)點(diǎn)的數(shù)據(jù)格式化成曲線所用格式，確定數(shù)軸的長(zhǎng)度及縮放比例

? 4. Grid setup: calculating axis spacing, ticks, inserting tick
???? labels, the legend
?????? //柵格設(shè)定：計(jì)算數(shù)軸刻度及刻度標(biāo)簽，設(shè)置曲線名稱

? 5. Draw: drawing the grid, drawing each of the series in turn
????? //畫圖：畫出柵格及曲線

? 6. Setting up event handling for interactive features
???? //設(shè)置用于交互的監(jiān)聽事件函數(shù)

? 7. Responding to events, if any
???? //如果存在的話，觸發(fā)事件

Each hook is simply a function which is put in the appropriate array.
You can add them through the "hooks" option, and they are also available
after the plot is constructed as the "hooks" attribute on the returned
plot object, e.g.

事件鉤子是一些函數(shù)，這些函數(shù)被保存在一個(gè)數(shù)組里面，你可以通過(guò)指定事件鉤子數(shù)組的下標(biāo)來(lái)添加和調(diào)用它們，
這些事件鉤子作為圖表"hooks"的屬性在圖表構(gòu)造完畢后仍可以調(diào)用。

? // define a simple draw hook
? function hellohook(plot, canvascontext) { alert("hello!"); };

? // pass it in, in an array since we might want to specify several
? var plot = $.plot(placeholder, data, { hooks: { draw: [hellohook] } });

? // we can now find it again in plot.hooks.draw[0] unless a plugin
? // has added other hooks

The available hooks are described below. All hook callbacks get the
plot object as first parameter. You can find some examples of defined
hooks in the plugins bundled with Flot.

?事件鉤子函數(shù)的第一個(gè)參數(shù)是圖表對(duì)象

?- processOptions? [phase 1]

?? function(plot, options)
??
?? Called after Flot has parsed and merged options. Useful in the
?? instance where customizations beyond simple merging of default
?? values is needed. A plugin might use it to detect that it has been
?? enabled and then turn on or off other options.
??
?? processOptions發(fā)生在步驟1，圖表函數(shù)中產(chǎn)地options參數(shù)之后開始調(diào)用的函數(shù)，常用來(lái)修改options內(nèi)的參數(shù)值
?
?- processRawData? [phase 3]

?? function(plot, series, data, datapoints)
?
?? Called before Flot copies and normalizes the raw data for the given
?? series. If the function fills in datapoints.points with normalized
?? points and sets datapoints.pointsize to the size of the points,
?? Flot will skip the copying/normalization step for this series.
??
?? processRawData發(fā)生在步驟3，曲線原始數(shù)據(jù)實(shí)例化之前調(diào)用，如果函數(shù)中的datapoints不為空，
??

??
?? In any case, you might be interested in setting datapoints.format,
?? an array of objects for specifying how a point is normalized and
?? how it interferes with axis scaling.

?? The default format array for points is something along the lines of:

???? [
?????? { x: true, number: true, required: true },
?????? { y: true, number: true, required: true }
???? ]

?? The first object means that for the first coordinate it should be
?? taken into account when scaling the x axis, that it must be a
?? number, and that it is required - so if it is null or cannot be
?? converted to a number, the whole point will be zeroed out with
?? nulls. Beyond these you can also specify "defaultValue", a value to
?? use if the coordinate is null. This is for instance handy for bars
?? where one can omit the third coordinate (the bottom of the bar)
?? which then defaults to 0.

?- processDatapoints? [phase 3]

?? function(plot, series, datapoints)
?
?? Called after normalization of the given series but before finding
?? min/max of the data points. This hook is useful for implementing data
?? transformations. "datapoints" contains the normalized data points in
?? a flat array as datapoints.points with the size of a single point
?? given in datapoints.pointsize. Here's a simple transform that
?? multiplies all y coordinates by 2:

???? function multiply(plot, series, datapoints) {
???????? var points = datapoints.points, ps = datapoints.pointsize;
???????? for (var i = 0; i < points.length; i += ps)
???????????? points[i + 1] *= 2;
???? }

?? Note that you must leave datapoints in a good condition as Flot
?? doesn't check it or do any normalization on it afterwards.

?- draw? [phase 5]

?? function(plot, canvascontext)
?
?? Hook for drawing on the canvas. Called after the grid is drawn
?? (unless it's disabled) and the series have been plotted (in case
?? any points, lines or bars have been turned on). For examples of how
?? to draw things, look at the source code.
??
?
?- bindEvents? [phase 6]

?? function(plot, eventHolder)

?? Called after Flot has setup its event handlers. Should set any
?? necessary event handlers on eventHolder, a jQuery object with the
?? canvas, e.g.

???? function (plot, eventHolder) {
???????? eventHolder.mousedown(function (e) {
???????????? alert("You pressed the mouse at " + e.pageX + " " + e.pageY);
???????? });
???? }

?? Interesting events include click, mousemove, mouseup/down. You can
?? use all jQuery events. Usually, the event handlers will update the
?? state by drawing something (add a drawOverlay hook and call
?? triggerRedrawOverlay) or firing an externally visible event for
?? user code. See the crosshair plugin for an example.
????
?? Currently, eventHolder actually contains both the static canvas
?? used for the plot itself and the overlay canvas used for
?? interactive features because some versions of IE get the stacking
?? order wrong. The hook only gets one event, though (either for the
?? overlay or for the static canvas).

?- drawOverlay? [phase 7]

?? function (plot, canvascontext)

?? The drawOverlay hook is used for interactive things that need a
?? canvas to draw on. The model currently used by Flot works the way
?? that an extra overlay canvas is positioned on top of the static
?? canvas. This overlay is cleared and then completely redrawn
?? whenever something interesting happens. This hook is called when
?? the overlay canvas is to be redrawn.

?? "canvascontext" is the 2D context of the overlay canvas. You can
?? use this to draw things. You'll most likely need some of the
?? metrics computed by Flot, e.g. plot.width()/plot.height(). See the
?? crosshair plugin for an example.

??
Plugins
插件
-------

Plugins extend the functionality of Flot. To use a plugin, simply
include its Javascript file after Flot in the HTML page.

If you're worried about download size/latency, you can concatenate all
the plugins you use, and Flot itself for that matter, into one big file
(make sure you get the order right), then optionally run it through a
Javascript minifier such as YUI Compressor.

Here's a brief explanation of how the plugin plumbings work:

Each plugin registers itself in the global array $.plot.plugins. When
you make a new plot object with $.plot, Flot goes through this array
calling the "init" function of each plugin and merging default options
from its "option" attribute. The init function gets a reference to the
plot object created and uses this to register hooks and add new public
methods if needed.

See the PLUGINS.txt file for details on how to write a plugin. As the
above description hints, it's actually pretty easy.

//========補(bǔ)充================

關(guān)于框選
數(shù)軸開啟選擇模式后，可綁定選擇事件
?$("#placeholder").bind("plotselected", function (event, ranges){ //doSomething??? })

其中ranges參數(shù)記錄了選擇曲線的區(qū)域，是一個(gè)json 對(duì)象，內(nèi)容是各個(gè)數(shù)軸的選中區(qū)域起止點(diǎn)的值，形如：

{
"xaxis":{"from":2.286764705882353,"to":2.801470588235294},
"yaxis":{"from":0.6259124644481346,"to":7.250000055689011},
"y2axis":{"from":0.8345499525975129,"to":9.66666674091868}
}

?plot.setSelection(ranges,true) 方法，按ranges指定范圍設(shè)置選中區(qū)域，
??????????????? 如果沒(méi)有忽略true參數(shù)，曲線不重繪，只把選中區(qū)域顏色加深，曲線重繪并不會(huì)增加數(shù)據(jù)點(diǎn)，除非刷新使用的數(shù)據(jù)項(xiàng)

========================把json對(duì)象轉(zhuǎn)化成字符串==================================
<script type="text/javascript">

//用法
var jsonStr = new JsonStr(JsonObj);? //JsonObj 是一個(gè)json對(duì)象
alert(jsonStr);?

</script>

圖片：

轉(zhuǎn)載于:https://www.cnblogs.com/JerryWang1991/articles/2110110.html

總結(jié)

以上是生活随笔為你收集整理的flot中文API（转载）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：微软一站式示例代码库 7月新代码示例发布
下一篇： Cassandra