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

欢迎大家共同交流！