利用jschart制作图表信息
这个使用jschart做的,但是出现一个问题,就是提示点由于滚动条的滑动会进行绝对定位,导致提示点于需要提示的地方不重合,暂时未找到解决办法,蛋疼。。。。。。
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)); JavaScriptSerializer jss = new JavaScriptSerializer(); string str = jss.Serialize(result); HttpContext.Current.Response.Clear(); HttpContext.Current.Response.Write(str); HttpContext.Current.Response.End();
function PaintChart() { 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(); BeginTime="2016-01-01"; $.ajax({ url: '/WebUI_Index.aspx?method=GetData', type: 'POST', data: { BeginTime: BeginTime, EndTime: EndTime,OptionType:OptionType}, dataType: "json", cache: false, async: false, success: function (obj) { var myArray0 = new Array(); var myArray1 = new Array(); var myArray2 = new Array(); var myArray3 = new Array(); $(obj.pay).each(function () { myArray0.push([this.time, this.amount]); }); $(obj.received).each(function () { myArray1.push([this.time, this.amount]); }); $(obj.payable).each(function () { myArray2.push([this.time, this.amount]); }); $(obj.receivable).each(function () { myArray3.push([this.time, this.amount]); }); linePaint("统计图形表", myArray0, myArray1, myArray2, myArray3, "访问", "登陆", "下载", "注册", "chartContainer"); }, error: function (jqXHR, textStatus, errorThrown) { layer.msg(jqXHR.responseText); } }); } //线状,对比 function linePaint(title, myArray0, myArray1, myArray2, myArray3, legend0, legend1, legend2, legend3, divId) { var lineChart = new JSChart(divId, 'Line'); lineChart.setDataArray(myArray0, legend0); lineChart.setDataArray(myArray1, legend1); lineChart.setDataArray(myArray2, legend2); lineChart.setDataArray(myArray3, legend3); lineChart.setLineColor('#FF0000', legend0); //注:第一条线的颜色 lineChart.setLineColor('#00FF00', legend1); //注:第二条线的颜色 lineChart.setLineColor('#0000ff', legend2); //注:第3条线的颜色 lineChart.setLineColor('#ff6a00', legend3); //注:第4条线的颜色 lineChart.setSize(720, 360); //注:宽度500,、高度:300 lineChart.setTitle(title); //图表标题 lineChart.setTitleFontSize(15);//图表标题大小 lineChart.setLegendShow(true); //显示图例 lineChart.setLegendPosition('right top'); //图例显示位置(可以是相对位置或坐标) lineChart.setAxisNameX("时间"); lineChart.setAxisNameColorX("#ff0000"); lineChart.setAxisNameColorY("#ff0000"); lineChart.setAxisNameY("次数"); lineChart.setGraphExtend(true); lineChart.setTextPaddingLeft(10) lineChart.setIntervalStartY(-100); lineChart.setAxisPaddingLeft(50); lineChart.setAxisPaddingRight(50); lineChart.setTooltipOpacity(0); lineChart.setTooltipFontSize(18); lineChart.setAxisPaddingBottom(40); lineChart.setTextPaddingBottom(10); lineChart.setIntervalStartY(0); lineChart.setFlagRadius(4); lineChart.setTooltipBorder("1px solid #000"); lineChart.setAxisColor('#8420CA'); lineChart.setAxisValuesColor('#949494'); lineChart.setAxisPaddingLeft(100); lineChart.setAxisPaddingRight(120); lineChart.setAxisPaddingTop(50); lineChart.setAxisPaddingBottom(40); lineChart.setAxisValuesDecimals(3); lineChart.setAxisValuesNumberX(10); lineChart.setShowXValues(false); lineChart.setGridColor('#C5A2DE'); lineChart.setLineWidth(2); lineChart.setFlagColor('#9D12FD'); lineChart.setFlagRadius(4); for (var i = 0; i < myArray0.length; i++) { lineChart.setTooltip([myArray0[i][0], legend0 + " " + myArray0[i][1], legend0]); lineChart.setTooltip([myArray1[i][0], legend1 + " " + myArray1[i][1], legend1]); lineChart.setTooltip([myArray2[i][0], legend2 + " " + myArray2[i][1], legend2]); lineChart.setTooltip([myArray3[i][0], legend3 + " " + myArray3[i][1], legend3]); } lineChart.draw(); };
效果图例