In the process of developing a project, need to show the funds of the account, in order to give customers a good experience we use columnar graphics, drawing process if the use of original eco-script to draw this more trouble, time will be longer, so we chose the Jqplot plug-in to draw, so that can save a lot of time, can also be shown to users soon.
Plugin official address: http://www.jqplot.com/
Specifically implemented as follows:
Refer to JS file:
Copy Code code as follows:
<link href= "~/scripts/asset/jqplot/jquery.jqplot.min.css" rel= "stylesheet"/>
<link href= "~/scripts/asset/jqplot/syntaxhighlighter/styles/shcoredefault.min.css" rel= "stylesheet"/>
<link href= "~/scripts/asset/jqplot/syntaxhighlighter/styles/shthemejqplot.min.css" rel= "stylesheet"/>
<script src= "~/scripts/asset/jquery-1.10.2.min.js" ></script>
<script type= "Text/javascript" src= "~/scripts/asset/jqplot/jquery.jqplot.min.js" class= "include" ></ Script>
<script type= "Text/javascript" src= "~/scripts/asset/jqplot/syntaxhighlighter/scripts/shcore.js" ></ Script>
<script type= "Text/javascript" src= "~/scripts/asset/jqplot/syntaxhighlighter/scripts/shbrushjscript.js" > </script>
<script type= "Text/javascript" src= "~/scripts/asset/jqplot/syntaxhighlighter/scripts/shbrushxml.js" ></ Script>
<script type= "Text/javascript" src= "~/scripts/asset/jqplot/excanvas.min.js" ></script>
<script type= "Text/javascript" src= "~/scripts/asset/jqplot/plugins/jqplot.barrenderer.min.js" ></script >
<script type= "Text/javascript" src= "~/scripts/asset/jqplot/plugins/jqplot.categoryaxisrenderer.min.js" > </script>
<script type= "Text/javascript" src= "~/scripts/asset/jqplot/plugins/jqplot.pointlabels.min.js" ></script >
HTML code
Copy Code code as follows:
<div id= "Chart1" class= "box" ></div>
JavaScript script:
Copy Code code as follows:
var chartbar = function () {
var data={param1:param1,param2:param2};//pass Parameter
$ ("#chart1"). HTML ("");//Drawing Div
var S1;
$.ajax ({
Type: "POST",
URL: '.. /home/accountsum ',
Data:data,
DataType: "JSON",
Async:false,
Success:function (d) {
if (D.flag) {
S1 = [Parsefloat (D.DATA.TOTAL1), parsefloat (D.data.total2), parsefloat (D.DATA.TOTAL3), parsefloat (D.DATA.TOTAL4), Parsefloat (D.DATA.TOTAL5), parsefloat (D.DATA.TOTAL6)];
} else {
S1 = [0.00, 0.00, 0.00, 0.00, 0.00, 0.00];
}
$.jqplot.config.enableplugins = true;
var ticks = [' recharge ', ' withdraw ', ' receivable ', ' sell ', ' refund ', ' verify '];
var plot1 = $.jqplot (' Chart1 ', [S1], {
Only animate if we are not using Excanvas (not in IE 7 or IE 8).
Animate:!$.jqplot.use_excanvas,
Seriesdefaults: {
Pointlabels: {show:true},
Shadow:false,
Showmarker:true,//whether to emphasize the data nodes in the display diagram
Renderer: $.jqplot. Barrenderer,
Rendereroptions: {
BARWIDTH:50,
Barmargin:50
}
},
Axes: {
Xaxis: {
Show:true,//whether axes are automatically displayed
Renderer: $.jqplot. Categoryaxisrenderer,
Ticks:ticks,
Showticks:true,//whether to display tick marks and tick values on the axis
Showtickmarks:true,//Set whether the scale is displayed
Tickoptions: {
Show:true,
FontSize: ' 14px ',
fontFamily: ' tahoma,arial, ' Hiragino Sans GB ', Song-Body b8b, Sans-serif ',
Showlabel:true,//whether to display tick marks and tick values on the axis
showmark:false,//whether the scale is displayed
Showgridline:false//Whether to display a grid of tick-value orientation in the chart area
}
},
YAxis: {
Show:true,
Showticks:false,//whether to display tick marks and tick values on the axis
Showtickmarks:false,//Set whether the scale is displayed
Autoscale:true,
Borderwidth:1,
Tickoptions: {
Show:true,
Showlabel:false,
Showmark:false,
Showgridline:true,
formatstring: ' ￥%.2f '
}
},
},
Grid: {
Drawgridlines:true,
Drawborder:false,
Shadow:false,
BorderColor: ' #000000 ',//Set the color of the (most outer) border of the chart
Borderwidth:1//Set the (most outer) border width of the chart
},
Highlighter: {Show:false}
});
},
Error:function () {
Alert ("Get graph statistics failed!");
}
});
};
Effect Chart:
Write here today, a preliminary look at the official case, the function is quite strong, the use is also very convenient, easy, according to the needs of this project, follow-up may be added. However, in the use of the process also found some problems, part of the implementation may not be satisfied.
