利用Jqplot制作图表信息
直接上源码
1 2 3 4 5 6 7 8 9 10 | < body > < div id="chart1" style="width: 820px; height: 360px;"> </ div > </ body >< input type="radio" class="radioItem" name="optiontype" checked="checked" value="0" style="height: 20px; width: 20px; vertical-align: middle;" />< lable style="vertical-align: middle;">按月查询</ lable > < input type="radio" class="radioItem" name="optiontype" value="1" style="height: 20px; width: 20px; vertical-align: middle;" />< lable style="vertical-align: middle;">按日查询</ lable > < input type="text" id="startTime" class="Wdate" style="width: 110px;" onfocus="selectChange()" /> 至 < input type="text" id="endTime" class="Wdate" style="width: 110px;" onfocus="selectChange()" /> < input type="button" id="serach" title="点击查询" value="点击查询" onclick="laodData()" /> |
引用js(引用路径自行修改)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | < script src="Scripts/jquery.min.js" type="text/javascript"></ script > < script src="../Scripts/src/jquery.jqplot.js" type="text/javascript"></ script > < script src="../Scripts/src/excanvas.js" type="text/javascript"></ script > < script src="../Scripts/src/plugins/jqplot.canvasTextRenderer.js" type="text/javascript"></ script > < script type="text/javascript" src="Scripts/src/plugins/jqplot.canvasAxisTickRenderer.js"></ script > < script type="text/javascript" src="../Scripts/src/plugins/jqplot.dateAxisRenderer.js"></ script > < script src="Scripts/src/plugins/jqplot.pointLabels.js" type="text/javascript"></ script > < script type="text/javascript" src="../Scripts/src/plugins/jqplot.barRenderer.js"></ script > < script type="text/javascript" src="../Scripts/src/plugins/jqplot.categoryAxisRenderer.js"></ script > < script type="text/javascript" src="../Scripts/src/plugins/jqplot.cursor.js"></ script > < script type="text/javascript" src="../Scripts/src/plugins/jqplot.highlighter.js"></ script > < script type="text/javascript" src="../Scripts/src/plugins/jqplot.dragable.js"></ script > < script type="text/javascript" src="../Scripts/src/plugins/jqplot.trendline.js"></ script > < script type="text/javascript" src="../Scripts/src/plugins/jqplot.highlighter.js"></ script > < script src="Scripts/src/plugins/jqplot.json2.js" type="text/javascript"></ script > < link href="../Scripts/src/jquery.jqplot.min.css" rel="stylesheet" /> |
后台数据处理代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | Dictionary< string , object > result = new Dictionary< string , object >(); List<Data> data = new List<Data>(); result.Add( "pay" , GetList(GetTable(sql_pay)); result.Add( "received" , GetList(GetTable(sql_received)); result.Add( "payable" , GetList(GetTable(sql_payable)); result.Add( "receivable" , GetList(GetTable(sql_receivable)); List<statistics> pay = result[ "pay" ] as List<statistics>; List<statistics> received = result[ "received" ] as List<statistics>; List<statistics> payable = result[ "payable" ] as List<statistics>; List<statistics> receivable = result[ "receivable" ] as List<statistics>; ArrayList arrList = new ArrayList(); arrList.Add(pay); arrList.Add(received); arrList.Add(payable); arrList.Add(receivable); StringBuilder sb = new StringBuilder(); JavaScriptSerializer jss = new JavaScriptSerializer(); jss.Serialize(arrList, sb); HttpContext.Current.Response.Clear(); HttpContext.Current.Response.Write(sb.ToString()); HttpContext.Current.Response.End(); |
前端处理代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | $(document).ready( function () { laodData(); }); function laodData() { var dataJson = [[],[],[],[]]; var BeginTime =$( "#startTime" ).val(); var EndTime = $( "#endTime" ).val(); var OptionType=$( 'input[name="optiontype"]:checked' ).val(); $.ajax({ type: 'POST' , data: { BeginTime: BeginTime, EndTime: EndTime,OptionType:OptionType}, async: true , url: '/WebUI_Index.aspx?method=GetData' , dataType: "json" , success: function (data) { //构造数组 for ( var i=0;i<data.length;i++) { var chObj = data[i]; for ( var j = 0; j < chObj.length; j++) { dataJson[i].push([chObj[j].time,chObj[j].amount]); } } dataJson.sort(); var opts = { title: '资金总览' , axesDefaults: { tickRenderer: $.jqplot.CanvasAxisTickRenderer , tickOptions: { fontSize: '10pt' , fontFamily: 'Tahoma' , fontWeight: 'bold' } }, seriesDefaults: { showMarker: true , pointLabels: { show: true , edgeTolerance: 5 }, markerOptions: { show: true , // 是否在图中显示数据点 style: 'filledCircle' // 各个数据点在图中显示的方式,默认是"filledCircle"(实心圆点), } }, series:[ {label: '已付金额' }, {label: '已收金额' }, {label: '应付金额' }, {label: '应收金额' }, {renderer:$.jqplot.CanvasAxisTickRenderer} ], legend: { show: true , location: 'se' }, axes: { xaxis: { show: true , xaxis: 'xaxis' , renderer: $.jqplot.CategoryAxisRenderer, tickOptions: { formatString: '' , showTicks: true , showTickMarks: true , angle: -40, show: true , showLabel: true , showGridline: true , showMark: true , useSeriesColor: true } }, yaxis: { renderer: $.jqplot.CategoryAxisRenderer, tickOptions: { formatString: '%.2f' , showMark: true , show: true , showTickMarks: true , showTicks: true } } }, highlighter: { show: true , showTooltip: true , sizeAdjust: 10, fadeTooltip: true , tooltipLocation: 'se' , tooltipFadeSpeed: "fast" , tooltipAxes: 'both' , tooltipSeparator: ', ' , tooltipFormatString: '%.5P' , useAxesFormatters: true }, cursor: { show: false } }; $( '#chart1' ).empty(); //用于清理上次查询得到的数据,否则会造成数据叠加,影响数据显示 var plot1 = $.jqplot( 'chart1' , [dataJson[0],dataJson[1],dataJson[2],dataJson[3]], opts); } }); } |
效果图例:
其他相关的参数说明看---http://www.cnblogs.com/mofish/archive/2011/08/15/2139728.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步