flot:數據格式

Data Format

The data is an array of data series:

[ series1, series2, ... ]

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

[ [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.

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.

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

The format of a single series object is as follows:

{
    color: color or number
    data: rawdata
    label: string
    lines: specific lines options
    bars: specific bars options
    points: specific points options
    xaxis: number
    yaxis: number
    clickable: boolean
    hoverable: boolean
    shadowSize: number
    highlightColor: color or 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:

{
    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.

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.

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.

The "xaxis" and "yaxis" options specify which axis to use. The axes are numbered from 1 (default), so { yaxis: 2} means that the series should be plotted against the second y axis.

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

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 command. When you specify them for a specific data series, they will override the default options for the plot for that data series.

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

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


中文

數據是一個包含數據序列的數組。

[ series1, series2, ... ]

一個序列可以是生數據或者是有屬性的對象。生數據格式是一個包含點的數組:

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

比如:

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

注意:爲了簡化本插件的內部邏輯,x和y必須是數字(即使是時間序列,看下面的文檔)。這是一個常見的問題,因爲你也許會從數據庫獲取數據,直接把數據序列化成json而沒有注意到數據類型。如果你遇到到莫名其妙的錯誤,請再三確認你輸入的是數字而不是字符串

如果一個點是null或者它的一個座標是空或者不能被轉換爲數字,在畫圖時這個點會被忽略。作爲一種特殊情況,在線段中的null值會被處理成線的端頭,例如: 在這個null值的前面和後面的點不會聯接起來。

線條和點需要雙座標。對於填充的線條和柱狀圖,你可以定義第三個座標,那就是填充線和柱狀圖的底部(缺省是到0)。

單序列對象的格式如下:

{
    color: color or number
    data: rawdata
    label: string
    lines: specific lines options
    bars: specific bars options
    points: specific points options
    xaxis: number
    yaxis: number
    clickable: boolean
    hoverable: boolean
    shadowSize: number
    highlightColor: color or number
}

除了data,你不必聲明每個參數,餘下的選項會取缺省值。典型情況你只會聲明label和data,象這樣:

{
    label: "y = 3",
    data: [[0, 3], [10, 3]]
}

label用於標題,如果不定義,標題中就不會出現這個序列。

如果不定義color,該序列會從自生顏色中分配到一種顏色。顏色要麼是css顏色定義(比如rgb(255, 100, 123) 或者是一個整數用來指明是自生顏色中的哪一個,比如聲明0就會得到第0號顏色。

如果你讓用戶添加或者移除序列,用整數指明顏色會非常好用,在這種情況下,你可以硬編碼顏色位置標記來防止顏色在序列中跳躍。

xaxis和yaxis標明使用哪個座標軸。座標軸是從1(缺省值)開始以數字命名,所以{yaxis:2}代表第二個y軸的序列。

對於一些特定的序列,如果在圖表中交互被打開,"clickable"和"hoverable"可以設爲false來關閉交互。

由於都和通過在圖表命令裏的選項參數傳入的缺省選項一樣,餘下的選項都記錄在下面。當你爲一個特定的序列標明它們時,它們就會爲這個序列覆蓋掉缺省的選項。

如下是一個簡單數據的完整例子:

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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章