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-width: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:
             },
             //每种图表类型属性设置
             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, ) + " %";
                         }
                     }
                 }
             },
             //图表要展现的数据
             series: [{
                 type: "pie",
                 name: "资产分类",
             }]
         });
     });

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

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

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

             //设置数据
             chart.series[].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、显示表报输出结果：