这个使用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();
};
效果图例
