jqPlot jquery's page chart drawing tool_jquery

jqplot is based on a basic jqplot.js file and has plug-ins supported by multiple js files - that is to say, the jqplot.js file can only support the drawing of line charts. For pie charts, histograms and other graphics, pieRenderer needs to be introduced. .js and other files.
Here we refer to the official documentation of jqPlot, taking a pie chart as an example to briefly explain the usage of jqPlot:
The first step is to introduce the js file (if you are drawing other charts other than line charts, you need to introduce related js file, the pie chart file pieRenderer is introduced here)

Copy code The code is as follows:

< ;!--[if IE]>

The second step is to add a container for the chart display area

Copy the code The code is as follows:

The third step, get the data

Copy the code The code is as follows:

line1 = [ ['frogs', 3], ['buzzards', 7], ['deer', 2.5], ['turkeys', 6], ['moles', 5], ['ground hogs', 4]];

The fourth step is to configure the Option object and create the chart

Copy the code The code is as follows:

$.jqplot('chart', [line1], {
title:'pieRenderer ',//Set the title of the pie chart
seriesDefaults: {fill: true,
showMarker: false,
shadow: false,
renderer:$.jqplot.PieRenderer,
rendererOptions:{
diameter: undefined, // Set the diameter of the pie
padding: 20, / / The distance between the pie and its category name box or chart border, disguised as the diameter of the pie
sliceMargin: 9, // The distance between each part of the pie
fill:true, // Set each part of the pie Partially filled state
shadow:true, //Set a shadow for the border of each part of the pie to highlight its three-dimensional effect
shadowOffset: 2, //Set the shadow area to offset the border of each part of the pie distance
shadowDepth: 5, // Set the depth of the shadow area
shadowAlpha: 0.07 // Set the transparency of the shadow area
}
},
legend:{
show: true , //Set whether the category name box appears (that is, the names of all categories appear at a certain location in the picture)
location: 'ne', // The location where the category name box appears, nw, n, ne, e, se, s, sw, w.
xoffset: 12, // The distance between the category name box and the upper border of the chart area (unit px)
yoffset: 12, // The distance between the category name box and the left border of the chart area (unit px)
}
});

The complete code is as follows:

Copy code The code is as follows:

"http://www.w3.org/TR/html4/loose.dtd">

生成图表展示如下：

下面是一些其他类型的图标的截图：

1.多纵轴图

2.带提示信息的甘特图

3.以table方式展示提示信息的甘特图

4.带提示信息的线状图（可拖动）

对于jqPlot功能的具体介绍请关注本文的后续文章——jqPlot的Option配置对象详解。