具体实现的效果如图：

aaarticlea/png;base64,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" alt="" />

具体代码：

ASP.NET前台脚本代码：

  1. <%@ Page Title="" Language="C#" MasterPageFile="~/MyHome/MasterPage.master" AutoEventWireup="true" CodeFile="ryfb.aspx.cs" Inherits="MyHome_tixi_ryfb" %>
  2.  
  3. <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
  4. <script type="text/javascript" src="http://www.cnblogs.com/JScript/JQuery/jquery-1.4.2.min.js"></script>
  5. <script type="text/javascript" src="http://www.cnblogs.com/JScript/JQuery/Highcharts/highcharts.js"></script>
  6. <script type="text/javascript" src="http://www.cnblogs.com/JScript/JQuery/Highcharts/modules/exporting.js"></script>
  7. <script type="text/javascript">
  8.     var chart;
  9.     $(document).ready(function() {
  10.         chart = new Highcharts.Chart({
  11.             chart: {
  12.                 renderTo: 'container',
  13.                 defaultSeriesType: 'bar'
  14.             },
  15.             title: {
  16.                 text: '人员体系分布情况'
  17.             },
  18.             subtitle: {
  19.                 text: 'Source: 下级人员'   //图标的副标题
  20.             },
  21.             xAxis: {
  22.                 categories: <%= xAxisCategories %>,//从后台获取数据
  23.                 tickPixelInterval:0.2,
  24.                 title: {
  25.                     text: null
  26.                 }
  27.             },
  28.             yAxis: {
  29.                 min: ,
  30.                 title: {
  31.                     text: '人数 (个)',
  32.                     align: 'high'
  33.                 }
  34.             },
  35.             tooltip: {
  36.                 formatter: function() {
  37.                     return ''+
  38.                          this.series.name +': '+ this.y +' 个';
  39.                 }
  40.             },
  41.             plotOptions: {
  42.                column: {
  43.                         pointPadding: 0.3,
  44.                         borderWidth:
  45.                     },
  46.                 bar: {
  47.                     dataLabels: {
  48.                         enabled: true
  49.                     }
  50.                 }
  51.             },
  52.             legend: {
  53.                 layout: 'horizontal',
  54.                 align: 'center',
  55.                 verticalAlign: 'top',
  56.                 y: ,
  57.                 borderWidth: ,
  58.                 backgroundColor: '#FFFFFF',
  59.                 borderColor: '#CCC',
  60.                 shadow: true
  61.             },
  62.             credits: {
  63.                 enabled: false
  64.             },
  65.             series: <%= returnValue %> //此处数据从后台获取
  66.         });
  67.     });
  68. </script>
  69. </asp:Content>
  70. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
  71. <div class="profile">
  72.     <div class="profile_title">
  73.         <h2>人员分布</h2>
  74.     </div>
  75. </div>
  76. <div id="container" style="width: 700px; height: <%=containerHeight%>; margin: 0 2em"></div>
  77. <div class="result"></div>
  78. </asp:Content>

CS获取数据并处理数据的代码段：

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using LHCYW.Core.DataAccess;
  8. using System.Data;
  9.  
  10. public partial class MyHome_tixi_ryfb : System.Web.UI.Page
  11. {
  12.     public string returnValue = "";//"[{name: '人员体系城市分布情况',data: [15,18,13,13,10,16,23,23]}]";
  13.     public string xAxisCategories = "";//"['北京市', '上海市', '重庆市', '天津市','抚州市','长沙市','常德市','济南市']";
  14.     public string containerHeight = "400px";
  15.     protected void Page_Load(object sender, EventArgs e)
  16.     {
  17.         if (!IsPostBack)
  18.         {
  19.             XTUserDataAccess l_XTUserDataAccess = new XTUserDataAccess();
  20.             DataTable dt = l_XTUserDataAccess.GetRYFB(LHCYW.Core.WebSession.User.DTG);
  21.             if (dt.Rows.Count > )
  22.             {
  23.                 if (dt.Rows.Count > )
  24.                 {
  25.                     containerHeight = (dt.Rows.Count * ).ToString() + "px";
  26.                 }
  27.                 else
  28.                 {
  29.                     containerHeight = "200px";
  30.                 }
  31.                 string dataY = "[{name: '人员体系城市分布情况',data: [";
  32.                 string dataX = "[";
  33.                 foreach (DataRow dr in dt.Rows)
  34.                 {
  35.                     dataX += "'" + dr["CS"].ToString() + "',";
  36.                     dataY += dr["NUM"].ToString() + ",";
  37.                 }
  38.                 xAxisCategories = dataX.Substring(, dataX.Length - ) + "]";
  39.                 returnValue = dataY.Substring(, dataY.Length - ) + "]}]";
  40.             }
  41.         }
  42.     }
  43. }

ASP.NET中动态获取数据使用Highcharts图表控件【Copy By Internet】的更多相关文章

  1. 在ASP.NET中动态加载内容（用户控件和模板）

    在ASP.NET中动态加载内容(用户控件和模板) 要点: 1． 使用Page.ParseControl 2． 使用base.LoadControl 第一部分:加载模板 下 面是一个模板“<tab ...

  2. 转：Highcharts图表控件的使用

    摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...

  3. 在AngularJS中的使用Highcharts图表控件

    一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...

  4. ASP.NET中共有哪几种类型的控件？其中，HTML控件、HTML服务器控件和WEB服务器控件之间有什么区别

    ASP.NET的控件包括WEB服务器控件.WEB用户控件.WEB自定义控件.HTML服务器控件和HTML控件.HTML控件.HTML服务器控件和WEB服务器控件之间的区别如下所示.q      HTM ...

  5. ASP.NET Core MVC TagHelper实践HighchartsNET快速图表控件-开源

    ASP.NET Core MVC TagHelper最佳实践HighchartsNET快速图表控件支持ASP.NET Core. 曾经在WebForms上写过 HighchartsNET快速图表控件- ...

  6. JQuery Highcharts图表控件多样式显示多组数据

    具体实现的效果如图: 具体代码: ASP.NET前台脚本代码: <%@ Page Language="C#" AutoEventWireup="true" ...

  7. ASP.NET中Textbox后的必填验证控件RequiredFieldValidator的使用方法。

    制作效果如下: 实现方法: 1. 拖动RequiredFieldValidator控件到相应的textbox后位置,点击属性面板,输入ErroMessage相应信息,更改ForeColor为红色 设置 ...

  8. asp.net微软图表控件MsChart

    前段时间,开发项目时,由于需要,需要将一些数据统计,并以图表形式显示.由于是asp.net,所以就找到了MsChart图表控件,还是挺方便实用的,分享一下. MsChart控件的主要组成如图所示 工具 ...

  9. highcharts动态获取数据生成图表问题

    动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给x轴与y轴(这里指的是你X轴与Y轴都是变化的数据,如果你的X轴是固定的,像时间等等的那就另说).  柱状图的动态传值: //获取后台数据 va ...

随机推荐

  1. remoting技术

    转: http://www.cnblogs.com/rickie/category/5082.html

  2. 说说Thread.Sleep(0)的那些奇怪的事

    写在前面 最近在弄一个传输组件,用到很多多线程的知识,其中有个问题,困扰我很久,不知道是什么原因,脑子一热,在传输过程中,添加了一句代码Thread.Sleep(0).那个问题竟然解决了,耗费我一上午 ...

  3. 利用 NGINX 最大化 Python 性能，第一部分：Web 服务和缓存

    [编者按]本文主要介绍 nginx 的主要功能以及如何通过 NGINX 优化 Python 应用性能.本文系国内 ITOM 管理平台 OneAPM 编译呈现. Python 的著名之处在于使用简单方便 ...

  4. 2015年4月 非常干货之Python资源大全

    [非常干货之Python资源大全]Python是一门美妙的语言,简单易用,容易提升.它是一门主流语言,却没有其它专业语言的弊病,从游戏,ML,GUI到科学和数学有着巨量的函数库. 直击现场 <H ...

  5. appserv安装

    Appserv  官网: http://www.appservnetwork.com/ 安装好后,输入http://localhost:8082/验证是否装成功,成功后如下图

  6. asp.net dataTable添加列

    DataTable dtNew = new DataTable(); dtNew.Columns.Add("ItemNo");//序列号列 dtNew.Columns.Add(&q ...

  7. TCP非阻塞accept和非阻塞connect

    http://blog.chinaunix.net/uid-20751538-id-238260.html 非阻塞accept     当一个已完成的连接准备好被accept的时候,select会把监 ...

  8. 给View换字体

    注意,给View换字体是直接换.在Delegate里换的只是某一列的字体 class delegate : public QStyledItemDelegate { public: ) : QStyl ...

  9. WordPress主题制作教程7：引用其他php的方法

    在模板中包含指定的模板文件,指定{slug}和{name}就可以包含文件{slug}-{name}.php,如果没有这个文件则包含{slug}.php文件 <?php get_template_ ...

  10. Java：IO流之字节流InputStream、OutputStream详解

    字节流: (抽象基类)InputStream类(读): (抽象基类)OutputStream类(写):   InputStream: 构造方法摘要 InputStream()              ...