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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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

欢迎大家共同交流！