JQuery Flot API Document Chinese version

Here's how to call the plot function:
var plot = $.plot (placeholder, data, options)
Where placeholder can be a jquery object, a DOM element, or a jquery expression, to put the completed diagram in this position. placeholder to have width and height. Because plot modifies some of the properties of the placeholder, it is recommended that you use a simple div, except for the height and width of the other properties.
The structure of data:
Data should be an array of data series:
[Series1, Series2, ...]
A series can be raw data or an object that owns properties. The original data is a two-dimensional array:
[[X1, Y1], [x2, Y2], ...]
In order to simplify the logical relationship of the flot content, the values of the x-axis and y-axis are numbered (of course, if there is a special need, flot can also support the axis of time, followed by a detailed explanation). Because most of the cases, we extract the data directly from the database and convert it into JSON format, but we don't care about the data type. If something strange happens, check the format of the data before you have any problems.
If the data at a point uses null, the point is ignored during the drawing process. Then the line that contains this point will have a disconnection phenomenon. The points before and after this point are not connected.
The line and the point are connected. For bars, you can set a third association value (default is 0).
A single Sequence object structure is:
{
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
}
In addition to the data in it, other properties are not necessarily explicitly specified, because in most cases they are using default values. Typically you only specify tags and data:
{
Label: "y = 3",
Data: [[0, 3], [10, 3]]
}
Label is a description of the meaning of this data series, if there is only one sequence, it is not necessary to set this property. If you have more than one sequence, you set the label so that you can differentiate the meaning of the sequence in the diagram.
If color is not set, color is automatically generated for display.
The remaining attributes are useful if you want users to add and delete data sequences.
The Xaxis and YAxis options set which dimension to use, the default is set to 1, and if set to 2, the second dimension is used (the x axis is above, the Y axis is on the right).
Clickable and hoverable can be set to False when the entire chart is set to interactive, this option allows the user to be unable to interact with this particular data sequence.
Properties that are not described are described in more detail later, and in most cases the default values are used. When you want to use a value that you define, the default value is overwritten.
This is a more complex definition of a data series:
[{label: "Foo", Data: [[10, 1], [17,-14], [30, 5]]},
{label: "Bar", Data: [[11, 13], [19, 11], [30,-7]]}]
What the options mean:
All of the options are completely optional. If you want to modify it, treat it as an object:
var options = {
Series: {
Lines: {show:true},
Points: {show:true}
}
};
User settings that can be customized in the description section:
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
}
A description can be seen as a table that consists of two parts: one is the label of all data series and the other is the color. If you want the label to appear in a different format, you can use the Lavelformatter function:

View Plaincopy to Clipboardprint?

1. Labelformatter:function (label, series) {
2. Series is the series object for the label
3. Return ' + label + ';
4. }

Nocolums is to divide the description into columns. Position is where to put this instruction in the position of the chart (top-right, top-left, etc.) and the distance from the other charts. BackgroundColor and Backgroundopacity are set to the background color and transparency, normal is the default.
If you want to get this description part from the chart and put it in an element in the DOM, you can set the Container property, which can be a jquery object or an expression. Some attributes, such as psition and margin, are ignored and the contents of this element are rewritten.
About user settings for axes:

Xaxis, YAxis: {show:null or true/false position: ' Bottom ' or ' top ' or ' left ' or ' right ' mode:null or ' time ' color:null or color spec tickcolor:null or color spec min:null or number Max:null or number Autoscalemargin:null or number trans Form:null or Fn:number, number Inversetransform:null or fn:number, number Ticks:null or number or ticks arr Ay or (Fn:range-ticks array) Ticksize:number or array minticksize:number or array tickformatter: (Fn:number, obj ECT, String) or string tickdecimals:null or number Labelwidth:null or number Labelheight:null or number Reservespa Ce:null or True ticklength:null or number Aligntickswithaxis:null or number}

All of them contain the same attributes. The meanings of each of these properties are described in detail below.

Show: If you do not set this property, Flot will automatically choose, such as: the data and the axis of the relationship, then the axis will be displayed, of course, more flexible way to use

True or False to set this property.

Position: The position used to define the display of the axis text, above or below the x-axis, on the left or right side of the y-axis.

Mode: The data type of the axis, the default is the numeric type, and when set to the time type, it can be used as an axis.
Color: Defines the colors of the axes to identify text and coordinates. If not set, it is the same color as the grid in the chart. Of course, you can also set the color yourself, using "Tickcolor" Also

You can define the color of the coordinates individually.

Min/max: Describes the axis maximum and minimum range. If not set, Flot automatically calculates and generates a range to display.

Autoscalemargin: It's a little hard to understand. Flot automatically calculates the range of the Min/max by adding a value that prevents some points from being placed on the edge of the graph. This property can only be

Can only be used when the max/min is not set. If a margin,flot is set, the end point of the axis is extended to form a complete coordinate. Default

The setting is the x-axis has no margin,y axis with a margin of 0.02. The default settings are already available for most use.

"Transform", "inversetransform": You can do some special calculation of the original data and then draw. For example, you can use this method to draw some nonlinear

The curve. For example:
Xaxis: {
Transform:function (v) {return Math.log (v);},
Inversetransform:function (v) {return math.exp (v);}
}
Similarly, if you want to reverse the y-axis, you can:
YAxis: {
Transform:function (v) {return-v;},
Inversetransform:function (v) {return-v;}
}

The data in the Flot is monotonous, that is, the original data can not appear in the chaotic sequence. Inversetransform is the inverse function of the transform, through the explicit

Data can be obtained, if the chart does not have an interactive process, this property can not be set.

The rest of the options are processing the scale. If you do not set any of the ticks, the coordinate generation function automatically calculates the scale. The algorithm estimates the number of ticks and then calculates the interval between the two ticks so that the complete scale can be generated. You can set the number of ticks for the algorithm ("ticks"), and the algorithm will return a value that is closest to the number of ticks you set according to the range of the original data, that is, if you set 3, it is normal to return 5 coordinates because the algorithm considers 5 ticks to be more appropriate. If you do not set the scale, set the "ticks" to 0 or an empty array. You can also set the "Ticksize" to define the difference between the two ticks, if set to 2, then the scale will be 2,4,6. The minimum value of two scale difference values can be set by "Minticksize". For the timescale, we can set the array to complete: [2, "Month"].

The hardest way to do this is to simply ignore Flot's own algorithm, using the array's own defined scale:
Ticks: [0, 1.2, 2.4]
The following methods are more customizable:
Ticks: [[0, ' zero '], [1.2, ' one mark '], [2.4, ' marks ']]
Flot also supports the extensibility of the bull X, which means that a function can be called to form the values of the individual ticks. In the function, you need to calculate an array by the minimum, maximum, and an interval of your own set as individual ticks:
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 also set "Tickdecimals" to specify the precision of the scale display.

To "Tickformatter" definition also a function can be flexible format of the display of the scale, the function has two parameters, one is the value of the scale, one is the maximum value on the axis and the minimum value, the return value must be string type:
Function Formatter (val, axis) {
Return val.tofixed (axis.tickdecimals);
}

For an Axis object, there are two properties of Min and Max, and "Tickdecimals" is the precision of coordinate display, "ticksize" is the difference between two ticks, with so many properties, you can customize the display of the scale:
Function Suffixformatter (val, axis) {
if (val > 1000000)
Return (val/1000000). toFixed (axis.tickdecimals) + "MB";
else if (val > 1000)
Return (val/1000). toFixed (axis.tickdecimals) + "KB";
Else
Return val.tofixed (axis.tickdecimals) + "B";
}

"Labelwidth" and "labelheight" are defined in the scale display area. "Reservespace" means that even if you do not define an axis, Flot will use this property to reserve the space occupied by the shaft. Working with "Labelwidth" and "labelheight" when plotting a single-line multi-axis chart can have a lot of effect.

"Ticklength" defines the length of the coordinate scale, NULL is the default setting, which is a small scale, and if set to 0, the scale is not displayed on the axis.

"Aligntickswithaxis": If you set the number to another axis, the flot will be aligned with the scale on the other axes when the scale is automatically generated. This will be more beautiful, especially when there are grids in the diagram, and there are many axes, it is very practical.

Draw multiple axes:
If you need to draw multiple axes, the data sequence is given in the following format, {data: [...], yaxis:2} indicates that the sequence will use the second y-axis. When you want to set the display of the axis, you cannot directly use the Xaxis/yaxis option, but there are two of arrays:
{
Xaxes: [{position: ' top '}],
Yaxes: [{}, {position: "Right", min:20}]
}
If all Y-axes want to be set to the same value, use YAxis: {min:0}.

Time-type data series:
Time series is a bit more difficult than the data series. Because the time series is not arranged according to 10, the flot need to convert the time into a numerical value before processing. Flot is supported by the timestamps in JavaScript to support the time series. Timestamp is a number of milliseconds from January 1, 1970 00:00:00, similar to the timestamps used in UNIX systems, except that the unit of JavaScript is milliseconds, and Unix's meaning is seconds. You can get the browser's timestamp by using the following:
Alert ((New Date ()). GetTime ())
Generally speaking, everyone wants to show the local time on the webpage, but flot can only convert timestamp to UTC, so the only way is to get the current timestamp, and time zone, and then calculate the value of timestamp. To get the UTC timestamp when the UTC time is equal to the current time. The converted value is then provided to the flot to draw.
You can then use the converted timestamp to construct the original data and define the axis type as "time", and the Flot can automatically calculate the scale and format them. Of course, you can define the scale yourself, but be sure to use a numeric parameter, not an object type. The generation and formatting of ticks can also be defined by the options of the axes:
Minticksize:array
Timeformat:null or format string
Monthnames:null or array of size of strings
Twelvehourclock:boolean
"TimeFormat": The Time Display form:
Xaxis: {
Mode: "Time"
TimeFormat: "%y/%m/%d"
}
The timescale will be displayed as "2000/12/24", with a specific format definition referenced below:
%h: Hours
%H: Hour (left 0)
%M: Min (left 0)
%s: Seconds (left 0)
%d: day, use%0d to the left to fill 0
%m: Month, with%0m to the left to complement 0
%y: Year (4 digits)
%b: Name of the month (English name)
%p:12 Hour projection display (AM/PM),%h/%h
%p:12 Hour projection display (of which am/pm)

The name of the month can be customized:
MonthNames: ["Jan", "Feb", "Mar", "Apr", "Maj", "June", "Jul", "April", "Sep", "Okt", "Nov", "Dec"]
When "Twelvehourclock" is set to true, the time is displayed in the 12 O'Clock system.

Official English original address: https://github.com/flot/flot/blob/master/API.md

JQuery Flot API Document Chinese version