具體實現的效果如圖：
具體代碼：
ASP.NET前台腳本代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="WorkDoneChartByCenter.aspx.cs" Inherits="WorkDoneChartByCenter" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>工作量統計</title> <script type="text/javascript" src="JScript/jquery.min.js"></script> <script src="JScript/highcharts.js" type="text/javascript"></script> <script src="JScript/modules/exporting.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <script type="text/javascript"> var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'container', //放置圖表的容器 //defaultSeriesType: 'column', //圖表類型 inverted: true //左右顯示，默認上下正向 }, title: { text: 'ITOMS工作量統計 - 中心', //圖標的標題 style:{} //標題樣式 }, subtitle: { text: 'Source: itoms' //圖標的副標題 }, xAxis: { categories: <%= strXAxisCategories %>, //X軸的坐標值 labels: { rotation: -45, align: 'right', style: {font: 'normal 13px 宋體'} } }, yAxis: [{ labels: { formatter: function() { return this.value; }, style: { color: '#89A54E' } }, title: { text: '任務單/實際工時/計划工時的數量', style: { color: '#89A54E' } } }, { title: { text: '人員數量' }, labels: { formatter: function() { return this.value; }, style: { color: '#4572A7' } }, opposite: true }], legend: { //【圖例】位置樣式 layout: 'horizontal', //【圖例】顯示的樣式：水平（horizontal）/垂直（vertical） backgroundColor: '#FFFFFF', borderColor: '#CCC', borderWidth: 1, align: 'center', verticalAlign: 'top', enabled:true, y: 50, shadow: true }, tooltip: { formatter: function() { //當鼠標懸置數據點時的格式化提示 return '<b>'+ this.x +'</b><br/>'+ this.series.name + ': '+ Highcharts.numberFormat(this.y, 1); } }, credits: { enabled: false }, plotOptions: { column: { pointPadding: 0.2, //圖表柱形的 borderWidth: 0 //圖表柱形的粗細 },bar: { dataLabels: { enabled: false } } }, series:<%= seriesData.ToString() %> }); }); </script> <div id="container" style="min-width: 800px; height: 500px; margin: 0 2em"></div> <div class="result"></div> </form> </body> </html>
CS獲取數據並處理數據的代碼段：
using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using ITOMS.BusinessLogic.Report; using System.Text; public partial class WorkDoneChartByCenter : System.Web.UI.Page { public string strXAxisCategories = ""; public StringBuilder seriesData = new StringBuilder(); protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { StringBuilder xAxisCategories = new StringBuilder(); StringBuilder taskCount = new StringBuilder();//任務單數量 StringBuilder planHours = new StringBuilder();//計划工時（小時） StringBuilder peopleCount = new StringBuilder();//實際人數 StringBuilder realHours = new StringBuilder();//實際工時（小時） xAxisCategories.Append("["); ReportLogic Logic = new ReportLogic(); DataTable dataList = Logic.GetWorkDoneByCenter(); foreach (DataRow dr in dataList.Rows) { xAxisCategories.Append("'"); xAxisCategories.Append(dr["CenterName"] == null ? "未知中心" : dr["CenterName"].ToString()); xAxisCategories.Append("',"); taskCount.Append(dr.IsNull("taskCount") ? "0" : dr["taskCount"]); taskCount.Append(","); planHours.Append(dr.IsNull("planHours") ? "0" : dr["planHours"]); planHours.Append(","); realHours.Append(dr.IsNull("realHours") ? "0" : dr["realHours"]); realHours.Append(","); peopleCount.Append(dr.IsNull("peopleCount") ? "0" : dr["peopleCount"]); peopleCount.Append(","); } strXAxisCategories = xAxisCategories.Replace(",", "", xAxisCategories.Length - 1, 1).Append("]").ToString(); seriesData.Append("[{name: '任務單數量',type: 'column',data: ["); seriesData.Append(taskCount.Replace(",", "", taskCount.Length - 1, 1)); seriesData.Append("]}, {name: '計划工時（小時）',type: 'column',data: ["); seriesData.Append(planHours.Replace(",", "", planHours.Length - 1, 1)); seriesData.Append("]}, {name: '實際工時（小時）',type: 'column',data: ["); seriesData.Append(realHours.Replace(",", "", realHours.Length - 1, 1)); seriesData.Append("]}, {name: '人員數量',type: 'spline', yAxis: 1,data: ["); seriesData.Append(peopleCount.Replace(",", "", peopleCount.Length - 1, 1)); seriesData.Append("]}]"); } } }