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.              for (int i = ; i < dt.Rows.Count; i++)
  17.              {
  18.                  sb1.AppendFormat("{0},", dt.Rows[i]["人数"].ToString());
  19.                  sb3.AppendFormat("'{0}',", dt.Rows[i]["专业"].ToString());
  20.                  percentageStr = "['" + dt.Rows[i]["专业"].ToString().Trim() + "'," + dt.Rows[i]["人数"].ToString().Trim() + "]" + "," + percentageStr;
  21.              }
  22.              manTotal = "[" + sb1.ToString().TrimEnd(',') + "]";
  23.              xaxisStr = "[" + sb3.ToString().TrimEnd(',') + "]";
  24.          }
  25.          public static string connStrings = @"Data Source=.;Initial Catalog=S;Integrated Security=True";
  26.          public static DataTable GetData()
  27.          {
  28.              using (SqlConnection con = new SqlConnection(connStrings))
  29.              {
  30.                  string sql = @"select  专业,count(专业) as '人数',
  31.  round(count(专业)*1.0/(select count(*) from S),3)  as '百分比'
  32.  from S group by 专业
  33.  ";
  34.                  SqlDataAdapter ds = new SqlDataAdapter(sql, con);
  35.                  DataTable dt = new DataTable();
  36.                  ds.Fill(dt);
  37.                  return dt;
  38.              }
  39.          }
  40.      }

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'', N'王小明', N'男', N'金融系', N'经济学院', N'金融112')
  12.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'王销硕', N'男', N'材料成型及控制工程', N'材料科学与工程学院', N'焊接123')
  13.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'冯静', N'女', N'金融学', N'经济学院', N'金融091')
  14.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'王哲', N'男', N'环境工程', N'化工与制药学院', N'环境101')
  15.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'刘龙', N'男', N'应用物理学', N'物理与工程学院', N'应物081')
  16.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'杨冬来', N'男', N'临床医学', N'医学院', N'临床089')
  17.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'连新东', N'男', N'临床医学', N'医学院', N'临床087')
  18.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'胡小飞', N'男', N'护理学', N'医学院', N'护理012')
  19.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'张新宇', N'男', N'建筑学', N'规划与建筑工程学院', N'建筑042')
  20.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'靳晓蕊', N'女', N'机械设计制造及其自动化', N'机电工程学院', N'机制082')
  21.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'范航以', N'男', N'机械设计制造及其自动化', N'机电工程学院', N'机设012')
  22.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'郭硕好', N'男', N'材料成型及控制工程', N'材料科学与工程学院', N'焊接093')
  23.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'蔡杰', N'男', N'冶金工程', N'材料科学与工程学院', N'冶金091')
  24.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'王小昆', N'男', N'热能与动力工程', N'车辆与动力工程学院', N'制冷081')
  25.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'余洲', N'男', N'热能与动力工程', N'车辆与动力工程学院', N'制冷051')
  26.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'陈蒙', N'男', N'热能与动力工程', N'车辆与动力工程学院', N'制冷081')
  27.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'吴刚', N'男', N'交通运输', N'车辆与动力工程学院', N'交通081')
  28.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'张楠', N'男', N'交通运输', N'车辆与动力工程学院', N'交通081')
  29.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'李科', N'男', N'电子信息工程', N'电子信息工程学院', N'电信082')
  30.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'沈召花', N'男', N'计算机科学与技术', N'电子信息工程学院', N'计算机111')
  31.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'王是江', N'男', N'计算机科学与技术', N'电子信息工程学院', N'计算机123')
  32.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'王大毅', N'男', N'信息工程', N'电子信息工程学院', N'信工091')
  33.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'郝军', N'男', N'信息管理与信息系统', N'管理学院', N'信管091')
  34.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'高涛', N'男', N'建筑学', N'规划与建筑工程学院', N'建筑091')
  35.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'刘亮', N'男', N'建筑学', N'规划与建筑工程学院', N'建筑121')
  36.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'刘洋', N'女', N'建筑学', N'规划与建筑工程学院', N'建筑121')
  37.  INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'', N'马红', N'女', N'建筑学', N'规划与建筑工程学院', N'建筑081')
  38.

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. 移动端html5页面长按实现高亮全选文本内容的兼容解决方式

    近期须要给html5的WebAPP在页面上实现一个复制功能:用户点击长按文本会全选文字并弹出系统"复制"菜单.用户能够点击"复制"进行复制操作.然后粘贴到App ...

  2. base64和图片互转

    pom.xml添加 <!-- https://mvnrepository.com/artifact/commons-codec/commons-codec --> <dependen ...

  3. CodeForces 300C Beautiful Numbers（乘法逆元/费马小定理+组合数公式+高速幂）

    C. Beautiful Numbers time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  4. 织梦dedecms将指定图片自动生成指定尺寸的小图、缩略图、图片的方法

    对于普通企业网站来讲,织梦原来的程序只是提供了一个缩略图,但是这样对于一些相对来说图片会比较多的网站来说,图片太大当缩略图会导致网站整体的访问速度,所以我今天就来教你织梦把一张大图转换成生成一张小图或 ...

  5. ValueError: Some of types cannot be determined by the first 100 rows, please try again with sampling

    ValueError: Some of types cannot be determined by the first 100 rows, please try again with sampling ...

  6. 六:多线程--自定义NSOperation

    一.实现一个简单的tableView显示效果 实现效果展示: 代码示例(使用以前在主控制器中进行业务处理的方式) 1.新建一个项目,让控制器继承自UITableViewController. 3 // ...

  7. bzoj 3872 [ Poi 2014 ] Ant colony —— 二分

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3872 从食蚁兽所在的边向叶节点推,会得到一个渐渐放大的取值区间,在叶子节点上二分有几群蚂蚁符 ...

  8. Python3列表、元组、字典、集合的方法

    一.列表 温馨提示:对图片点右键——在新标签页中打开图片: 1.count() 定义:统计指定元素在列表中出现的次数并返回这个数.若指定的元素不存在则返回:0. 格式:[列表].count(“指定元素 ...

  9. Pascal输出星星

    program Project2; {$APPTYPE CONSOLE} uses SysUtils; var i,j:integer; begin { TODO -oUser -cConsole M ...

  10. javascript前端面试题及答案整理

    Part1 手写代码 现场手写代码是现在面试中很常见的一类面试题,考察基础的数据结构与算法能力. 1 数组去重的实现 基本数组去重 Array.prototype.unique = function( ...