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 ...
随机推荐
- ios 5
1.屏幕尺寸568×2/320×2 需要一张568h@2x.png的图片. 2.iOS5不支持udid,用uuid替代,取得uuid方法: -(NSString*) uuid { CFUUIDRef ...
- sql注入分类
Sql注入根据数据提取通道的类型,从服务器接收到的响应等可以分为不同的类型. 基于从服务器接收到的响应 ▲基于错误的SQL注入 ▲联合查询的类型 ▲堆查询注射 ▲SQL盲注 •基于布尔SQL盲注 •基 ...
- vi/vim使用指北 ---- Sample Editing
本篇介绍vim的基础操作,各种编辑模式的切换,光标的移动,删除,撤销/重做,保存,查找等基础命令: 基础操作 编辑文件 vim [options] [file ...] 模式 打开文件后进入vim的 ...
- 分布式数据存储 - MySQL双主复制
上篇文章<分布式数据存储 - MySQL主从复制>,我们说到MySQL主从复制很好的保障了从库,读的高可用性.so,问题来了: 1.针对主库,写的高可用性又是如何做到高可用性? 2.如果需 ...
- codeforces 430A Points and Segments (easy)(理解能力有待提高……)
题目 //终于看懂题目了,,,, //一条线段里面不是每个坐标上都有要染色的点,所以为了满足条件,只能考虑那些给出坐标的点 //所以就要排序一下了,不能直接根据坐标0 1 0 1…… #include ...
- 安装wps for linux无法启动
我下载的是deb包,双击安装完之后,打开wps没有反应,重启了一下 计算机也不行. 改从命令行出现如下信息: /opt/kingsoft/wps-office/office6/wps: error w ...
- hdu 3658 How many words
思路: 构造矩阵,矩阵快速幂!!! 代码如下: #include<cstdio> #include<vector> #include<cmath> #include ...
- java理论基础学习三
Eclipse 是一个开放源码的.基于java的可扩展开发平台 最初主要用来java语言开发,但目前也有人通过插件使其作为其它计算机语言比如C++.python.安卓的开发 下载地址:http://e ...
- Spark源码编译
原创文章,转载请注明: 转载自http://www.cnblogs.com/tovin/p/3822995.html spark源码编译步骤如下: cd /home/hdpusr/workspace ...
- const以及入栈出栈
#include "stdafx.h"#include <iostream>using namespace std; class StringStack{ enum{s ...