1、首先新建一个.NET网站，如图所示：
2、引用所需要的js类库，如下图 highcharts.js可以在网上搜索就可以找到下载了。
3、在Default.aspx页面引用js
4、在 body 下添加一个<div id="container" style="width: 98%; height: 500px; margin: 0 auto"> , 前台代码如下
1 <script type="text/javascript"> 2 $(function() { 3 var line1 = <%=manTotal%>; 4 var data = [<%=percentageStr%>]; 5 $(\'#container\').highcharts({ 6 title: { 7 text: \'组合图\' 8 }, 9 xAxis: { 10 categories:<%=xaxisStr%> 11 }, 12 yAxis: { 13 min: 0, 14 title: { 15 text: \'人数 (人)\' // //Y轴坐标标题 labels:纵柱标尺 16 } 17 }, 18 credits: { 19 enabled: false//坑爹的属性，去掉官网的链接 20 }, 21 // labels: { 22 // items: [{ 23 // html: \'\', 24 // style: { 25 // left: \'50px\', 26 // top: \'18px\', 27 // color: (Highcharts.theme && Highcharts.theme.textColor) || \'black\' 28 // } 29 //}] 30 // }, 31 tooltip: { 32 formatter: function() { 33 if(this.percentage!=null) 34 { 35 return \'<b>\'+ this.point.name +\'</b>: \'+Highcharts.numberFormat(this.percentage,2)+\'%\'; 36 //return \'<b>\'+ this.point.name +\'</b>: \'+ this.percentage +\' %\'; 37 } 38 else 39 { 40 return \'<b>\'+ this.x +\':</b>\'+this.y +\' 人\'; 41 } 42 }}, 43 series: [{ 44 type: \'column\', 45 data: line1, 46 name: \'柱形图\' 47 } , { 48 type: \'spline\', 49 data: line1, 50 name: \'折线图\', 51 marker: { 52 lineWidth: 2, 53 lineColor: Highcharts.getOptions().colors[3], 54 fillColor: \'white\' 55 } 56 }, { 57 type: \'pie\', 58 name: \'\', 59 name: \'扇形图\', 60 data:data, 61 center: [100, 80], 62 size: 150, 63 showInLegend: false, 64 dataLabels: { 65 enabled: false 66 } 67 } 68 ] 69 }); 70 }); 71 </script> 72 73 </head> 74 <body> 75 <form id="form1" runat="server"> 76 <div> 77 <div id="container" style="width: 98%; height: 500px; margin: 0 auto"> 78 </div> 79 </div> 80 </form> 81 </body> 82 </html>
5、后台代码如下：
1 protected string manTotal = string.Empty; 2 protected string femanTotal = string.Empty; 3 protected string xaxisStr = string.Empty; 4 protected void Page_Load(object sender, EventArgs e) 5 { 6 BindDistribution(); 7 } 8 public string percentageStr=""; 9 private void BindDistribution() 10 { 11 System.Data.DataTable dt = GetData(); 12 StringBuilder sb1 = new StringBuilder(); 13 StringBuilder sb2 = new StringBuilder(); 14 StringBuilder sb3 = new StringBuilder(); 15 16 17 for (int i = 0; i < dt.Rows.Count; i++) 18 { 19 sb1.AppendFormat("{0},", dt.Rows[i]["人数"].ToString()); 20 sb3.AppendFormat("\'{0}\',", dt.Rows[i]["专业"].ToString()); 21 percentageStr = "[\'" + dt.Rows[i]["专业"].ToString().Trim() + "\'," + dt.Rows[i]["人数"].ToString().Trim() + "]" + "," + percentageStr; 22 } 23 manTotal = "[" + sb1.ToString().TrimEnd(\',\') + "]"; 24 xaxisStr = "[" + sb3.ToString().TrimEnd(\',\') + "]"; 25 } 26 public static string connStrings = @"Data Source=.;Initial Catalog=S;Integrated Security=True"; 27 public static DataTable GetData() 28 { 29 using (SqlConnection con = new SqlConnection(connStrings)) 30 { 31 string sql = @"select 专业,count(专业) as \'人数\', 32 round(count(专业)*1.0/(select count(*) from S),3) as \'百分比\' 33 from S group by 专业 34 "; 35 SqlDataAdapter ds = new SqlDataAdapter(sql, con); 36 DataTable dt = new DataTable(); 37 ds.Fill(dt); 38 return dt; 39 } 40 } 41 }
6、建立的数据库SQL语句如下
1 CREATE TABLE [dbo].[S]( 2 [学号] [nvarchar](255) NOT NULL, 3 [姓名] [nvarchar](255) NULL, 4 [性别] [nvarchar](255) NULL, 5 [专业] [nvarchar](255) NULL, 6 [院系] [nvarchar](255) NULL, 7 [班级] [nvarchar](255) NULL 8 ) ON [PRIMARY] 9 10 GO 11 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'111405060432\', N\'王小明\', N\'男\', N\'金融系\', N\'经济学院\', N\'金融112\') 12 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'09402260215\', N\'王销硕\', N\'男\', N\'材料成型及控制工程\', N\'材料科学与工程学院\', N\'焊接123\') 13 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'08104160407\', N\'冯静\', N\'女\', N\'金融学\', N\'经济学院\', N\'金融091\') 14 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'17108240152\', N\'王哲\', N\'男\', N\'环境工程\', N\'化工与制药学院\', N\'环境101\') 15 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'07110020114\', N\'刘龙\', N\'男\', N\'应用物理学\', N\'物理与工程学院\', N\'应物081\') 16 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'12118010137\', N\'杨冬来\', N\'男\', N\'临床医学\', N\'医学院\', N\'临床089\') 17 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'14118031015\', N\'连新东\', N\'男\', N\'临床医学\', N\'医学院\', N\'临床087\') 18 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'07118020434\', N\'胡小飞\', N\'男\', N\'护理学\', N\'医学院\', N\'护理012\') 19 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'07119010329\', N\'张新宇\', N\'男\', N\'建筑学\', N\'规划与建筑工程学院\', N\'建筑042\') 20 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'10101060311\', N\'靳晓蕊\', N\'女\', N\'机械设计制造及其自动化\', N\'机电工程学院\', N\'机制082\') 21 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'12101060806\', N\'范航以\', N\'男\', N\'机械设计制造及其自动化\', N\'机电工程学院\', N\'机设012\') 22 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'11102060304\', N\'郭硕好\', N\'男\', N\'材料成型及控制工程\', N\'材料科学与工程学院\', N\'焊接093\') 23 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'08104100602\', N\'蔡杰\', N\'男\', N\'冶金工程\', N\'材料科学与工程学院\', N\'冶金091\') 24 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'09103450225\', N\'王小昆\', N\'男\', N\'热能与动力工程\', N\'车辆与动力工程学院\', N\'制冷081\') 25 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'03102050229\', N\'余洲\', N\'男\', N\'热能与动力工程\', N\'车辆与动力工程学院\', N\'制冷051\') 26 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'06104050601\', N\'陈蒙\', N\'男\', N\'热能与动力工程\', N\'车辆与动力工程学院\', N\'制冷081\') 27 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'12103290126\', N\'吴刚\', N\'男\', N\'交通运输\', N\'车辆与动力工程学院\', N\'交通081\') 28 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'08103590135\', N\'张楠\', N\'男\', N\'交通运输\', N\'车辆与动力工程学院\', N\'交通081\') 29 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'05104020210\', N\'李科\', N\'男\', N\'电子信息工程\', N\'电子信息工程学院\', N\'电信082\') 30 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'08107060113\', N\'沈召花\', N\'男\', N\'计算机科学与技术\', N\'电子信息工程学院\', N\'计算机111\') 31 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'09302060323\', N\'王是江\', N\'男\', N\'计算机科学与技术\', N\'电子信息工程学院\', N\'计算机123\') 32 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'08134090220\', N\'王大毅\', N\'男\', N\'信息工程\', N\'电子信息工程学院\', N\'信工091\') 33 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'13176070105\', N\'郝军\', N\'男\', N\'信息管理与信息系统\', N\'管理学院\', N\'信管091\') 34 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'08119010107\', N\'高涛\', N\'男\', N\'建筑学\', N\'规划与建筑工程学院\', N\'建筑091\') 35 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'09189010113\', N\'刘亮\', N\'男\', N\'建筑学\', N\'规划与建筑工程学院\', N\'建筑121\') 36 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'08179010114\', N\'刘洋\', N\'女\', N\'建筑学\', N\'规划与建筑工程学院\', N\'建筑121\') 37 INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N\'11109810516\', N\'马红\', N\'女\', N\'建筑学\', N\'规划与建筑工程学院\', N\'建筑081\') 38
7、最后浏览页面，如下图
总结：更多关于生成图表的资源，可以访问 highchart http://www.highcharts.com/demo/pie-gradient 官方网址