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

最新推荐文章于 2023-08-30 16:57:10 发布
最新推荐文章于 2023-08-30 16:57:10 发布
阅读量575 收藏
点赞数
分类专栏： js生成图表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luoyangwyb/article/details/38357963
版权

1、首先新建一个.NET网站，如图所示：



2、引用所需要的js类库，如下图 highcharts.js可以在网上搜索就可以找到下载了。


3、在Default.aspx页面添加引用的js引用


4、在 body 下添加一个<div id="container" style="width: 98%; height: 500px; margin: 0 auto"> , 前台代码如下

<span style="font-size:14px;"><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></span>
5、后台代码如下： 

 <span style="font-size:14px;">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 = 0; 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;
            }
        }
    }</span>

6、建立的数据库SQL语句如下

<span style="font-size:14px;">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'111405060432', N'王小明', N'男', N'金融系', N'经济学院', N'金融112')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'09402260215', N'王销硕', N'男', N'材料成型及控制工程', N'材料科学与工程学院', N'焊接123')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'08104160407', N'冯静', N'女', N'金融学', N'经济学院', N'金融091')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'17108240152', N'王哲', N'男', N'环境工程', N'化工与制药学院', N'环境101')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'07110020114', N'刘龙', N'男', N'应用物理学', N'物理与工程学院', N'应物081')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'12118010137', N'杨冬来', N'男', N'临床医学', N'医学院', N'临床089')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'14118031015', N'连新东', N'男', N'临床医学', N'医学院', N'临床087')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'07118020434', N'胡小飞', N'男', N'护理学', N'医学院', N'护理012')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'07119010329', N'张新宇', N'男', N'建筑学', N'规划与建筑工程学院', N'建筑042')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'10101060311', N'靳晓蕊', N'女', N'机械设计制造及其自动化', N'机电工程学院', N'机制082')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'12101060806', N'范航以', N'男', N'机械设计制造及其自动化', N'机电工程学院', N'机设012')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'11102060304', N'郭硕好', N'男', N'材料成型及控制工程', N'材料科学与工程学院', N'焊接093')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'08104100602', N'蔡杰', N'男', N'冶金工程', N'材料科学与工程学院', N'冶金091')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'09103450225', N'王小昆', N'男', N'热能与动力工程', N'车辆与动力工程学院', N'制冷081')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'03102050229', N'余洲', N'男', N'热能与动力工程', N'车辆与动力工程学院', N'制冷051')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'06104050601', N'陈蒙', N'男', N'热能与动力工程', N'车辆与动力工程学院', N'制冷081')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'12103290126', N'吴刚', N'男', N'交通运输', N'车辆与动力工程学院', N'交通081')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'08103590135', N'张楠', N'男', N'交通运输', N'车辆与动力工程学院', N'交通081')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'05104020210', N'李科', N'男', N'电子信息工程', N'电子信息工程学院', N'电信082')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'08107060113', N'沈召花', N'男', N'计算机科学与技术', N'电子信息工程学院', N'计算机111')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'09302060323', N'王是江', N'男', N'计算机科学与技术', N'电子信息工程学院', N'计算机123')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'08134090220', N'王大毅', N'男', N'信息工程', N'电子信息工程学院', N'信工091')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'13176070105', N'郝军', N'男', N'信息管理与信息系统', N'管理学院', N'信管091')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'08119010107', N'高涛', N'男', N'建筑学', N'规划与建筑工程学院', N'建筑091')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'09189010113', N'刘亮', N'男', N'建筑学', N'规划与建筑工程学院', N'建筑121')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'08179010114', N'刘洋', N'女', N'建筑学', N'规划与建筑工程学院', N'建筑121')
INSERT [dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N'11109810516', N'马红', N'女', N'建筑学', N'规划与建筑工程学院', N'建筑081')</span>

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

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

luoyangwyb
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts---介绍/柱形图和扇形图
IfIloseyou的博客
08-13 1775
什么是Echarts? Echarts,它是一个JavaScript图表库，底层是依赖Canvas类库ZRender实现的，可以流畅的在移动端和PC端使用，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），提供直观，生动，可交互，可高度个性化定制的数据可视化图表。说白了就是一个可以简便的画出你想要的任何图表。它拥有丰富图表类型：比如 折线图、柱状图、地图、饼图、热力图、日历图等等 echarts官网 获取ECharts 你可以通过以下几种方式获取 ECharts
ideal软件springboot项目使用HighCharts制作简单的动态扇形和柱状统计图
ABCDFGF的博客
01-03 842
1.Highcharts 环境配置 1）安装 jQuery 2）安装 Highcharts Highcharts 安装可以使用以下两种方式： 1、访问 highcharts.com 下载 Highcharts 包。 2、使用官方提供的 CDN 地址：http://code.highcharts.com/highcharts.js 2.新建spring-boot项目 PS:后台代码过程有...
Echarts-使用柱状图与极坐标系绘制具有扇形的类雷达图
最新发布
qq_43507394的博客
08-30 610
有时候可恶的UI会给我们一些设计稿，就比如让你在雷达图中绘制几个占比大小，半径都不相同的扇形，但是配置项中没有提供可以绘制曲线的参数，这时候就可以考虑到使用极坐标系来绘制。
【Echarts 绘制柱状图、折线图和扇形图】
qq_38657604的博客
01-20 1546
利用Echarts画图并将图片嵌入到页面中
使用highcharts制作仪表盘、扇形图，柱形图，折线图
不贪不念，不念不忘
09-25 779
Highcharts 是一个用纯 JavaScript 编写的一个图表库， 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表。 下面是近期使用Highcharts 制作仪表盘、扇形图，柱形图，折线图的使用总结 官网实例演示链接：https://www.highcharts.com.cn/demo/highcharts/line-basic HTML内容 <script...
highcharts.js柱形图插件特效代码
03-20
在Highcharts.js中，我们可以通过创建一个新的`Highcharts.Chart`实例来生成柱形图。这通常涉及到以下步骤： 1. **引入库**：在HTML文件（如index.html）中，你需要引入Highcharts.js库以及可能需要的其他相关模块...
PHP+mysql+Highcharts生成饼状图
09-03
通过以上步骤，我们可以成功地使用PHP、MySQL和Highcharts生成饼状图，以展示各类数据在总数据中的比例关系。在实际项目中，可以根据需要调整图表样式、数据源以及交互功能，以满足不同的业务需求。
highcharts快速生成百万数据点折线图.rar
12-15
本文将深入探讨如何使用Highcharts高效地生成百万数据点的折线图。 首先，理解数据分块加载的概念是关键。对于大数据量，一次性加载所有数据会消耗大量内存并导致浏览器性能下降。因此，Highcharts支持分批加载数据...
Highcharts用Asp.Net导出jpg,png图片程序
12-15
总结来说，通过Asp.Net和Highcharts的结合，我们可以实现动态图表的图片导出，这在数据分析和报告生成等领域非常有用。以上就是利用Asp.Net实现Highcharts图表jpg和png图片导出的主要步骤和技术要点，希望对你有所...
HighCharts图表控件在ASP.NET WebForm中的使用总结（全）
09-03
在ASP.NET WebForm中使用HighCharts，可以让开发者轻松地在Web应用程序中添加丰富的可视化元素，而且对于个人学习、个人网站和非商业用途，HighCharts是免费的。 在传统的使用方式中，开发人员需要在HTML的`<head>`...
在.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图，柱状图，饼图包含网页静态demo
09-01
该项目主要是使用.NET MVC 和Highcharts+Ajax+Json生成动态曲线图，柱状图，饼图，让数据更加的明显美观，可以满足绝多数数据报表的需求！
VUE+ECharts从数据库中获取数据（柱状图、扇形图）
热门推荐
Willing卡卡的博客
09-12 2万+
本文主要分享了如何使用ECharts画出柱状图、扇形图并与后端交互完成数据的动态更新；包括：环境的echarts的环境搭建，绘制图形、完成后端业务代码；
C# 绘制统计图(柱状图, 折线图, 扇形图)
03-30 9055
微软图表控件MsChart 下面是下载地址：     控件：Microsoft .NET Framework 3.5 的 Microsoft 图表控件(Microsoft Chart Controls for Microsoft .NET Framework 3.5)– 包含英文版，中文版。上面提供的链接是中文版的，可以更改为英文版。 语言包：Mic
C#　stringbuilder的基本用法 sb.AppendFormat
L1562670976的博客
03-30 1万+
private static void TestStringBuilder()         {             var n = "ab";             StringBuilder sb = new StringBuilder();             Console.WriteLine(sb.AppendFormat("{0}cde", n));
echarts 应用 （柱状图，扇形图）
weixin_33877092的博客
06-23 480
2019独角兽企业重金招聘Python工程师标准>>> ...
WPF绘制柱状图，折线图和扇形图
wuke666666的博客
03-30 2782
1.绘制需引入外部插件WPFVisifire.Charts插件 2.三个button按钮 <Button Content="柱状图" Name="ButColumn" HorizontalAlignment="Left" Margin="10,59,0,0" VerticalAlignment="Top" Width="75" Click="ButColumn_Click"...
iOS-UI之简易图表——饼图(扇形图)、柱状图、折(曲)线图
迈克尔杰克创的博客
05-15 5455
话不多说，先来看看效果： 1.饼图(扇形图) 2.柱状图 3.折线图 样子粗糙，见笑了。 现在来看看实现过程 一、饼图(扇形图) 1.实现思路 实现思路其实很简单，首先算传入数据数组的数据总和，然后根据每个数据占比来乘以2π，得到每个数据的弧度，然后在循环中利用UIBezierPath的addArcWithCenter: radius: startAngle: endA...
饼图,扇形,柱状图
weixin_30576827的博客
09-13 103
饼图创建路径 // 创建路径对象 UIBezierPath* path = [UIBezierPath bezierPathWithArcCenter:[self viewCenter] radius:MIN(self.bounds.size.height, self.bounds.size.width) * 0.5 - 10 startAngle:start endAngle...
Highcharts图形配置与使用详解
"该文档是关于Highcharts的详细总结，涵盖了Highcharts的各种图形的基本属性和使用案例，包括导出和打印选项、全局选项、语言选项、加载和导航选项、窗格和绘图选项、各种类型的图表（如区域图、条形图、饼图等）...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值