利用jqchart制作图表
2016-09-26 16:50
351 查看
这个是使用jqchart做的。。。
最终效果图例:
function jqChart() { if($("#startTime").val()>$("#endTime").val()||($("#startTime").val()>getNowFormatDate("month")&&$("#startTime").val()>getNowFormatDate())) { layer.msg("请输入正确时间"); return; } var BeginTime =$("#startTime").val(); var EndTime = $("#endTime").val(); var OptionType=$('input[name="optiontype"]:checked').val(); $.ajax({ url: '/WebUI_Index.aspx?method=GetData', type: 'POST', data: { BeginTime: BeginTime, EndTime: EndTime,OptionType:OptionType}, dataType: "json", cache: false, async: false, success: function (data) { var dataJson=[[],[],[],[]]; 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]); } } $('#jqChart').jqChart({ title: { text: '资金总览' }, tooltips: { type: 'shared' }, animation: { duration: 1 }, series: [ { type: 'line', title: '已付款', strokeStyle: '#418CF0', lineWidth: 2, data: dataJson[0] }, { type: 'line', title: '已收款', strokeStyle: '#FCB441', lineWidth: 2, data: dataJson[1] }, { type: 'line', title: '应付款', strokeStyle: '#0094ff', lineWidth: 2, data: dataJson[2] }, { type: 'line', title: '应收款', strokeStyle: '#b9b9b9', lineWidth: 2, data: dataJson[3] } ] }); }, error: function (jqXHR, textStatus, errorThrown) { layer.msg(jqXHR.responseText); } }); }
Dictionary<string, object> result = new Dictionary<string, object>(); List<Data> data = new List<Data>(); result.Add("access", getData_exec(all_amount)); result.Add("pay", GetList(GetTable(sql_pay), OptionType, day)); result.Add("received", GetList(GetTable(sql_received), OptionType, day)); result.Add("payable", GetList(GetTable(sql_payable), OptionType, day)); result.Add("receivable", GetList(GetTable(sql_receivable), OptionType, day)); string access = result["access"].ToString(); 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); JavaScriptSerializer jss = new JavaScriptSerializer(); string str = jss.Serialize(arrList); HttpContext.Current.Response.Clear(); HttpContext.Current.Response.Write(str); HttpContext.Current.Response.End();
最终效果图例:
![](https://images2015.cnblogs.com/blog/635975/201609/635975-20160926164952860-2064693137.jpg)
相关文章推荐
- 用 jQchart 制作图表的一个最简单的例子
- jQuery图表制作——jqchart的应用1
- (3)birt笔记 - chart图表相关-利用java script&java动态添加折线图表的折线数
- ajax读取数据后使用jqchart显示图表的方法
- Piktochart(制作信息图表)
- 用微软Chart制作图表
- ASP.NET的FusionChart制作图表
- Piktochart(制作信息图表)
- ajax读取数据,使用jqchart显示图表
- 利用MVC Chart 打造后台图表、前端图表(转)
- aChartEngine制作双y轴(barChart+TimeChart)图表(x轴为日期/时间)
- 利用Jqplot制作图表信息
- 安卓系统上制作图表的框架 AChartEngine
- sampleChart图表制作
- 利用Google Chart API直接制图表
- 利用chart.js制作环形进度条
- 使用Open Flash Chart(OFC)制作图表(Struts2处理)
- jQuery 图表插件 jqChart 使用