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