Jqplot is based on a basic jqplot.js file, and has a number of JS file support Plug-ins-that is, jqplot.js files can only support the drawing of the line diagram, for pie chart, histogram and other graphics need to introduce pierenderer.js and other documents.
Here, refer to the official document of Jqplot, take the pie chart as an example to briefly describe the use of Jqplot:
The first step, the introduction of JS file (if you are drawing a line diagram other than the chart, you need to introduce the relevant JS file, here to introduce a pie chart file pierenderer)
Copy Code code as follows:
<!--[if Ie]><script language= "javascript" type= "Text/javascript" src= "./excanvas.js" ></script> <! [endif]-->
<link rel= "stylesheet" type= "Text/css" href= "/jquery.jqplot.css"./>
<script language= "javascript" type= "Text/javascript" src= "./jquery-1.3.2.min.js" ></script>
<script language= "javascript" type= "Text/javascript" src= "./jquery.jqplot.js" ></script>
<script language= "javascript" type= "Text/javascript" src= "./plugins/jqplot.pierenderer.js" ></script>
Step two, add a container for the chart display area
Copy Code code as follows:
<div id= "Chart" style= "margin-top:20px; margin-left:20px; width:460px; height:500px; " ></div>
Step three, get the data
Copy Code code as follows:
line1 = [[' Frogs ', 3], [' Buzzards ', 7], [' Deer ', 2.5], [' Turkeys ', 6], [' Moles ', 5], [' Ground hogs ', 4]];
Step Fourth, configure the option object and create a chart
Copy Code code as follows:
$.jqplot (' Chart ', [line1], {
Title: ' Pierenderer ',//Set the caption 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,//pie distance from its category name box or chart border, the diameter of the table cake in disguise
Slicemargin:9,//the distance between each part of the pie
Fill:true,//Set the status of each part of the pie to be filled
Shadow:true,//sets the shadow of the border of each part of the pie to highlight its stereo effect
Shadowoffset:2,//sets the distance from the shadow area to the border of each part of the pie
Shadowdepth:5,//set depth of shaded area
shadowalpha:0.07//Set the opacity of the shaded area
}
},
legend:{
show:true,//whether the Category name box appears (that is, the name of all categories appears somewhere in the diagram)
Location: ' NE ',//Category name box appears position, NW, N, NE, E, SE, S, SW, W.
Xoffset:12,//Category name box distance from top border of chart area (px)
Yoffset:12,//Category name box distance from the left border of the chart area (px)
}
});
The complete code is as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"
"Http://www.w3.org/TR/html4/loose.dtd" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>simple test</title>
<!--[if Ie]><script language= "javascript" type= "Text/javascript" src= "./excanvas.js" ></script> <! [endif]-->
<link rel= "stylesheet" type= "Text/css" href= "/jquery.jqplot.css"./>
<script language= "javascript" type= "Text/javascript" src= "./jquery-1.3.2.min.js" ></script>
<script language= "javascript" type= "Text/javascript" src= "./jquery.jqplot.js" ></script>
<script language= "javascript" type= "Text/javascript" src= "./plugins/jqplot.pierenderer.js" ></script>
<script type= "Text/javascript" language= "JavaScript" >
$ (document). Ready (function () {
line1 = [[' Frogs ', 3], [' Buzzards ', 7], [' Deer ', 2.5], [' Turkeys ', 6], [' Moles ', 5], [' Ground hogs ', 4]];
PLOT1 = $.jqplot (' chart ', [line1], {
Title: ' Pierenderer ',//Set the caption 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,//pie distance from its category name box or chart border, the diameter of the table cake in disguise
Slicemargin:9,//the distance between each part of the pie
Fill:true,//Set the status of each part of the pie to be filled
Shadow:true,//sets the shadow of the border of each part of the pie to highlight its stereo effect
Shadowoffset:2,//sets the distance from the shadow area to the border of each part of the pie
Shadowdepth:5,//set depth of shaded area
shadowalpha:0.07//Set the opacity of the shaded area
}
},
legend:{
show:true,//whether the Category name box appears (that is, the name of all categories appears somewhere in the diagram)
Location: ' NE ',//Category name box appears position, NW, N, NE, E, SE, S, SW, W.
Xoffset:12,//Category name box distance from top border of chart area (px)
Yoffset:12,//Category name box distance from the left border of the chart area (px)
}
});
});
</script>
<body>
<div id= "Chart" style= "margin-top:20px; margin-left:20px; width:460px; height:500px; " ></div>
</body>
The chart is presented as follows:
de life" alt="jqPlot——基于jquery的页面图表绘制工具 - gaoyusi - My code life" src="yun_qi_img/20090725141503276.jpg">
Below are screenshots of some of the other types of icons:
1. Multi-longitudinal axis diagram
de life" alt="jqPlot——基于jquery的页面图表绘制工具 - gaoyusi - My code life" src="yun_qi_img/20090725141503880.jpg">
2. Gantt Chart with hint information
de life" alt="jqPlot——基于jquery的页面图表绘制工具 - gaoyusi - My code life" src="yun_qi_img/20090725141508678.jpg">
3. Gantt Chart showing tips in table format
de life" alt="jqPlot——基于jquery的页面图表绘制工具 - gaoyusi - My code life" src="yun_qi_img/20090725141508190.jpg">
4. The line chart with the hint information (can drag)
de life" alt="jqPlot——基于jquery的页面图表绘制工具 - gaoyusi - My code life" src="yun_qi_img/20090725141508242.jpg">
For a specific introduction to the Jqplot function, please pay attention to the following article--jqplot option Configuration object detailed.
