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:[email protected]  QQ:331773812

欢迎大家共同交流!

你可能感兴趣的:(Highcharts)