利用jqchart制作图表

这个是使用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://www.cnblogs.com/myparadiseworld/p/5909764.html