前台代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SignIssuedCharts.aspx.cs" Inherits="TailGasMonitor.Web.Sign.SignIssuedCharts" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/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.5,
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>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="container" style="width: 700px; height: <%=containerHeight%>; margin: 0 2em"></div>
</div>
</form>
</body>
</html>
背景代碼：
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace TailGasMonitor.Web.Sign
{
public partial class SignIssuedCharts : System.Web.UI.Page
{
public string returnValue = "";//"[{name: '總量',data: [1,2]}]";
public string xAxisCategories = "";//"['一号發标點', '二号發表點']";
public string containerHeight = "400px";
BLL.T_DATA_SIGNISSUED bll = new BLL.T_DATA_SIGNISSUED();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();
}
}
protected void BindData()
{
DataTable dt = bll.GetSignIssuedList("-1", "-1", null, null);
if (dt.Rows.Count > 0)
{
if (dt.Rows.Count > 4)
{
containerHeight = (dt.Rows.Count * 50).ToString() + "px";
}
else
{
containerHeight = "200px";
}
string dataY1 = "[{name: '總量',data: [";
string dataY2 = "{name: '有效量',data: [";
string dataY3 = "{name: '無效量',data: [";
string dataY4 = "{name: '廢棄量',data: [";
string dataX = "[";
foreach (DataRow dr in dt.Rows)
{
dataX += "'" + dr["pointname"].ToString() + "',";
dataY1 += dr["zlnum"].ToString() + ",";
dataY2 += dr["yxnum"].ToString() + ",";
dataY3 += dr["wxnum"].ToString() + ",";
dataY4 += dr["zfnum"].ToString() + ",";
}
xAxisCategories = dataX.Substring(0, dataX.Length - 1) + "]";
returnValue = dataY1.Substring(0, dataY1.Length - 1) + "]}," + dataY2.Substring(0, dataY2.Length - 1) + "]},"
+ dataY3.Substring(0, dataY3.Length - 1) + "]}," + dataY4.Substring(0, dataY4.Length - 1) + "]}]";
}
}
}
}
![ASP.NET2.0下使用AJAX調用Webservice的方法[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)