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

欢迎大家共同交流！