利用Jqplot制作图表信息
直接上源码
<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(引用路径自行修改)
<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" />
后台数据处理代码：
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();
前端处理代码：
$(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
