.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                         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>

View Code

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     }

View Code

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

View Code

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

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

posted @ 2014-08-03 15:41 落日云烟阅读(574) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

落日云烟

博客园已经迁移到网站 http://www.luoyangwyb.net/

.NET 使用 Highcharts生成扇形图柱形图

公告

落日云烟

博客园已经迁移到网站 http://www.luoyangwyb.net/

.NET 使用 Highcharts生成扇形图 柱形图

公告

.NET 使用 Highcharts生成扇形图柱形图