Flot Chinese Document Simplified version

Flot Reference Documentation:

A Call to plot function plot: var plot=$.plot (placeholder,data,options)

-----------

Placeholder

-----------

Placeholder placeholder is a jquery object or DOM element or jquery form, and the drawing function will draw the chart inside the placeholder.

This placeholder must be set wide and high beforehand.

The plot function will modify the contents of this placeholder when drawing, so you might want to use an empty div element as a placeholder, and be careful not to set a fancy style for the placeholder, for example, setting a background map for a placeholder under IE7.0 will make an error.

-----------

Data parameter

-----------

The Flot data is a series array.

The data parameter in the plot function: Each curve is a data item parameter, and when you draw multiple curves, it is an array, and each array element is the data item parameter of a curve.

A sequence can be either raw or a data object.

1. Raw Data

The original data format is composed of a set of arrays representing the coordinate values of the data points: [[x1, Y1],[x2, y2], ...]

Note that the vertical and horizontal coordinate values of the flot must be numbers (that is, the usage time series is also described later).

This is a very common mistake, because you are likely to get data from the database without checking the data type directly into JSON object use.

If you think you're having an inexplicable error, make sure you enter a number instead of a string.

If the coordinate value is null, or if one of the coordinate values is empty, or is not a number, or cannot be converted to a number, then the node is ignored and no straight lines are used to connect between the 2 nodes before and after the node.

Line and scatter plots each node has 2 parameters, the histogram has 3 parameters, and the third parameter specifies the bottom position of the histogram (the default value is 0).

2. Object data

The data format parameters for a single Chart object are as follows:

{

Color:color or number//color

Data:rawdata//Data

Lines:specific lines Options//Line chart coordinate parameters

Bars:specific bars Options//histogram coordinate parameters

Points:specific points Options//scatter chart coordinate parameters

Xaxis:1 or 2//use which x-axis, if a line is not used by any one curve, the axis will not appear on the chart

Yaxis:1 or 2//using which y-axis

Clickable:boolean//Allow monitoring of mouse click events

Hoverable:boolean//Allow monitoring of mouse hover events

Shadowsize:number//Curve Shadow

}

In general, you do not need to set each parameter, you just have to set a few of the specific parameters, the other parameters will use the default values.

Detailed parameters:

The label string is used to specify the curve name, and if no value is set for the label, the chart title area does not appear.

L Color Set the curve color if no curve color is set, the program automatically uses the default color (the colors sequence in the options item). The color value can be a CSS color format (RGB format, 16 color, Web universal color name) or a numeric number indicating the number of colors in the color series.

If you allow the user to reset or delete the curve, the latter will be useful, you can set the default color of the curve used in the code to prevent the same color from repeating between the curve.

L Xaxis "and" YAxis "sets the number of axes used for the curve (the second x axis is the top horizontal axis, the second Y axis is the right vertical), and you can use this property to make a even-numbered axis curve.

L "clickable" and "hoverable" are used to turn off the mouse click Effect or rollover effect of the curve, as described in the following.

Other parameters are described later, they are the same as the "options" parameter of the plot function, and if you set the values of these parameters for a curve in data, they will overwrite the options default values.

-----------

Option parameter

-----------

All options are optional, they all have default values, they are explained one after the other, and if you want to modify the default values for these options, you only need to specify their values explicitly.

Related parameters:

1. Legend: Custom Curve Chart title

The legend is used to generate the chart title, and the chart title is displayed on the graph in a tabular manner.

Format:

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 and1

Container:null or jQuery object/domelement/jquery expression

}

Detailed parameters:

L Labelformatter: Customize the format of chart titles.

If you want to customize the format of a chart title, such as a hyperlink, you can use a function to customize the "Labelformatter" item.

Cases:

Labelformatter:function (label, series) {

Series is a data object with a curve named label

Return ' <a href= ' # ' + label + ' "> ' + label + ' </a> ';

}

L Nocolumns: The number of columns used to set the table.

L Position: Used to specify the position of legend within the curve, "NE" Northeast corner, "se" Southeast, "NW" Northwest, "SW" Southwest.

L Margin: Sets the distance between the legend and the curve border, which can be the value of the X Y-axis offset to [x, Y]. It can also be a single number, and a single numeric value indicates that the offset from the x, Y axis uses the same value.

which x-axis and y-axis are used as a reference depends on the value of the position.

L BackgroundColor: Sets the background color of the legend.

L Backgroundopacity: Sets the transparency of the legend background.

L Container: If you want to put legend inside other DOM elements, you can set a value for container.

The value of container can be a jquery object or an expression, for example: container: $ ("#showChartLegend").

Container the chart-related positional properties such as "position" and "margin" are ignored when the container is specified for legend.

Also note that the contents of the container specified by container will be overwritten.

2. Xaxis, YAxis, X2axis, Y2axis axis Custom

Format:

Xaxis,yaxis, X2axis, Y2axis: {

Mode:nullor "Time"//axis is a temporal mode

Min:null Ornumber//number of axes min

Max:null Ornumber//number of axes max

Autoscalemargin:null or number//See parameter details

Labelwidth:null or number

Labelheight:null or number

Transform:null or Fn:number, number

Inversetransform:null or Fn:number, number

Ticks:nullor number or ticks array or (Fn:range, ticks Array)

Ticksize:number or array

Minticksize:number or array

Tickformatter: (Fn:number, Object-a string) or string

Tickdecimals:null or number

}

Detailed parameters:

The mode axis style, mode is null to indicate the axis of the decimal, and time is set to the timeline.

L Min/max sets the maximum and minimum values of the axes, and if they are not explicitly specified, the minimum and maximum values in the data are automatically used.

L labelwidth/labelheight is used to set the height-width of the axis scale label, which comes in handy when you need to arrange a few charts neatly.

L Transform/inversetransform is used to change the way the data is displayed on the axis of a callback function. You can design a function to extend or compress specific data segments on a linear axis in a nonlinear manner.

Cases:

Xaxis: {

Transform:function (v) {return Math.log (v);},

Inversetransform:function (v) {return math.exp (v);}

}

It is important to note that Flot assumes that the transform function does not modify the order in which the data points are arranged.

The Inversetransform function is the inverse of the transform, so there are:

v = = Inversetransform (transform (v)

This function is used when the coordinate data needs to be converted back to the value data, which often occurs when the chart is interacting dynamically, such as clicking on the icon and fetching the data, but if you do not make any dynamic interactions, you may not be able to use this function.

Other parameters related to the scale grid:

If you do not explicitly set the scale interval, the program is set automatically and the setup process is divided into 2 steps,

First, the number of ticks is estimated, followed by the rounding method to estimate the appropriate step size, and finally the scale is generated.

L ticks by setting the value of "ticks" to a number, you can set the number of ticks that the chart produces, but the program tries to set the most appropriate number of ticks, so although you set the number of 3 ticks, you may get 5, if you don't need to set the scale yourself, put "ticks" is set to 0 or an empty array.

L Ticksize Skip the estimate step directly set the scale interval step, if you set the value to 2, the resulting scale will be shaped like 2,4,6.

L Minticksize You can set the minimum value for the scale interval.

If you want to fully customize the scale, you can set the value of the parameter "ticks" to an array, the assignment method is as follows: Ticks: [0, 1.2, 2.4].

Or, as in the following example, the label of the even scale is also customized:

Ticks: [[0, ' zero '], [1.2, ' one mark '], [2.4, ' marks ']].

Both of these methods can be used in combination.

The scale can be generated with a function by assigning a function to "ticks", which should be an argument with a number axis object with a maximum scale value and a minimum scale value.

The function returns an array of ticks assigned to "ticks".

The following example is a simple scale generator, with the PI value being the scale interval size, which is very useful for trigonometric curves.

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;

}

L tickdecimals is used to set the number of decimal digits for the scale, and the program automatically determines the interception by default.

L Tickformatter can set the scale display format by function, the Format function has 2 parameters, the scale value and the Axis object. The function should return a string assigned to Tickformatter.

The basic format of the "Tickformatter" Format function is as follows:

Function Formatter (val, axis) {

Returnval.tofixed (axis.tickdecimals);

}

The Axis object can get the maximum and minimum values of the axis data, tickdecimals can get the scale number of scales label, ticksize can get the scale interval length (the program algorithm is calculated automatically or customized).

3. Data Display Customization

Format:

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, ...]

Parameter details:

L Series: {} "series: {}" parameters will be in effect for each data series, can be used to set global parameters for the chart, if you need to set different properties for the chart of a particular data series, you can set the corresponding parameters in the corresponding data series objects to override the global parameters.

L Lines/points/bars is the most important parameter that sets the line chart, scatter plot, histogram display, and how to display the chart for each data series.

If no one of these three parameters is set specifically, a line chart is displayed by default, and the method for closing the line chart is lines: {show:false}.

L linewidth is used to set the thickness of line lines or other borders of shapes, you can set this value to the output of the line chart to set the line chart line thickness or other shapes of the border, you can set this value to close the output of the line chart.

L fill is used to set the transparency of the chart fill (0-1), and for Polylines, the fill range is the area of the polyline and axis.

L FillColor Set the fill color, if NULL, will use a color consistent with the line color, if the color name resolution fails will use the default color (line chart histogram black, scatter chart white).

L BarWidth is used to set the width of the histogram in units of the axis rather than pixels.

L align is used to set the alignment relationship between the data points corresponding tick marks and the histogram, by default, the tick marks are on the left side of the histogram, near the smallest side of the axis, and if set to center, tick marks are in the middle of the histogram.

L Step for Line chart, "steps" can set whether to use a ladder-like polyline, set to true with a ladder-like Polyline, the adjacent 2 data points are first connected with a horizontal line, and then with vertical lines connected, it is important to note that this mode will be on the same vertical line to increase the number of points to achieve.

L Shadowsize You can set the curve shadow size to 0 to turn off the shadow effect.

L Color "Colors" can be predefined a series of colors saved in the array for curve use, you can set any number of colors.

such as: colors:["#d18b2c", "#dba255", "#919733"].

4. Background Grid customization

Format:

Grid: {

Show:boolean

Abovedata:boolean

Color:color

Backgroundcolor:color/gradient Ornull

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

}

Detailed parameters:

L-color defines the color of the grid, including the color of the scale value label.

L backgroundcolor Background Color fills inside the grid, the background is transparent by default, and you can set a color gradient for the background, which is mentioned later in the details.

L Show If the grid's "show" parameter is set to False, the grid background includes the axis and axis scale labels will be hidden.

L Abovedata is used to set whether the grid is placed above or below the data point, and false by default is placed below the data point.

"Abovedata" is set to true and the background color is set, and the curve is obscured by the background color of the grid.

L Tickcolor Sets the color of the tick marks.

L Labelmargin Sets the distance between the scale value label and the grid.

L BorderWidth Sets the border width, set to 0 to cancel the border.

L BorderColor Set the border color.

L TICKLABEL the CSS style of setting the label of the Tick value (not experimental, the setting method is unknown).

L markings is used to draw a rectangle on the background.

The position and length of the rectangle are determined by the start-stop coordinate of the vertical axis, corresponding to the first vertical axis, and the second axis corresponding to the second vertical axis, and the color parameter can be set to draw the block colors, the assignment is an array, each array element is a JSON data format, each array element draws a chunk.

You can use a function to return an array to assign a value.

Here is a simple example:

markings: [{xaxis: {from:0, to:2},yaxis: {from:10, to:10}, Color: ' #bb0000 '}, ...]

If you set only one axis of data range, the default axis data range defaults to [Min,max], if the axis start and end values are equal, a line is drawn, and you can use "linewidth" to set the size of the segment.

L clickable When set to true, the chart will listen for mouse click events, and the "Plotclick" event will be triggered when the chart is clicked.

The parameters of the callback function are the coordinate values of the mouse coordinates and the data points, that is, the position coordinates in pixels and the data coordinates in the number of axes.

If there is no data point in the mouse click position, the parameter value of the data point is null, and conversely, it is a JSON object.

L Hoverable set to True will listen for mouse movement events, "Plothover" event occurs when the mouse moves to a location, the parameters of the callback function are consistent with "clickable".

The "Plotclick" and "Plothover" event usages are as follows:

$ ("#placeholder"). Bind ("Plotclick", Function (event, POS, item) {

if (item) {

$ ("#clickdata"). Text ("youclicked point" + Item.dataindex + "in" + Item.series.label + ".");

Plot.highlight (Item.series,item.datapoint);

}

});

L Autohighlight "Autohighlight" value is true, when the "Hoverable" event and "Plotclick" event occurs, the data points show the highlight effect, the occurrence of the number of point highlighting and disappearance of the corresponding highlight/ Unhighlight method.

L Mouseactiveradius is used to set the distance between the mouse and the data point that can activate the data point, and if there are multiple data points within the matching distance, Flot activates the nearest data point, and for the histogram activates the histogram at the latest setting.

Setting "Hoverable" and "clickable" to false for a curve data itself does not trigger the event

However, when set to False in options, you cannot turn on event snooping by setting true within a curve.

5. Define the change mode

Detailed parameters:

L curve color Pre-defined: {colors: [Color1, Color2, ...]}

L chart Grid background color gradient

Grid: {

backgroundcolor:{colors: ["#000", "#999"]}

}

L curve color intensity and transparency gradient settings, including data for the start and end states:

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

For example, in the following example, the first histogram has a normal luminosity, but the back gradually darkens and finally disappears.

Bars: {

Show:true,

linewidth:0,

Fill:true,

fillcolor:{colors: [{opacity:0.8}, {opacity:0.1}]}

}

Flot currently only supports vertical gradients from the top of the chart to the bottom, because IE can only do so.

----------

Plot Methods method

----------

The object returned by the plot function has some of the following methods to invoke:

1. Highlight (Series,datapoint)//Activation Data point series: Curve number, Datapoint: Number of data points in the Curve data series, numbering starting from 0 for example: Highlight (1, 1) Activates the second data point of the second curve

Datapoint can also be a real data object for a data point, an array, for example: Highlight (1, [3,6]) to activate points on the second curve with the coordinates [3,6]

If the data point for the specified coordinate is not on the curve, the data point to be activated is still displayed in the color of the curve

2. Unhighlight (Series,datapoint) or unhighlight ()//Cancel the activation effect of data points, with the same parameters as highlight

If Unhighlight () does not have a parameter set, the activation status of all data points is canceled

3. SetData (data)

Re-set the curve data, the parameter data is the data parameter in plot (placeholder, data, options) and can not contain the options settings.

After you reset the data, if you need to change the chart display immediately, call the Draw () method to redraw the chart

Note that the SetData () method does not reset the axis scale, scale, curve name, and so on, and if you need to modify these properties, use the Setupgrid () method.

If you know beforehand that the axis does not need to change after resetting the data, you can use SetData (data) to set the data and then call Draw () to quickly redraw the curve

If the amount of data is large, the draw () method may take a long time, so there may be a little delay, so don't be confused.

4. Setupgrid () Modify the axis, scale, curve name, etc., parameters are options do not include the data section.

Note that this method does not redraw the curve and immediately modifies the tick label and the curve name, because these properties are implemented as DOM nodes.

Properties implemented within the canvas tag, such as tick marks, you need to call the draw () method to redraw the properties implemented within the canvas tag.

It should be noted that if the axis is not on the original chart and the axis is present after the Setupgrid () is set, then the axis will be stacked on the grid.

5. Draw () redraw the canvas of the chart

Triggerredrawoverlay () Add a canvas overlay on the icon, which is useful for the development of the chart plug-in, especially for dynamic interactive settings

For example, pop up a drop-down menu or add a highlight.

This method does not immediately draw the set canvas content, and the timing of the drawing can be triggered by setting a delay or mouse event.

6. Width ()/height () Gets the width and height of the chart grid, and the width-height value is smaller than the size of the canvas and placeholder.

7. Offset () Gets the coordinates of the drawing area of the chart relative to the document, and the mouse event triggers the obtained document coordinates minus that coordinate to get the position offset of the current position relative to the plot area.

Offset (). Left, offset (). Top Gets the right offset and the top offset.

8. Pointoffset ({x:xpos, y:ypos})

Gets the offset of the location of a number of points relative to the placeholder. Note that this is not relative to the canvas, but rather to the DIV

You can specify the number of axes used for the values of the points, and the first coordinate system is used by default.

Pointoffset ({x:3, y:3.5}). Left Pointoffset ({x:3, y:3.5}). Top is the offset of the data point (3,3.5) position, respectively, relative to the container div.

Here are some ways to get chart-related properties:

1. GetData () gets data from the plot (placeholder, data, options) function and the options composite.

GetData () does not simply return the data parameter of the function, he is an array, the information inside contains the information of this curve,

Includes options, each parameter setting for each curve, including values for default settings and formatting functions

Note that the parameter differs from SetData (), Oo.setdata (data), then data!= Oo.getdata ().

Cases:

var series = Plot.getdata ();

for (var i = 0; I <series.length; ++i) alert (series[i].color); The color of the curve is popped one by one.

2. Getaxes () The method returns a JSON object with the axis information, which has four members, Xaxis, YAxis, X2axis, y2axis four axes respectively

The internal axis contains a variety of information (specific information can be converted to a string of JSON object to look at, here is not detailed, this article will be serialized JSON object into a string method)

For example, get the X axis first tick label: Getaxes (). Xaxis.ticks[0].label

3. Getplaceholder () Gets the chart container div, which returns a JSON object.

4. Getcanvas () Gets the drawing area canvas, which returns a JSON object.

5. Getplotoffset () Gets the distance between the edge of the raster and the canvas edge, with the number of axes on one side spaced larger because the grid needs to be scaled down to prevent the axis from stacking on the grid.

The method returns a JSON object that is shaped like {left:36,right:6,top:6,bottom:20}.

6. GetOptions () Gets the options parameter of the drawing function, and returns a JSON object

-------------

Event Hooks

-------------

In addition to various methods, Flot also provides a number of event hooks that you can use to set callback functions for event hooks during chart drawing to modify the chart drawing process, which has permission to work with flot internal data structures.

Here are the steps for Flot drawing:

1. Initialize the introduced plug-in (if any) settings, parse options parameter settings

2. Create a canvas label

3. Set the data: Parse the data settings, determine the curve color, the original data point data format into the format of the curve, determine the length and scale of the axis

4. Grid settings: Calculate the axis scale and scale label, set the curve name

5. Drawing: Drawing grids and curves

6. Set the Listener event function for interaction

7. If present, trigger event

Flot Chinese Document Simplified version