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

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