标签：style blog http color java 使用 os io
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 官方网址
.NET 使用 Highcharts生成扇形图 柱形图,布布扣,bubuko.com
标签：style blog http color java 使用 os io
原文地址：http://www.cnblogs.com/luoyangcn/p/3888450.html
