.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"> , 前台代码如下
<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 官方网址
.NET 使用 Highcharts生成扇形图 柱形图的更多相关文章
- 使用Highcharts生成折线图_at last
//数据库数据的读取,读取数据后数据格式的转换,还有highchart数据源的配置,伤透了脑筋. anyway,最终开张了.哈哈! 数据库连接:conn_orcale.php <?php $db ...
- 使用Highcharts生成折线图与曲线图
折线图与曲线图可以显示随时间而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势.本文将结合Highcharts,生成一个城市气温变化折线图和一个随时间动态即时显示CPU走势的曲线图. 如果 ...
- 数据输入——生成你需要的echart图(堆积柱状图、扇形图、嵌套环形图)
最近论文需要一些比较直观的图表, 发现echart做出来的图还是比较美观的,这里介绍如何修改数据生成你需要的echart图. 1.堆积柱状图: http://echarts.baidu.com/exa ...
- 一秒钟教会你如何 使用jfreechart制作图表，扇形图，柱形图，线型图，时序图，附上详细代码，直接看效果
今天有小伙伴问到我怎么使用jfreeChat生成图标,去年就有一个这方便的的总结,今天再遇到,就总结出来,供大家参考: 第一个: 创建柱状图,效果图如下: 柱状图代码如下: package cn.xf ...
- Highcharts 3D柱形图；Highcharts 堆叠3D柱形图；Highcharts 3D饼图；Highcharts 3D圆环图
Highcharts 3D柱形图 配置 chart.options3d 配置 以下列出了 3D 图的基本配置,设置 chart 的 type 属性为 column,options3d 选项可设置三维效 ...
- 【基于WinForm+Access局域网共享数据库的项目总结】之篇二：WinForm开发扇形图统计和Excel数据导出
篇一:WinForm开发总体概述与技术实现 篇二:WinForm开发扇形图统计和Excel数据导出 篇三:Access远程连接数据库和窗体打包部署 [小记]:最近基于WinForm+Access数据库 ...
- C# 绘制统计图(柱状图, 折线图, 扇形图)【转载】
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- C# 绘制统计图(柱状图, 折线图, 扇形图)
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
- Asp.net 用 Graphics 统计图(柱状图, 折线图, 扇形图)
统计图形种类繁多, 有柱状图, 折线图, 扇形图等等, 而统计图形的绘制方法也有很多, 有Flash制作的统计图形, 有水晶报表生成统计图形, 有专门制图软件制作, 也有编程语言自己制作的:这里我们用 ...
随机推荐
- swift语言初见
下面是swift得基础语法部分内容 // main.swift // helloSwift // // Created by cyteven on 14-7-23. // Copyright ...
- Django的各种初识
1,django项目的各个文件的介绍 1.1>项目的根目录:是各个子文件的根目录,在各个文件相互导入文件的时候使用 1.2>配置文件:为django的各个文件配置相关的各种默认配置 1.3 ...
- 相关性系数缺点与证明 k阶矩
相关性系数 https://baike.baidu.com/item/相关系数/3109424?fr=aladdin 缺点 需要指出的是,相关系数有一个明显的缺点,即它接近于1的程度与数据组数n相关, ...
- Lightoj 1166 - Old Sorting
Given an array containing a permutation of 1 to n, you have to find the minimum number of swaps to s ...
- RMQ（Range Minimum Query）问题（转）
问题描述 RMQ问题是求给定区间中的最值问题.对于长度为n的数列A,回答若干查询RMQ(A, i, j).返回数组A中下标在[i,j]里的最小值的下标. 比如数列 5,8,1,3,6,4,9,5,7 ...
- BZOJ2002：Bounce 弹飞绵羊（LCT）
某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上n个装置,每个装置设定初始弹力系数ki,当 ...
- [USACO 2017DEC] Barn Painting
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=5141 [算法] 树形DP 时间复杂度 : O(N) [代码] #include< ...
- python-----flask项目端口设置无效
最近在做flask项目时发现了一个问题,在项目里写: app.run(host='0.0.0.0',port=9000) 但启动时,还是使用5000端口启动的. 后来经过测试,解决方法有两个: 如果启 ...
- 洛谷 P1541 乌龟棋 —— DP
题目:https://www.luogu.org/problemnew/show/P1541 DP. 代码如下: #include<iostream> #include<cstdio ...
- 计算属性computed 与methods
你可能已经注意到我们可以通过调用表达式中的 method 来达到同样的效果: <p>Reversed message: "{{ reversedMessage() }}" ...