jqPlot jquery's page chart drawing tool

jqPlot jquery's page chart drawing tool_jquery

WBOY

Release： 2016-05-16 18:49:18

Original

1479 people have browsed it

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"> 

Simple Test

生成图表展示如下：