天天看点

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

继续阅读