首页 / HIGHCHARTS / .NET 使用 Highcharts生成扇形图柱形图

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了.NET 使用 Highcharts生成扇形图柱形图，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7157字，纯文字阅读大概需要11分钟。

内容图文

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;
 2protectedstring femanTotal = string.Empty;
 3protectedstring xaxisStr = string.Empty;
 4protectedvoid Page_Load(object sender, EventArgs e)
 5        {
 6            BindDistribution();
 7        }
 8publicstring percentageStr="";
 9privatevoid BindDistribution()
10        {
11             System.Data.DataTable dt = GetData();
12             StringBuilder sb1 = new StringBuilder();
13             StringBuilder sb2 = new StringBuilder();
14             StringBuilder sb3 = new StringBuilder();
151617for (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        }
26publicstaticstring connStrings = @"Data Source=.;Initial Catalog=S;Integrated Security=True";
27publicstatic DataTable GetData()
28        {
29using (SqlConnection con = new SqlConnection(connStrings))
30            {
31string sql = @"select  专业,count(专业) as ‘人数‘,
32round(count(专业)*1.0/(select count(*) from S),3)  as ‘百分比‘
33from S group by 专业
34";
35                 SqlDataAdapter ds = new SqlDataAdapter(sql, con);
36                 DataTable dt = new DataTable();
37                ds.Fill(dt);
38return dt;
39            }
40        }
41     }

View Code

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

                 1
                CREATE
                TABLE
                [
                dbo
                ].[S](
 2[学号][nvarchar](255) NOTNULL,
 3[姓名][nvarchar](255) NULL,
 4[性别][nvarchar](255) NULL,
 5[专业][nvarchar](255) NULL,
 6[院系][nvarchar](255) NULL,
 7[班级][nvarchar](255) NULL 8 ) ON[PRIMARY] 910GO11INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘111405060432‘, N‘王小明‘, N‘男‘, N‘金融系‘, N‘经济学院‘, N‘金融112‘)
12INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘09402260215‘, N‘王销硕‘, N‘男‘, N‘材料成型及控制工程‘, N‘材料科学与工程学院‘, N‘焊接123‘)
13INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘08104160407‘, N‘冯静‘, N‘女‘, N‘金融学‘, N‘经济学院‘, N‘金融091‘)
14INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘17108240152‘, N‘王哲‘, N‘男‘, N‘环境工程‘, N‘化工与制药学院‘, N‘环境101‘)
15INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘07110020114‘, N‘刘龙‘, N‘男‘, N‘应用物理学‘, N‘物理与工程学院‘, N‘应物081‘)
16INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘12118010137‘, N‘杨冬来‘, N‘男‘, N‘临床医学‘, N‘医学院‘, N‘临床089‘)
17INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘14118031015‘, N‘连新东‘, N‘男‘, N‘临床医学‘, N‘医学院‘, N‘临床087‘)
18INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘07118020434‘, N‘胡小飞‘, N‘男‘, N‘护理学‘, N‘医学院‘, N‘护理012‘)
19INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘07119010329‘, N‘张新宇‘, N‘男‘, N‘建筑学‘, N‘规划与建筑工程学院‘, N‘建筑042‘)
20INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘10101060311‘, N‘靳晓蕊‘, N‘女‘, N‘机械设计制造及其自动化‘, N‘机电工程学院‘, N‘机制082‘)
21INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘12101060806‘, N‘范航以‘, N‘男‘, N‘机械设计制造及其自动化‘, N‘机电工程学院‘, N‘机设012‘)
22INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘11102060304‘, N‘郭硕好‘, N‘男‘, N‘材料成型及控制工程‘, N‘材料科学与工程学院‘, N‘焊接093‘)
23INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘08104100602‘, N‘蔡杰‘, N‘男‘, N‘冶金工程‘, N‘材料科学与工程学院‘, N‘冶金091‘)
24INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘09103450225‘, N‘王小昆‘, N‘男‘, N‘热能与动力工程‘, N‘车辆与动力工程学院‘, N‘制冷081‘)
25INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘03102050229‘, N‘余洲‘, N‘男‘, N‘热能与动力工程‘, N‘车辆与动力工程学院‘, N‘制冷051‘)
26INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘06104050601‘, N‘陈蒙‘, N‘男‘, N‘热能与动力工程‘, N‘车辆与动力工程学院‘, N‘制冷081‘)
27INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘12103290126‘, N‘吴刚‘, N‘男‘, N‘交通运输‘, N‘车辆与动力工程学院‘, N‘交通081‘)
28INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘08103590135‘, N‘张楠‘, N‘男‘, N‘交通运输‘, N‘车辆与动力工程学院‘, N‘交通081‘)
29INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘05104020210‘, N‘李科‘, N‘男‘, N‘电子信息工程‘, N‘电子信息工程学院‘, N‘电信082‘)
30INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘08107060113‘, N‘沈召花‘, N‘男‘, N‘计算机科学与技术‘, N‘电子信息工程学院‘, N‘计算机111‘)
31INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘09302060323‘, N‘王是江‘, N‘男‘, N‘计算机科学与技术‘, N‘电子信息工程学院‘, N‘计算机123‘)
32INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘08134090220‘, N‘王大毅‘, N‘男‘, N‘信息工程‘, N‘电子信息工程学院‘, N‘信工091‘)
33INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘13176070105‘, N‘郝军‘, N‘男‘, N‘信息管理与信息系统‘, N‘管理学院‘, N‘信管091‘)
34INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘08119010107‘, N‘高涛‘, N‘男‘, N‘建筑学‘, N‘规划与建筑工程学院‘, N‘建筑091‘)
35INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘09189010113‘, N‘刘亮‘, N‘男‘, N‘建筑学‘, N‘规划与建筑工程学院‘, N‘建筑121‘)
36INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘08179010114‘, N‘刘洋‘, N‘女‘, N‘建筑学‘, N‘规划与建筑工程学院‘, N‘建筑121‘)
37INSERT[dbo].[S] ([学号], [姓名], [性别], [专业], [院系], [班级]) VALUES (N‘11109810516‘, N‘马红‘, N‘女‘, N‘建筑学‘, N‘规划与建筑工程学院‘, N‘建筑081‘)
38

View Code

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

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

原文：http://www.cnblogs.com/luoyangcn/p/3888450.html

内容总结

以上是互联网集市为您收集整理的.NET 使用 Highcharts生成扇形图柱形图全部内容，希望文章能够帮你解决.NET 使用 Highcharts生成扇形图柱形图所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1171691.html

来源：【匿名】

【上一篇】Highcharts的数据表示(1)【下一篇】php动态传数据到highcharts的方法

更多 ►

【.NET 使用 Highcharts生成扇形图柱形图】教程文章相关的互联网学习教程文章

Highcharts的数据表示(1)

Highcharts的数据表示(1) 在Highcharts中，将关联的一系列的数据称为数据列。而构成数据的每一个数据单元称为数据节点。下面详细讲解数据列和数据节点的表示方式。数据列就是相关联的一系列数据的集合。例如，第一个实例所呈现的数据就是由七个温度数据构成的集合。他们的关联关系是构成连续的一周温度。在Highcharts中，数据列使用series表示。一个图表中，可以有一个或者多个数据列。所以，series的值是一个数组。形式如下：seri...

.NET 使用 Highcharts生成扇形图柱形图【代码】【图】

1、首先新建一个.NET网站，如图所示： 2、引用所需要的js类库，如下图 highcharts.js可以在网上搜索就可以找到下载了。3、在Default.aspx页面引用js4、在 body 下添加一个<div id="container" style="width: 98%; height: 500px; margin: 0 auto"> , 前台代码如下 1<script type="text/javascript"> 2 $(function() {3var line1 =<%=manTotal%>; 4var data = [<%=percentageStr%>];5 $(‘#container‘).highcharts({6 ...

C#趋势图(highcharts插件)【代码】【图】

<div class="TUI-layout-center" style="overflow: auto;" id="appriseContent"><div class="ui-layout-center"><div id="listDiv" style="overflow: auto;" class="TUI-content TUI-h100"><div runat="server" id="divData" class="TUI-content TUI-h100 TUI-of-auto" style="overflow: auto;"></div></div></div><div class="ui-layout-east" id="divEast"><div id=...

MVC使用Dotnet.HighCharts做图表01,区域图表【代码】【图】

如果想在MVC中使用图表显示的话，DotNet.HighCharts是不错的选择。DotNet.HighCharts是一个开源的JavaScript图表库，支持线型图表、柱状图标、饼状图标等几十种图标。本篇实现一个简单的区域图表。在NuGet中输入关键字"DotNet.HighCharts"。安装完后，在Scripts和程序集下多了HighCharts相关文件。HomeController中。using System.Collections.Generic; using System.Web.Mvc; using DotNet.Highcharts; using DotNet.Highcharts....

highcharts做柱状图与曲线图【代码】【图】

1、WebRoot下导入两个js文件，并引入到jsp里650) this.width=650;" src="/upload/getfiles/default/2022/11/10/20221110071338743.jpg" title="QQ图片20151217160944.png" /><script type="text/javascript" src="js/highcharts/js/highcharts.js"></script> <script type="text/javascript" src="js/highcharts/js/modules/exporting.js"></script>2、创建一个div，存放图<div id="main"style="float: left; width: 780;height:40...

highcharts点击切换，不能自适应宽度

$(".date-tab").on("click","a",function(){ $(this).addClass("cur").siblings("a").removeClass("cur"); $(".date-qushi").eq($(this).index()).show().siblings(".date-qushi").hide(); var chart = $(‘#container2‘).highcharts(); chart.reflow(); var chart2 = $(‘#container‘).highcharts(); chart2.reflow();})原文：http://www.cnblogs.com/vellemo/p/6400984.html

echarts和highcharts

highcharts是基于svg技术的 echarts基于canvas后者可以在浏览器中实现3D图形链接，这种效果highcharts是完全不可能做得到的。原文：http://www.cnblogs.com/rachelch/p/7509502.html

HighCharts基本折线图【图】

1、设计源码<!DOCTYPE html>  <html><head><title>HighCharts基本折线图</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width"><script type="text/javascript" src="../js/jquery-1.11.0.js"></script><scrip...

Highcharts动态添加点数据【代码】【图】

Highcharts用来作为图表数据的展示十分方便，效果也比较好。highcharts不仅可以实现死数据的展示，也能实现动态数据的实时添加显示，类似财经股票的实时刷新效果，实现过程并不难，大致如下。引用HighCharts 3.0后，可以对装载Highcharts图表的DIV容器加上一个方法highcharts()，该方法可以将图表装载到相应的容器中。js部分的代码如下：其中主要的方法包括function loadMoreDataForNoiseChart(seriesObj) {var series = series...

一次工作中用到的Highcharts.Chart【代码】【图】

一般动态获取图表信息都是通过ajax交互传送数据。这次是一次性从后台返回集合后，直接在页面取数据绘制图表引用js<script type="text/javascript" src="/js//jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/js/Highcharts-3.0.7/js/highcharts.js"></script>页面返回的集合有三个字段 ${listDailyActivity.lastvisit}是时间格式 2014-08-05${listDailyActivity.visitNum}是数量这两个字段用于绘制简单的时...

vue调用 Highcharts 实现多个数据可视化展示【图】

一创建一个 options.js 代码为：export const option1 = {bar: {title: {text: ‘珠海猪场‘ // 指定图表标题},credits: {enabled: false},chart: {backgroundColor: ‘black‘,type: ‘bar‘},plotOptions: {column: {colorByPoint: true},line: {dataLabels: {// 开启数据标签enabled: true}// 关闭鼠标跟踪，对应的提示框、点击事件会失效// enableMouseTracking: false}},xAxis: {categories: [‘今日已入场‘, ‘已交易单次‘...

nodejs搭配phantomjs highcharts后台生成图表【代码】【图】

简单分享一下，后台使用nodejs结合highcharts、phantomjs生成报表图片的方法。这主要应用在日报邮件。主要参考以下资料：http://www.highcharts.com/component/content/article/2-news/52-serverside-generated-charts#phantom_usagehttps://bitbucket.org/ariya/phantomjs/downloadshttps://github.com/highslide-software/highcharts.com/tree/master/exporting-server/phantomjs 这里整个目录都需要下载关键是使用phantomjs模拟...

highcharts 根据表格转化为不同的图表【代码】【图】

<!doctype html><html lang="zh"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript" src="js/highcharts.js"></script><script type="text/javascript" src="js/modules/data.js"></script><script type="text/javascript">$(document).ready(function(){changeChart(‘line‘);$("button.btnChart")....

将Highcharts图表数据生成Table表格【代码】【图】

有的时候，我们不仅仅需要漂亮的统计图来显示统计结果，还需要在统计图下方一个表格可以更加直观的展现各类数据。既然统计图都显示出来了，那我们可以根据统计图的各元素生成表格了。　　首先，先显示统计图。　　Html----通过一个查询按钮，根据查询条件，查询满足条件的数据，显示到统计图中。<a onclick="Query();">查询</a><center> <div id="chartPro" style="width: 80%"></div> <div id="container" style="width:700px...

Highcharts+Ajax+Json+Sturts2实现的图形异步实时刷新的一个简单demo【图】

原文：Highcharts+Ajax+Json+Sturts2实现的图形异步实时刷新的一个简单demo源代码下载地址：http://www.zuidaima.com/share/1550463370480640.htm 此功能可以用在后端对数据的实时抓取，前端动态更新时使用，可以根据数据的变化进行实时刷新，基于之前我上传的一个图形demo改制。如有意见建议，疑问，大家可以留言一起探讨。源代码截图：原文：http://blog.csdn.net/springmvc_springdata/article/details/39076751

首页 / HIGHCHARTS / .NET 使用 Highcharts生成扇形图 柱形图

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【.NET 使用 Highcharts生成扇形图 柱形图】教程文章相关的互联网学习教程文章

HIGHCHARTS - 相关标签

HIGHCHARTS - 技术教程分类

HIGHCHARTS - 最新教程

HIGHCHARTS - 最热教程

首页 / HIGHCHARTS / .NET 使用 Highcharts生成扇形图柱形图

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

【.NET 使用 Highcharts生成扇形图柱形图】教程文章相关的互联网学习教程文章