Highcharts报表 饼状图编程代码

第一步：http://www.hcharts.cn/demo/highcharts   官网下载Highcharts包，并且解压，引入项目

第二步：创建页面，找到 以下js文件   Highcharts-4.2.6/js/highcharts.js

第三步：创建js文件 ，js代码

 $(function () {
            $("#btnSave").click(function () {
                istxt();
                var txtBeginTime = $("#txtBeginTime").val();
                var txtEndTime = $("#txtEndTime").val();
                $.ajax({
                    type: "POST",
                    url: "TjQy1.aspx/btnSaveGetInitForm",
                    data: "{'tjsjq':'" + txtBeginTime + "','tjsjz':'" + txtEndTime + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (results) {
                        var arary = eval(results.d);
                        console.log(arary);
                        var output = [];
                      
                        for (var i in arary) {
                            
                            output.push([arary[i].Key, arary[i].Value]);
                        }
                       


                        $('#container').highcharts({
                            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,
                                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                                        style: {
                                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                                        }
                                    }
                                }
                            },


                            series: [{ type: 'pie', name: '企业数量', data: output}]
                        });
                    }
                });
            })
           
        })

第四步：页面html部署

 <meta http-equiv="content-type" content="text/html;charest=utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=8" />
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>

 <input type="button" id="btnSave" value="查询" class="blue_30_btn" />

 <div id="container" style="min-width: 400px; height: 400px">
   </div>

第五步 页面后端代码 创建 查询按钮事件

//点击查询
        [WebMethod]
        public static string btnSaveGetInitForm(string tjsjq, string tjsjz)
        {
            DataTable dt = Qhchanglike.TJqy("estdate>='" + tjsjq + "' and estdate<='" + tjsjz + "'").Tables[0];
            int lm= Convert.ToInt32(dt.Rows[0]["列名1"]);
            int lmtew = Convert.ToInt32(dt.Rows[0]["列名2"]);
            List<IDictionary<string, object>> list = new List<IDictionary<string, object>>();
            IDictionary<string, object> transferParams = new Dictionary<string, object>();


            transferParams.Add("Key", "列名1");
            transferParams.Add("Value", lm);
            list.Add(transferParams);


            transferParams = new Dictionary<string, object>();
            transferParams.Add("Key", "列名2");
            transferParams.Add("Value", lmtew);
            list.Add(transferParams);






            JavaScriptSerializer jss = new JavaScriptSerializer();


            return jss.Serialize(list);


        }

详细请点：http://www.hcharts.cn/demo/highcharts

有什么不懂的请评论，也可以探讨