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

实例代码下载

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