jquery Plugin Flot Learn the principle of drawing canvas

Flot uses canvas to draw graphics (the web altogether has three common ways to draw graphics, do not understand the classmate please read this article), when the amount of data is very large, you need to consider the browser side performance problems. Incidentally, D3 is using SVG to draw graphics, and from my own experience, SVG will be smoother for dragging graphs.

First, introduce the format of the data. Data comes from an array of nested JSON formats, such as:

The code is as follows	Copy Code
[[0, 3], [4, 8], [8, 5], [9, 13]]

This gives a two-dimensional graph to draw a few points on the line.

The data can be passed directly through the API to the Flot, allowing it to determine the appearance of the data display:

The code is as follows	Copy Code
$ (function () {var d1 = []; for (var i = 0; i + = 0.5) D1.push ([I, Math.sin (i)]); var d2 = [[0, 3], [4, 8], [8, 5] , [9, 13]]; A null signifies separate line segments var d3 = [[0], [7, a], NULL, [7, 2.5], [12, 2.5]]; $.plot ($ ("#placeholder"), [D1, D2, D3]); }）;

This is the official online example, the code is very concise. The data, in fact, is a three-tier array nesting:

The first layer is the point coordinate;

The second layer is the point sequence within the same line;

The third layer is the arrangement of different lines.

You can see a pattern like this:

You can also specify the form of the line you want to display in the third layer of the array, given an object called "series," rather than simply data, such as:

code is as follows

copy code

var d1 = []; for (var i = 0; I "14; i + = 0.5) D1.push ([I, Math.sin (i)]); var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; var d3 = []; for (var i = 0; I "14; i + = 0.5) D3.push ([I, Math.Cos (i)]); var d4 = []; for (var i = 0; I "14; i + = 0.1) D4.push ([I, Math.sqrt (i * 10)]); var d5 = []; for (var i = 0; I "14; i + = 0.5) D5.push ([I, Math.sqrt (i)]); var d6 = []; for (var i = 0; I "14; i + = 0.5 + math.random ()) D6.push ([I, Math.sqrt (2*i + math.sin (i) + 5)]); $.plot ($ ("#placeholder"), [{data:d1, lines: {show:true, Fill:true}}, {data:d2, bars: {show:true}}, {Data:d 3, Points: {show:true}}, {data:d4, lines: {show:true}}, {data:d5, lines: {show:true}, points: {show:true }, {data:d6, lines: {show:true, steps:true}}];

Shown in the following form:

With respect to line type, there are three types of lines, point, bar, which can be selected, and of course, these three kinds of combinations.

For different axes (axes) and different coordinate units of the display, such as inside the horizontal axis to represent the time, the format "Yyyy/mm/dd", the longitudinal axis of the mileage, the format is "xxx (km)", to solve such problems, you need to do is:

First you need to value all of the data, that is, to become pure plastic or floating-point values, so that flot can identify the format of the data, such as time to become milliseconds, mileage into a kilometer number;

Then customize the callback function for the axis display. For example:

The code is as follows	Copy Code
{position: "Left", Tickformatter:kmformatter, Show:true, labelwidth:30, show:true}

Flot is supported by multiple x axes or multiple y-axis axes, in which case the multi-axis effect can be achieved by specifying the ordinal of the corresponding axis of the data in series:

There are two other concepts that need to be mentioned, one is "legend", it is shown in the diagram (for example, the lower left corner of the above image) or the diagram outside the graph, which identifies what the line of different colors in the diagram means, and one is called "grid", which is the grid in the diagram, and the scale of the axes and the borders of the graphics.

The concept of the heart is these, Flot API design is very concise, so the need for extra learning is very few things, immediately can use.

Specific information, you can read its official API documentation, which is very useful, but there is a lot of information is needed to read the source (especially many of its plug-ins are not what the document), the source code is very clear.

Some of the more useful plug-ins include these:

Support image drag and image scaling Plug-ins, the two can be combined to achieve the same functions as Google Maps;

Regional selection of Plug-ins;

And this: Cross Hair, you can display a vertical position on the mouse position of the image to make it easier to compare the corresponding values.