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 ...
随机推荐
- .NET设计模式(4):建造者模式(Builder Pattern)(转)
概述 在软件系统中,有时候面临着“一个复杂对象”的创建工作,其通常由各个部分的子对象用一定的算法构成:由于需求的变化,这个复杂对象的各个部分经常面临着剧烈的变化,但是将它们组合在一起的算法确相对稳定. ...
- Node.js NPM国内镜像
NPM国内镜像 http://npm.hacknodejs.com/ http://registry.npmjs.vitecho.com/ https://registry.npm.taobao.or ...
- 定位position详解:relative与absolute
定位标签:position 包含属性:relative(相对) absolute(绝对) 1.position:relative; 如果对一个元素进行相对定位,首先它将出现在它所在的位置上.然后通过设 ...
- CkEditor 插件开发
CKEditor的插件开发其实很简单只需要两步.1.通过CKEditor.plugins.add()方法编写插件的逻辑主体, 2.告诉CKEditor我们有一个自定义插件需要添加进来. //创建插件逻 ...
- Unity bundle的制作和使用
原地址:http://unity3d.9ria.com/?p=2863 Unity有个很好的功能,大致是很多专注于PC的engine没有提供的(因为没有必要),就是能加载主包外的资源,这个主包外的资源 ...
- Google Chrome 浏览器禁用缓存
在使用 Google Chrome 浏览器调试 js 时,会发现修改完 js 不会立即生效,这是由于 chrome 浏览器缓存的原因,而在火狐下没有这个问题.经常使用 chrome 浏览器调试 js ...
- Python - 装饰器使用过程中的误区
曾灵敏 - APRIL 27, 2015 装饰器基本概念 大家都知道装饰器是一个很著名的设计模式,经常被用于AOP(面向切面编程)的场景,较为经典的有插入日志,性能测试,事务处理,Web权限校验, C ...
- OSX Mavericks下使用Synergy进行多台主机通过wifi共享键鼠问题的解决方法
转帖: OSX 10.9 几天用下来还是遇到几处问题的:之前先是遇到了OSX Mavericks GM598无法从Appstore升级到完全正式版的问题,下载无反应,后来找到了解决方法,发在以下链接: ...
- hdu 1848 Fibonacci again and again (初写SG函数,详解)
思路: SG函数的应用,可取的值为不连续的固定值,可用GetSG求出SG,然后三堆数异或. SG函数相关注释见代码: 相关详细说明请结合前一篇博客: #include<stdio.h> # ...
- 6 tips for recovering from a flop
6 tips for recovering from a flop职场没有失败:6招走出工作失误阴影"We all make mistakes, if we're going to lear ...