JQuery plug-in Flot learning the principle of Canvas Drawing Graphics

Next we will introduce you to a very good jQuery graphics rendering plug-in Flot. Here I have sorted out some examples of Canvas graphics. I hope this article will help you.

Flot uses Canvas to draw images (there are three common ways to draw images on the Web. If you are not familiar with it, please read this article). When the data volume is very large, you need to considerBrowserPerformance issues. By the way, D3 uses SVG to draw images. In my own experience, SVG will be smoother for dragging images.

First, we will introduce the data format. Data comes from an array nested JSON format, such:

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

In this case, a two-dimensional graph is given to draw several points of the link.

Data can be directly transmitted to the Flot through the API, so that it determines the data display status on its own:

The Code is as follows:	Copy code
$ (Function () {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]; // a null signifies separate line segments var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]; $. plot ($ ("# placeholder"), [d1, d2, d3]);});

This is an example on the official website. The code is concise. From the data point of view, it is actually a layer-3 array nesting:

The first layer is coordinate;

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

The third layer is the arrangement of different lines.

You can see this pattern:

You can also specify an object called "series" on the third layer of the array instead of simply displaying data to specify the display form of the line you want, for example:

The 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: d3, points: {show: true },{ data: d4, lines: {show: true }}, {data: d5, lines: {show: true}, points: {show: true }}, {data: d6, lines: {show: true, steps: true}]);

The format is as follows:

There are three types of line, line, point, and bar in total. Of course, they can also be a combination of these three types.

For the presentation of different coordinate axes (axes) and different coordinate units, for example, the horizontal axis inside represents the time, in the format of "yyyy/mm/dd", the vertical axis represents the driving mileage, the format is "xxx (km)". To solve this problem, you need to do the following:

First, we need to convert all the data into pure integer or floating-point values so that Flot can identify the data format. For example, the time is changed to milliseconds, and the mileage is changed to kilometers;

Then customize the callback function displayed on the coordinate axis. For example:

The Code is as follows:	Copy code
{Position: "left", tickFormatter: KMFormatter, show: true, labelWidth: 30, show: true}

Flot supports multiple X-axis or multiple y-axes. In this case, you only need to specify the sequence numbers of the axes corresponding to the data in series to achieve the multi-axis effect:

There are two other concepts that need to be mentioned. One is "legend", which is the icon displayed in the graph (such as the lower left corner) or outside the graph. It is used to identify the meanings of the lines of different colors in the graph; there is also a grid, that is, the grid in the graph, which also includes the scale of the coordinate axis and the border of the graph.

This is the concept of the mind. Flot APIs are designed very concisely, so there are few things to learn and you can get started immediately.

For specific information, you can read its official API documentation, which is very useful. However, there is still a lot of information that needs to be obtained by reading the source code (especially many of its plug-ins have no documentation ), the source code is clearly written.

Useful plug-ins include the following:

Supports image drag and drop and image scaling plug-ins, which can be combined to implement functions like Google maps;

Plug-ins selected by the Region;

In addition, Cross Hair can display a vertical line at the cursor position of the image to compare the corresponding values.