HighCharts-Asp.net后台取Json数据模拟

博客缘起

    最近项目需要用的图表，发现HighCharts是一个好用的工具。图表美观大方，公共API调用简练。缺点是图表种类不是很多，但是已经足够用了。

    由于需要根据查询条件查询数据，从而更换图表种类、数据。经过网络搜索，发现多数文章巧合、雷同。最终归于一源：后天拼接字符串，前台接收后调用js方法eval，然后使用。这样带来两个坏处：1、代码不易维护，2、容易出现bug。

    由于自己个人喜欢传递Json对象，因此在实际例子当中从后台获取json对象，前台直接使用。这样，上面的两个问题自然解决。

代码展示

前台代码：

      <script src="../../Resource/Script/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../Resource/Script/HighCharts/highcharts.js" type="text/javascript"></script>
<script src="../../Resource/Script/HighCharts/modules/exporting.src.js" type="text/javascript"></script>
      使用HighCharts需要引用jquery.min.js,
highcharts.js, exporting.js。引用上述文件后，在前端js中设置初始options，这样，在Ajax查询数据后，方便重新初始化图表对象。

    var optionPie = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '浏览器市场份额'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
credits: {
enabled: false //右下角不显示LOGO
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
{ name: 'Safari',
y: 8.5
},
['Opera', 6.2],
['Others', 0.7]
]
}]
}
$(function () {
//页面初始化后加载数据
Query();

});
      在实际执行查询时，调用Asp.net的WebMethod，此后台方法必须为 public static类型。这样，总不如mvc的方法直观、易用。
     //实际查询数据
function Query() {

$.ajax({
type: 'POST',
async: false,
contentType: "application/json",
url: "GetDataByFaultType.aspx/GetTestCounts",//调用webform后台方法，可以更换为mvc方法
data: "{dataType:'" + $("#ddlChartType").val() + "'}",
dataType: "json",
beforeSend: function () {
},
success: function (msg) {
if (msg) {
$('#container').highcharts({
chart: optionPie.chart,
title: optionPie.title,
tooltip: optionPie.tooltip,
plotOptions: optionPie.plotOptions,
credits: optionPie.credits,
series: msg.d
});
}
},
error: function (errorMsg) {
}
});

}

      如此，就实现了前台方法Ajax调用后台数据。

后台代码：

      后台代码中，可以参照HighCharts的官方示例，将对象放入对象中。前台获取时会直接转换为Json对象使用。
  /// <summary>
/// 根据数据类型获取相关数据
/// </summary>
/// <param name="dataType">数据详细程度类别</param>
/// <returns></returns>
[WebMethod]
public static dynamic GetTestCounts(string dataType)
{
DataTable dt = GetCountByType(dataType);
List<dynamic> pies = new List<dynamic>();
foreach (DataRow dr in dt.Rows)//faulttypename,faultcount
{
pies.Add(new { name = dr["BrowserName"].ToString(), y = dr["Proportion"].ToString().ToDouble() });
}
var series = new dynamic[]
{
new { type="pie",name="饼图", data = pies.ToArray()}
};
return series;

}
       调用的模拟数据方法：
  /// <summary>
/// 生成模拟数据方法
/// </summary>
/// <param name="dataType"></param>
/// <returns></returns>
private static DataTable GetCountByType(string dataType)
{
DataTable demoDt=new DataTable();
demoDt.Columns.Add("BrowserName");
demoDt.Columns.Add("Proportion");
if(dataType.Equals("0"))//如果是详细比例，则插入详细数据
{
DataRow dr=demoDt.NewRow();
dr["BrowserName"]="Firefox";
dr["Proportion"]=26.8;
demoDt.Rows.Add(dr);

dr=demoDt.NewRow();
dr["BrowserName"]="IE";
dr["Proportion"]=45.0;
demoDt.Rows.Add(dr);

dr = demoDt.NewRow();
dr["BrowserName"]="Chrome";
dr["Proportion"]=12.8;
demoDt.Rows.Add(dr);

dr = demoDt.NewRow();
dr["BrowserName"]="Safari";
dr["Proportion"]=8.5;
demoDt.Rows.Add(dr);

dr = demoDt.NewRow();
dr["BrowserName"]="Opera";
dr["Proportion"]=6.2;
demoDt.Rows.Add(dr);

dr = demoDt.NewRow();
dr["BrowserName"]="Others";
dr["Proportion"]=.7;
demoDt.Rows.Add(dr);
}
else//如果是粗略比例，则插入较为粗略数据
{
DataRow dr=demoDt.NewRow();
dr["BrowserName"]="Firefox";
dr["Proportion"]=26.8;
demoDt.Rows.Add(dr);

dr=demoDt.NewRow();
dr["BrowserName"]="IE";
dr["Proportion"]=45.0;
demoDt.Rows.Add(dr);

dr = demoDt.NewRow();
dr["BrowserName"]="Chrome";
dr["Proportion"]=12.8;
demoDt.Rows.Add(dr);

dr = demoDt.NewRow();
dr["BrowserName"]="Others";
dr["Proportion"]=15.4;
demoDt.Rows.Add(dr);
}
return demoDt;
}
       为了模拟实际生产环境当中使用DataTable的方式，所以用表格模拟。实际可以使用对象。

实例代码下载

     实例代码已经上传到资源中，源码下载