首先，我创建了一个类，用来序列化成json格式用的，然后传递给前台用的(我这里是mvc的，所以最后直接returnJson(ReportData)就可以了，如果你是webform那么你需要newtonsoft.dll
publicclassReportData
{
publicstring[]categories{get;set;}
publicListReportItems=newList();
}
publicclassReportItem
{
publicstringname{get;set;}
publicdecimal?[]data{get;set;}
publicbool?sliced{get;set;}
publicbool?selected{get;set;}
publicdecimal?y{get;set;}
}
你的这个图，我也正好用了。
然后是去查询数据
publicReportDataGetReprotData_Month(intWD_ProductSite_Id,DateTime?beginTime,DateTime?endTime)
{
//查询数据我就不贴出来了。q就是查询到的数据
ReportDatareportData=newReportData();
reportData.categories=q.Select(x=>x.createMonth).ToArray();
ReportItemri1=newReportItem()
{data=q.Select(x=>x.AgentUsed).ToArray(),name="AgentUsed",selected=true,sliced=true};
reportData.ReportItems.Add(ri1);
ReportItemri2=newReportItem()
{data=q.Select(x=>x.Emission).ToArray(),name="Emission"};
reportData.ReportItems.Add(ri2);
returnreportData;
}
这里是数据库通过存储过程，查询出的数据格式
前台绑定：
pie-legend
ajax方法：
$.ajax({
url:"IndexGetReportData_Month",
type:"post",
success:function(data){
columnBasic(data.categories,data.ReportItems);
}
});
//column-basic
functioncolumnBasic(categories,series)
{
$('#container').highcharts({
chart:{
type:'column'
},
title:{
text:'MonthlyAverageRainfall'
},
subtitle:{
text:'Source:WorldClimate.com'
},
xAxis:{
categories:categories,
crosshair:true
},
yAxis:{
min:0,
title:{
text:'Rainfall(mm)'
}
},
tooltip:{
headerFormat:'{point.key}',
pointFormat:'{series.name}:'+
'{point.y:.1f}mm',
footerFormat:'',
shared:true,
useHTML:true
},
plotOptions:{
column:{
pointPadding:0.2,
borderWidth:0
}
},
series:series
});
}
最后看一下效果
|
