在vs中，如果要使用柱形图，我们大多数使用第三方提供的插件，所以必须要引用样式，这里我使用的是Highcharts-4.1.9插件，百度一下就可以下载到。

关键的js代码：

 <script src="../Highcharts-4.1.9/js/jquery-1.8.2.min.js"></script>

        <style type="text/css">

        </style>

        <script type="text/javascript">

            $(function () {

                $('#container').highcharts({

                    chart: {

                        type: 'column'

                    },

                    title: {

                        text: '各科室出院人次统计'

                    },

                    subtitle: {

                        text: '柱形图'

                    },

                    xAxis: {

                        type: 'category',

                        labels: {

                            rotation: -,

                            style: {

                                fontSize: '13px',

                                fontFamily: 'Verdana, sans-serif'

                            }

                        }

                    },

                    yAxis: {

                        min: ,

                        title: {

                            text: '出院人次'

                        }

                    },

                    legend: {

                        enabled: false

                    },

                    tooltip: {

                        pointFormat: '{series.name}: <b>{point.y}</b><br/>'

                    },

                    series: <%= returnValue %>,

                    dataLabels: {

                        enabled: true,

                        rotation: ,

                        color: '#FFFFFF',

                        align: 'center',

                        format: '{point.y}', // one decimal

                        y: , // 10 pixels down from the top

                        style: {

                            fontSize: '13px',

                            fontFamily: 'Verdana, sans-serif'

                        }

                    }

                }]

            });

            });

</script>

//body里面内容

<body>
<form id="form1" runat="server">
<div class="easyui-panel" style="padding: 5px; margin-top:10px;">
<script src="../Highcharts-4.1.9/js/highcharts.js" type="text/javascript"></script>
<script src="../Highcharts-4.1.9/js/modules/exporting.js" type="text/javascript"></script>

<div id="container" style="min-width: 300px; height: 400px; margin: 0 auto"></div>
</div>
</form>
</body>

.net后台获取数据库数据填充：

public string returnValue = "";

public string containerHeight = "400px";

//关键性代码

DataTable dt = ((DataSet)rs).Tables[];

                if (dt.Rows.Count > )

                {

                    if (dt.Rows.Count > )

                    {

                        containerHeight = (dt.Rows.Count * ).ToString() + "px";

                    }

                    else

                    {

                        containerHeight = "200px";

                    }

                    string dataY = "[{name: '总费用',data: [";

                    foreach (DataRow dr in dt.Rows)

                    {

                        dataY += "['" + dr["名称"].ToString() + "'," + dr["总费用"].ToString() + "]" + ",";

                    }

                    returnValue = dataY + "]";

                }

大功告成，柱形图数据填充结束。

asp.net 柱形图的更多相关文章

  1. ASP.NET 简单的柱形图实现（附带示例）

    对于一些内部系统的项目,各种图表是在所难免的,因为图表可以更加清晰的表达出想看到的数据. 因为之前从来没有做过关于图表的东西,唯一能想到的就是“验证码”,所以应该是一个思路,用GDI去搞. 数据懒着去 ...

  2. Echarts 使用asp.net +ashx+ajax 实现 饼图、柱形图后台交互

    向上效果图 前端code /* * ------------------------------------------------------------------ * module-inform ...

  3. ASP.NET程序开发范例宝典

    在整理资料时发现一些非常有用的资料源码尤其是初学者,大部分是平时用到的知识点,可以参考其实现方法,分享给大家学习,但请不要用于商业用途. 如果对你有用请多多推荐给其他人分享. 点击对应章节标题下载本章 ...

  4. [知识库分享系列] 二、.NET（ASP.NET）

    最近时间又有了新的想法,当我用新的眼光在整理一些很老的知识库时,发现很多东西都已经过时,或者是很基础很零碎的知识点.如果分享出去大家不看倒好,更担心的是会误人子弟,但为了保证此系列的完整,还是选择分享 ...

  5. ASP.NET Web Pages：Chart 帮助器

    ylbtech-.Net-ASP.NET Web Pages:Chart 帮助器 1.返回顶部 1. ASP.NET Web Pages - Chart 帮助器 Chart 帮助器 - 众多有用的 A ...

  6. C# ASP.NET MVC 之 SignalR 学习 实时数据推送显示 配合 Echarts 推送实时图表

    本文主要是我在刚开始学习 SignalR 的技术总结,网上找的学习方法和例子大多只是翻译了官方给的一个例子,并没有给出其他一些经典情况的示例,所以才有了本文总结,我在实现推送简单的数据后,就想到了如何 ...

  7. Webservice WCF WebApi 前端数据可视化 前端数据可视化 C# asp.net PhoneGap html5 C# Where 网站分布式开发简介 EntityFramework Core依赖注入上下文方式不同造成内存泄漏了解一下？ SQL Server之深入理解STUFF 你必须知道的EntityFramework 6.x和EntityFramework Cor

    Webservice WCF WebApi   注明:改编加组合 在.net平台下,有大量的技术让你创建一个HTTP服务,像Web Service,WCF,现在又出了Web API.在.net平台下, ...

  8. JFreeChart生成柱形图(2) (转自 JSP开发技术大全)

    JFreeChart生成柱形图(2) (转自 JSP开发技术大全) 14.2 利用JFreeChart生成柱形图14.2.1 利用DefaultCategoryDataset数据集绘制柱形图 通过JF ...

  9. asp.net core 集成 Prometheus

    asp.net core 集成 prometheus Intro Prometheus 是一个开源的现代化,云原生的系统监控框架,并且可以轻松的集成 PushGateway, AlertManager ...

随机推荐

  1. java 编程时候的性能调优

    一.避免在循环条件中使用复杂表达式 在不做编译优化的情况下,在循环中,循环条件会被反复计算,如果不使用复杂表达式,而使循环条件值不变的话,程序将会运行的更快. 例子: import java.util ...

  2. [xcode]instruments来检验你的app

      原文网址:http://www.cocoachina.com/industry/20140114/7696.html     比较了好多关于instruments 还是发现老外写的比较牛逼.于是果 ...

  3. quick lua目录结构

    http://cn.cocos2d-x.org/tutorial/show?id=1138 http://cn.cocos2d-x.org/tutorial/show?id=2385

  4. SlickGrid example 6:Ajax加载

    Ajax加载.   代码:   <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Ty ...

  5. jqeury轮播

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. C# 添加.DLL 出错的解决方法

    解决方法:    1.     注册组件:       运行--cmd--regsvr32 dll的绝对路径名(例如: regsvr32  C:\bin\EFGateWayOfERP.dll) 如果注 ...

  7. u Calculate e 分类： HDU 2015-06-19 22:18 14人阅读 评论(0) 收藏

    u Calculate e Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...

  8. java单元测试(Junit)

    Eclipse最基本的模块测试 1:首先创建一个java工程,在工程中创建一个被单元测试的Student数据类,如下: package UnitTest; public class Student { ...

  9. 如何使用不同参数组合生成独立的TestCase函数（Python）

    在使用selenium2 Python做自动化测试的时候遇到个问题,写一个testcase 生成报告后,会有一个case的执行状态记录.这样我们写一个登录功能的自动化用例,只写一个case显然是不行的 ...

  10. django学习の模型

    orm:对象数据库和模型的映射.如果想以简单的方式去操作数据库,例如用类的方式去操作,就像 p = Person.get(id = 1),那么就必须使得代码和数据库的结构具有映射关系,实现这种关系,你 ...