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的方式，所以用表格模拟。实际可以使用对象。

实例代码下载

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