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 ...
随机推荐
- 平面最小割—BZOJ 1001
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1001 很有意思的题目,本来想直接上网络流,但是发现点太多,边太多2333. 直接网络流无法 ...
- Unity 3D 游戏上线之后的流水总结
原地址:http://tieba.baidu.com/p/2817057297?pn=1 首先.unity 灯光烘焙 :Unity 3D FBX模型导入.选项Model 不导入资源球.Rig 不导入骨 ...
- Extjs文本输入框
var loginForm = Ext.create('Ext.form.Panel', { title: '单行输入', renderTo: Ext.getBody( ...
- Linux系统下利用wget命令把整站下载做镜像网站
Linux系统下利用wget命令把整站下载做镜像网站 2011-05-28 18:13:01 | 1次阅读 | 评论:0 条 | itokit 在linux下完整的用wget命令整站采集网站做镜像 ...
- Linuxshell脚本之if条件判断
IF条件判断 .基本语法: if [ command ]; then 符合该条件执行的语句 fi .扩展语法: if [ command ];then 符合该条件执行的语句 elif [ comman ...
- POJ 2021 Relative Relatives(map+树的遍历)
题意: 今天是Ted的100岁生日.凑巧的是,他家族里面每个人都跟他同一天生日,但是年份不同. 现在只给出一些 父亲的名字,孩子的名字,以及孩子出生时父亲的年龄, 要求将Ted以外的家族成员按年龄降序 ...
- iOS-JS交互 (WebViewJavascriptBridge)
, , , ); messageButton.titleLabel.font = font; messageButton.backgroundColor = [UIColor colo ...
- D&F学数据结构系列——前驱和后继
前驱和后继 本文所述为二叉排序树的前驱和后继,如果想了解二叉排序树的概念,可以参考我的博文http://www.cnblogs.com/sage-blog/p/3864640.html 给定一个二叉查 ...
- java 格式化代码 不进行换行
此处无声胜有声.
- App自适应
http://blog.csdn.net/newjueqi/article/details/42779221