Web front-end chart draw jquery Plugin Jqplot

Before using Chart.js, Highcharts, first understand the advantages and disadvantages of the two plug-ins, and then to learn about Jqplot.

1.Chart

Chart Chinese official website: http://chartjs.cn/

1.1 Advantages:

1.1.1Chart is a plain JavaScript library based on HTML5 emoticons developed by canvas, Chart.js (44KB) Chart.min.js (20KB), only need to refer to a file to get it done, very clean and comfortable.

1.1.2Chart can support six types of icons: line, column (bar), Pie (PIE), doughnut (doughnut), radar chart (Radar), level map (Polararea)

1.2 Disadvantages:

1.2.1 lacks a textual description of the data meaning that each color block hint represents, such as the data meaning that each polyline represents when multiple polylines appear in a polyline chart

1.2.2 A detailed data description for which the focus of the line is missing, for example: polyline or column specific data value display for each node

1.2.3. Missing the x, Y axis annotation description and data unit dimensions for the line chart, for example: the need to mark the y-axis of the line chart represents the transaction amount

2.Highcharts

Highcharts Chinese official website: http://www.hcharts.cn/

2.1 Advantages

2.1.1Highcharts is a rich and powerful JavaScript library with a wide range of chart types

2.1.21Highcharts supports graphs, area charts, histograms, pie charts, scatter plots, and integrated charts, and can also customize the effects you want.

2.2 Disadvantages

The 2.2.1Highcharts is divided into personal and commercial editions, and some complex effects require separate charges.

3.jqplot

The main point here is Jqplot, because after comparison, the final project chose it, however Jqplot is also a very powerful JS chart plugin.

Jqplot is a jquery-based chart plugin with strong extensibility and the key to open source.

Since there are many plugins under the Jqplot document that are used in different scenarios, here is a brief introduction.

Jqplot official: http://www.jqplot.com/

Currently the latest version is Jquery.jqplot.1.0.9.d96a669.zip

How to use the files after decompression:

If no special configuration is required, the Jqplot Master file can be introduced directly.

<script src="~/scripts/jquery.jqplot/jquery.min.js"></script><script src="~/scripts/jquery.jqplot/jquery.jqplot.min.js"></script><link href= " ~/scripts/jquery.jqplot/jquery.jqplot.min.css  "rel="stylesheet "/>

* If your browser does not support HTML5 canvas, then you must introduce "Excanvas.js", plugins folder for the Jqplot extension function JS Library.

Important: The role of each JS library under plugins

1.plugins/jqplot.barrenderer.min.js

Used primarily to display an axis with a date format, it enhances the local data processing capability of JavaScript, and it supports almost all date formats.
It also provides a powerful formatting feature that formats date strings in your data in the format you want and displays them on the tick marks of the axis.

2.plugins/jqplot.categoryaxisrenderer.min.js

The main use is to display the value displayed at the scale between the two ticks, and of course the meaning of the expression changes, because the value at the tick represents the value at a point, and it represents a range of values.
It is more suitable for use in conjunction with bar charts.

3.plugins/jqplot.barrenderer.min.js

It is mainly used for displaying histogram, and it is very good to control the distance between each group (in each classification at a scale value) and the bar chart, which can be displayed horizontally.

4.plugins/jqplot.cursor.min.js

Mainly used for the mouse to move to the diagram, the mouse in the figure display form, commonly used with and highlighting function at the same time.

5.plugins/jqplot.highlighter.min.js

It is mainly used to display a cue bar near the mouse when the mouse moves over a data point in the diagram, and to display the relevant information in the Cue bar. The default display value is the horizontal axis scale value. Of course, the information in the prompt box can be customized according to your own needs.
6.plugins/jqplot.logaxisrenderer.min.js

Used primarily to generate scale values on an axis in the form of exponential calculations. By default, the scale values are displayed evenly, but the scale values can also be displayed as exponential growth.

7.plugins/jqplot.ohlcrenderer.min.js

Used primarily to display Gantt charts. Typically, this renderer is used with dateaxisrenderer more

8.plugins/jqplot.dragable.min.js

The user is able to drag a data point, and Jqplot automatically re-draws the dragged new chart. At the same time, the data value of the dragged data point changes as the drag occurs.

9.plugins/jqplot.trendline.min.js

It is mainly used for linear regression calculation of existing data and automatically displays the result of the calculation as a trendline, and when the user drags a data point, the trendline also changes with the user dragging.

10.plugins/jqplot.pointlabels.min.js

It is mainly used to place the information related to the data node in the vicinity of the data node, and its label is not displayed for the corresponding data.

With the above for each plug-in introduction, in the actual use in order to better, flexible to achieve the need to show the effect.

1.jqplot Line Chart

Web front-end chart draw jquery Plugin Jqplot