ASP.NET中动态获取数据使用Highcharts图表控件

ASP.NET中动态获取数据使用Highcharts图表控件

Highcharts 官网:http://www.highcharts.com

Highcharts 官网示例:http://www.highcharts.com/demo/

Highcharts 官网文档:http://www.highcharts.com/documentation/how-to-use

Highcharts 官网参考手册:http://www.highcharts.com/ref/#credits--enabled

 

具体实现的效果如图:

 

 

 

 

具体代码:

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: 
0,
                title: {
                    text: 
'人数 (个)',
                    align: 
'high'
                }
            },
            tooltip: {
                formatter: 
function() {
                    
return ''+
                         
this.series.name +''+ this.y +' 个';
                }
            },
            plotOptions: {
               column: {
                        pointPadding: 
0.3,
                        borderWidth: 
0 
                    },
                bar: {
                    dataLabels: {
                        enabled: 
true
                    }
                }
            },
            legend: {
                layout: 
'horizontal',
                align: 
'center',
                verticalAlign: 
'top',
                y: 
50,
                borderWidth: 
1,
                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 > 0)
            {
                
if (dt.Rows.Count > 4)
                {
                    containerHeight 
= (dt.Rows.Count * 50).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(0, dataX.Length - 1+ "]";
                returnValue 
= dataY.Substring(0, dataY.Length - 1+ "]}]";
            }
        }
    }
}

 

代码下载:点击我下载

 

另附广告:女朋友的淘宝网店,为她做宣传,希望大家别介意,http://iyseek.taobao.com  欢迎大家逛逛,嘿嘿!
 

此文章是博主在实际开发过程中的代码处理,

如有需要帮助,请联系MSN:zheng331773812@hotmail.com  QQ:331773812

欢迎大家共同交流!

posted @ 2011-05-10 14:56  飞花雪月  阅读(4565)  评论(2编辑  收藏  举报