[转载]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" %>
<script src="http://www.cnblogs.com/JScript/JQuery/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="http://www.cnblogs.com/JScript/JQuery/Highcharts/highcharts.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/JScript/JQuery/Highcharts/modules/exporting.js" type="text/javascript"></script> <script type="text/javascript">// <!&#91;CDATA&#91;
    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 %> //此处数据从后台获取
        });
    });
// &#93;&#93;></script>
<div class="profile">
<div class="profile_title">
<h2>人员分布</h2>
</div>
</div>

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) + "]}]";
}
}
}
}

代码下载：点击我下载