HighChart报表之饼图

个人认为HighChart做报表还是很不错的，从报表的样式还是性能都是很不错的选择。

1、新建一个html页面，命名为：ReportTest.html

　　 <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="js/Vendor.js"></script>
    <script type="text/javascript" src="js/report/highcharts.js"></script>   
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />

    <div id="container" style="min-500px;height:300px"></div>

2、新建一个js文件，命名为：ReportShow.js

$(function () { 
   var chart;
    $(document).ready(function () {
        chart = new Highcharts.Chart({
            //常规图表选项设置
            chart: {
                renderTo: "container",        //在哪个区域呈现，对应HTML中的一个元素ID
                plotBackgroundColor: null,    //绘图区的背景颜色
                plotBorderWidth: null,        //绘图区边框宽度
                plotShadow: false            //绘图区是否显示阴影            
            },

            //图表的主标题
            title: {
                text: "2015年xx公司IT类固定资产分类"
            },
            //当鼠标经过时的提示设置
            tooltip: {
                pointFormat: "{series.name}: <b>{point.percentage}%</b>",
                percentageDecimals: 1
            },
            //每种图表类型属性设置
            plotOptions: {
                //饼状图
                pie: {
                    allowPointSelect: true,
                    cursor: "pointer",
                    dataLabels: {
                        enabled: true,
                        color: "#000000",
                        connectorColor: "#000000",
                        formatter: function () {
                            //Highcharts.numberFormat(this.percentage,2)格式化数字，保留2位精度
                            return "<b>" + this.point.name + "</b>: " + Highcharts.numberFormat(this.percentage, 2) + " %";
                        }
                    }
                }
            },
            //图表要展现的数据
            series: [{
                type: "pie",
                name: "资产分类",
            }]
        });
    });

 2 
    $.ajax({
        type: "GET",
        url: "Test.ashx",//提供数据的Servlet
        success: function (data) {
            //通过eval() 函数可以将JSON字符串转化为对象  
            var obj = eval(data);

            //定义一个数组
            browsers = [];
            //获取总资产数量
            var AssetTotal = 0;
            for (var t in obj) {
                AssetTotal += obj[t]["ARNumber"];
            }

            //资产总数是否为零
            if (AssetTotal > 0) {
                //迭代，把异步获取的数据放到数组中
                for (var o in obj) {
                    browsers.push([obj[o]["ANCName"], obj[o]["ARNumber"] / AssetTotal]);
                }
            }

            //设置数据
            chart.series[0].setData(browsers);
        },
        error: function (e) {
            alert(e);
        }
    });

});

3、新建一个.ashx文件，命名为：Test.ashx

public void ProcessRequest(HttpContext context)
        {
          
            string sql = "select ANCName,count(ARNumber) as ARNumber  from view_AssetRegisterTypeName where ARStatusId = 1  group by ARAssetId,ANCName Having ARAssetId!=9999999 order by ARNumber Desc";
            DataAccess<Model.ReportAssetRegisterType> model = new DataAccess<ReportAssetRegisterType>();
            List<Model.ReportAssetRegisterType> list = model.ExecuteToList(sql);
            string JSON = JsonConvert.SerializeObject(list);
            
            context.Response.Write(JSON);

        }

4、显示表报输出结果：