首页 > 代码库 > .NET 使用 Highcharts生成扇形图 柱形图
.NET 使用 Highcharts生成扇形图 柱形图
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 else39 {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: false66 }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 GO11 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 官方网址
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。