ASP.NET中动态获取数据使用Highcharts图表控件【Copy By Internet】
具体实现的效果如图:
具体代码:
ASP.NET前台脚本代码:
<%@ Page Title="" Language="C#" MasterPageFile="~/MyHome/MasterPage.master" AutoEventWireup="true" CodeFile="ryfb.aspx.cs" Inherits="MyHome_tixi_ryfb" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript" src="http://www.cnblogs.com/JScript/JQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/JScript/JQuery/Highcharts/highcharts.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/JScript/JQuery/Highcharts/modules/exporting.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'bar'
},
title: {
text: '人员体系分布情况'
},
subtitle: {
text: 'Source: 下级人员' //图标的副标题
},
xAxis: {
categories: <%= xAxisCategories %>,//从后台获取数据
tickPixelInterval:0.2,
title: {
text: null
}
},
yAxis: {
min: ,
title: {
text: '人数 (个)',
align: 'high'
}
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +' 个';
}
},
plotOptions: {
column: {
pointPadding: 0.3,
borderWidth:
},
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'top',
y: ,
borderWidth: ,
backgroundColor: '#FFFFFF',
borderColor: '#CCC',
shadow: true
},
credits: {
enabled: false
},
series: <%= returnValue %> //此处数据从后台获取
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="profile">
<div class="profile_title">
<h2>人员分布</h2>
</div>
</div>
<div id="container" style="width: 700px; height: <%=containerHeight%>; margin: 0 2em"></div>
<div class="result"></div>
</asp:Content>
CS获取数据并处理数据的代码段:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using LHCYW.Core.DataAccess;
using System.Data; public partial class MyHome_tixi_ryfb : System.Web.UI.Page
{
public string returnValue = "";//"[{name: '人员体系城市分布情况',data: [15,18,13,13,10,16,23,23]}]";
public string xAxisCategories = "";//"['北京市', '上海市', '重庆市', '天津市','抚州市','长沙市','常德市','济南市']";
public string containerHeight = "400px";
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
XTUserDataAccess l_XTUserDataAccess = new XTUserDataAccess();
DataTable dt = l_XTUserDataAccess.GetRYFB(LHCYW.Core.WebSession.User.DTG);
if (dt.Rows.Count > )
{
if (dt.Rows.Count > )
{
containerHeight = (dt.Rows.Count * ).ToString() + "px";
}
else
{
containerHeight = "200px";
}
string dataY = "[{name: '人员体系城市分布情况',data: [";
string dataX = "[";
foreach (DataRow dr in dt.Rows)
{
dataX += "'" + dr["CS"].ToString() + "',";
dataY += dr["NUM"].ToString() + ",";
}
xAxisCategories = dataX.Substring(, dataX.Length - ) + "]";
returnValue = dataY.Substring(, dataY.Length - ) + "]}]";
}
}
}
}
ASP.NET中动态获取数据使用Highcharts图表控件【Copy By Internet】的更多相关文章
- 在ASP.NET中动态加载内容(用户控件和模板)
在ASP.NET中动态加载内容(用户控件和模板) 要点: 1. 使用Page.ParseControl 2. 使用base.LoadControl 第一部分:加载模板 下 面是一个模板“<tab ...
- 转:Highcharts图表控件的使用
摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...
- 在AngularJS中的使用Highcharts图表控件
一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...
- ASP.NET中共有哪几种类型的控件?其中,HTML控件、HTML服务器控件和WEB服务器控件之间有什么区别
ASP.NET的控件包括WEB服务器控件.WEB用户控件.WEB自定义控件.HTML服务器控件和HTML控件.HTML控件.HTML服务器控件和WEB服务器控件之间的区别如下所示.q HTM ...
- ASP.NET Core MVC TagHelper实践HighchartsNET快速图表控件-开源
ASP.NET Core MVC TagHelper最佳实践HighchartsNET快速图表控件支持ASP.NET Core. 曾经在WebForms上写过 HighchartsNET快速图表控件- ...
- JQuery Highcharts图表控件多样式显示多组数据
具体实现的效果如图: 具体代码: ASP.NET前台脚本代码: <%@ Page Language="C#" AutoEventWireup="true" ...
- ASP.NET中Textbox后的必填验证控件RequiredFieldValidator的使用方法。
制作效果如下: 实现方法: 1. 拖动RequiredFieldValidator控件到相应的textbox后位置,点击属性面板,输入ErroMessage相应信息,更改ForeColor为红色 设置 ...
- asp.net微软图表控件MsChart
前段时间,开发项目时,由于需要,需要将一些数据统计,并以图表形式显示.由于是asp.net,所以就找到了MsChart图表控件,还是挺方便实用的,分享一下. MsChart控件的主要组成如图所示 工具 ...
- highcharts动态获取数据生成图表问题
动态获取数据说白点就是从后台传值到前台,前台把这些值赋值给x轴与y轴(这里指的是你X轴与Y轴都是变化的数据,如果你的X轴是固定的,像时间等等的那就另说). 柱状图的动态传值: //获取后台数据 va ...
随机推荐
- PE文件信息获取工具-PEINFO
能实现基本的信息获取 区段信息 数据目录信息 导入表函数分析 导出表函数分析,能同时解析只序号导出和以函数名序号同时导出的函数 FLC计算 需要源码的可以留邮箱.
- Hadoop 系统配置 map 100% reduce 0%
之前在本地配置了hadoop伪分布模式,hdfs用起来没问题,mapreduce的单机模式也没问题. 今天写了个程序,想在伪分布式上跑一下mapreduce,结果出现 map 100% reduce ...
- JavaScript 中的 this
JavaScript 语言中的 this 由于其运行期绑定的特性,JavaScript 中的 this 含义要丰富得多,它可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式.JavaSc ...
- code::blocks 初使用遇到的问题记录
/* 做本程序遇到的问题:由于使用的是CODE::BLOCKS 开发环境,刚开始使用code::blocks是,什么都 没有设置,居然输入的中文字符串,保存项目后,再次打开,code::blocks不 ...
- mydate97时间控件最大值最小值限制及Javascript日期判断大小
<script language="javascript" type="text/javascript" src="<%=basePath ...
- POJ 2185 Milking Grid (KMP,求最小覆盖子矩阵,好题)
题意:给出一个大矩阵,求最小覆盖矩阵,大矩阵可由这个小矩阵拼成.(就如同拼磁砖,允许最后有残缺) 正确解法的参考链接:http://poj.org/showmessage?message_id=153 ...
- 40页PPT告诉你真正的"互联网+"
点这里 40页PPT告诉你真正的"互联网+" 2015-04-06 网站分析公会 超过50万名互联网从业人士关注 互联网运营领域最具影响力自媒体 本文根据和君赵大伟关于互联网思维大 ...
- Linux静态库和动态库
Linux 工具 ❑ GCC: The GNU Compiler Collection, containing the GNU C compiler❑ G++: A C++ compiler, inc ...
- GSM、3G、LTE、4G
3GPP(The 3rd Generation Partnership Project)3GPP的目标是实现由2G网络到3G网络的平滑过渡,保证未来技术的后向兼容性,支持轻松建网及系统间的漫游和兼容性 ...
- Oracle创建用户并赋予权限
1 CREATE USER username IDENTIFIED BY password; --这个是创建用户(这是最简单的创建语句没有指定表空间) 1 GRANT CREATE SESSION T ...