1、首先新建一个.NET网站，如图所示：

2、引用所需要的js类库，如下图 highcharts.js可以在网上搜索就可以找到下载了。

3、在Default.aspx页面引用js

4、在 body 下添加一个<div id="container" style="width: 98%; height: 500px; margin: 0 auto"> , 前台代码如下

   <script type="text/javascript">

     $(function() {

      var line1 = <%=manTotal%>;

       var data = [<%=percentageStr%>];

         $('#container').highcharts({

             title: {

                 text: '组合图'

             },

             xAxis: {

                 categories:<%=xaxisStr%>

             },

               yAxis: {

                         min: 0,

                         title: {

                             text: '人数 (人)'  // //Y轴坐标标题  labels:纵柱标尺

                         }

                     },

             credits: {

                 enabled: false//坑爹的属性，去掉官网的链接

             },

 //            labels: {

 //                items: [{

 //                    html: '',

 //                    style: {

 //                        left: '50px',

 //                        top: '18px',

 //                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'

 //                    }

 //}]

 //                },

                  tooltip: {

                         formatter: function() {

                         if(this.percentage!=null)

                         {

                           return '<b>'+ this.point.name +'</b>: '+Highcharts.numberFormat(this.percentage,2)+'%';

                             //return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';

                         }

                         else

                         {

                                return '<b>'+ this.x +':</b>'+this.y +' 人';

                         }

                     }},

                 series: [{

                     type: 'column',

                     data: line1,

                     name: '柱形图'

                  } , {

                     type: 'spline',

                     data: line1,

                     name: '折线图',

                     marker: {

                         lineWidth: 2,

                         lineColor: Highcharts.getOptions().colors[3],

                         fillColor: 'white'

                     }

                 }, {

                     type: 'pie',

                     name: '',

                     name: '扇形图',

                     data:data,

                         center: [100, 80],

                         size: 150,

                         showInLegend: false,

                         dataLabels: {

                             enabled: false

                         }

                         }

                     ]

                     });

                 });

     </script>

 </head>

 <body>

     <form id="form1" runat="server">

     <div>

         <div id="container" style="width: 98%; height: 500px; margin: 0 auto">

         </div>

     </div>

     </form>

 </body>

 </html>

5、后台代码如下：

 protected string manTotal = string.Empty;

         protected string femanTotal = string.Empty;

         protected string xaxisStr = string.Empty;

         protected void Page_Load(object sender, EventArgs e)

         {

             BindDistribution();

         }

         public  string percentageStr="";

         private void BindDistribution()

         {

             System.Data.DataTable dt = GetData();

             StringBuilder sb1 = new StringBuilder();

             StringBuilder sb2 = new StringBuilder();

             StringBuilder sb3 = new StringBuilder();

             for (int i = ; i < dt.Rows.Count; i++)

             {

                 sb1.AppendFormat("{0},", dt.Rows[i]["人数"].ToString());

                 sb3.AppendFormat("'{0}',", dt.Rows[i]["专业"].ToString());

                 percentageStr = "['" + dt.Rows[i]["专业"].ToString().Trim() + "'," + dt.Rows[i]["人数"].ToString().Trim() + "]" + "," + percentageStr;

             }

             manTotal = "[" + sb1.ToString().TrimEnd(',') + "]";

             xaxisStr = "[" + sb3.ToString().TrimEnd(',') + "]";

         }

         public static string connStrings = @"Data Source=.;Initial Catalog=S;Integrated Security=True";

         public static DataTable GetData()

         {

             using (SqlConnection con = new SqlConnection(connStrings))

             {

                 string sql = @"select  专业,count(专业) as '人数',

 round(count(专业)*1.0/(select count(*) from S),3)  as '百分比'

 from S group by 专业

 ";

                 SqlDataAdapter ds = new SqlDataAdapter(sql, con);

                 DataTable dt = new DataTable();

                 ds.Fill(dt);

                 return dt;

             }

         }

     }

6、建立的数据库SQL语句如下

 CREATE TABLE [dbo].[S](

     [学号] [nvarchar](255) NOT NULL,

     [姓名] [nvarchar](255) NULL,

     [性别] [nvarchar](255) NULL,

     [专业] [nvarchar](255) NULL,

     [院系] [nvarchar](255) NULL,

     [班级] [nvarchar](255) NULL

 ) ON [PRIMARY]

 GO

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'王小明', N'男', N'金融系', N'经济学院', N'金融112')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'王销硕', N'男', N'材料成型及控制工程', N'材料科学与工程学院', N'焊接123')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'冯静', N'女', N'金融学', N'经济学院', N'金融091')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'王哲', N'男', N'环境工程', N'化工与制药学院', N'环境101')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'刘龙', N'男', N'应用物理学', N'物理与工程学院', N'应物081')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'杨冬来', N'男', N'临床医学', N'医学院', N'临床089')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'连新东', N'男', N'临床医学', N'医学院', N'临床087')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'胡小飞', N'男', N'护理学', N'医学院', N'护理012')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'张新宇', N'男', N'建筑学', N'规划与建筑工程学院', N'建筑042')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'靳晓蕊', N'女', N'机械设计制造及其自动化', N'机电工程学院', N'机制082')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'范航以', N'男', N'机械设计制造及其自动化', N'机电工程学院', N'机设012')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'郭硕好', N'男', N'材料成型及控制工程', N'材料科学与工程学院', N'焊接093')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'蔡杰', N'男', N'冶金工程', N'材料科学与工程学院', N'冶金091')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'王小昆', N'男', N'热能与动力工程', N'车辆与动力工程学院', N'制冷081')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'余洲', N'男', N'热能与动力工程', N'车辆与动力工程学院', N'制冷051')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'陈蒙', N'男', N'热能与动力工程', N'车辆与动力工程学院', N'制冷081')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'吴刚', N'男', N'交通运输', N'车辆与动力工程学院', N'交通081')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'张楠', N'男', N'交通运输', N'车辆与动力工程学院', N'交通081')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'李科', N'男', N'电子信息工程', N'电子信息工程学院', N'电信082')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'沈召花', N'男', N'计算机科学与技术', N'电子信息工程学院', N'计算机111')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'王是江', N'男', N'计算机科学与技术', N'电子信息工程学院', N'计算机123')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'王大毅', N'男', N'信息工程', N'电子信息工程学院', N'信工091')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'郝军', N'男', N'信息管理与信息系统', N'管理学院', N'信管091')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'高涛', N'男', N'建筑学', N'规划与建筑工程学院', N'建筑091')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'刘亮', N'男', N'建筑学', N'规划与建筑工程学院', N'建筑121')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'刘洋', N'女', N'建筑学', N'规划与建筑工程学院', N'建筑121')

 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'马红', N'女', N'建筑学', N'规划与建筑工程学院', N'建筑081')

7、最后浏览页面，如下图

总结：更多关于生成图表的资源，可以访问 highchart   http://www.highcharts.com/demo/pie-gradient  官方网址

.NET 使用 Highcharts生成扇形图 柱形图的更多相关文章

  1. 使用Highcharts生成折线图_at last

    //数据库数据的读取,读取数据后数据格式的转换,还有highchart数据源的配置,伤透了脑筋. anyway,最终开张了.哈哈! 数据库连接:conn_orcale.php <?php $db ...

  2. 使用Highcharts生成折线图与曲线图

    折线图与曲线图可以显示随时间而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势.本文将结合Highcharts,生成一个城市气温变化折线图和一个随时间动态即时显示CPU走势的曲线图. 如果 ...

  3. 数据输入——生成你需要的echart图(堆积柱状图、扇形图、嵌套环形图)

    最近论文需要一些比较直观的图表, 发现echart做出来的图还是比较美观的,这里介绍如何修改数据生成你需要的echart图. 1.堆积柱状图: http://echarts.baidu.com/exa ...

  4. 一秒钟教会你如何 使用jfreechart制作图表，扇形图，柱形图，线型图，时序图，附上详细代码，直接看效果

    今天有小伙伴问到我怎么使用jfreeChat生成图标,去年就有一个这方便的的总结,今天再遇到,就总结出来,供大家参考: 第一个: 创建柱状图,效果图如下: 柱状图代码如下: package cn.xf ...

  5. Highcharts 3D柱形图；Highcharts 堆叠3D柱形图；Highcharts 3D饼图；Highcharts 3D圆环图

    Highcharts 3D柱形图 配置 chart.options3d 配置 以下列出了 3D 图的基本配置,设置 chart 的 type 属性为 column,options3d 选项可设置三维效 ...

  6. 【基于WinForm+Access局域网共享数据库的项目总结】之篇二：WinForm开发扇形图统计和Excel数据导出

    篇一:WinForm开发总体概述与技术实现 篇二:WinForm开发扇形图统计和Excel数据导出 篇三:Access远程连接数据库和窗体打包部署 [小记]:最近基于WinForm+Access数据库 ...

  7. C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  8. C# 绘制统计图(柱状图, 折线图, 扇形图)

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

  9. Asp.net 用 Graphics 统计图(柱状图, 折线图, 扇形图)

    统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...

随机推荐

  1. WWDC笔记:2013 Session 203 What’s New in Cocoa Touch(未完)

    Multitasking Background fetching New background mode fetch - (void)application:(UIApplication *)appl ...

  2. 自己写的Android端HttpUtil工具类

    package com.sxt.jcjd.util; import java.io.IOException; import java.io.UnsupportedEncodingException; ...

  3. MFC项目实战（1）文件管理器--准备篇

    本程序主要实现如下功能: 程序通过左边的树形控件显示本地计算机中目录的结构,右边的列表控件则负责响应树形控件中选择的目录节点并把此节点中的所有项在列表框中显示出来,列表框支持奇偶行颜色设置,选中颜色设 ...

  4. Codeforces Round #361 (Div. 2)A. Mike and Cellphone

    A. Mike and Cellphone time limit per test 1 second memory limit per test 256 megabytes input standar ...

  5. 《CMake实践》笔记一：PROJECT/MESSAGE/ADD_EXECUTABLE【转】

    本文转载自:http://www.cnblogs.com/52php/p/5681745.html 前言: 开发了5,6年的时间,如果没有KDE4,也许不会有人或者Linux发行版本重视cmake,因 ...

  6. HDU1255 覆盖的面积 —— 求矩形交面积 线段树 + 扫描线 + 离散化

    题目链接:https://vjudge.net/problem/HDU-1255 给定平面上若干矩形,求出被这些矩形覆盖过至少两次的区域的面积. Input输入数据的第一行是一个正整数T(1<= ...

  7. HDU - 2063 过山车（最大匹配数）（模板）

    1.男生女生一起坐过山车,每一排有两个座位,但是有个条件,就是每个女生必须找个男生做同伴一起(但是女生只愿意和某几个男生中的一个做同伴),求最多可以有多少对男女生组合坐上过山车. 2.二分图的最大匹配 ...

  8. mac系统下命令编译android ndk项目

    1.设置ndk环境变量 2.构造android ndk项目,命令:ndk-build 3.使用ant构造android sdk项目:命令:android update project -p . -n ...

  9. 解耦与分离 —— 面向切面编程（AOP）

    家里的电表总结起来有两大特性: 电视机需要(电量管理),空调需要(电量管理),热水器也需要电量管理,即一组对象都需要某一功能特性: 电视机根据信号输出画面,空调吹出冷风,热水器将水加热,这些业务功能的 ...

  10. [NOI 2012] 美食节

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2879 [算法] 首先 , 将每种食物建一个点 , 将每位厨师做的每一道菜建一个点 建 ...