具體見代碼中的注視說明：
代碼
<%@ 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', //圖表類型line, spline, area, areaspline, column, bar, pie , scatter
//zoomType: 'x', //放大
inverted: false //左右顯示，預設上下正向
},
title: {
text: 'ITOMS工作量統計', //圖示的标題
style:{} //标題樣式
subtitle: {
text: '按中心統計' //圖示的副标題
xAxis: {
categories: <%= xAxisCategories %>, //X軸的坐标值
labels: {
rotation: -45,
align: 'right',
style: {font: 'normal 13px 宋體'}
}
yAxis: {
min: 0,
title: {text: '數量（小時/個數）'} //Y軸坐标标題 labels:縱柱标尺
legend: { //【圖例】位置樣式
layout: 'horizontal', //【圖例】顯示的樣式：水準（horizontal）/垂直（vertical）
backgroundColor: '#FFFFFF',
borderColor: '#CCC',
borderWidth: 1,
align: 'center',
verticalAlign: 'top',
enabled:true,
//x: 100,
y: 50,
//floating: true,
shadow: true
//loading: { 需要配合chart.showLoading();使用
// hideDuration: 10000,
// showDuration: 10000
//},
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 //圖表柱形的粗細
//pointWidth:15 你想顯示的寬度(number型）
},bar: {
dataLabels: {
enabled: false
}
series:<%= returnValue %>
});
//chart.showLoading();
});
</script>
<div id="container" style="min-width: 800px; height: 500px; margin: 0 2em"></div>
<div class="result"></div>
</form>
</body>
</html>
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;
public partial class WorkDoneChartByCenter : System.Web.UI.Page
{
public string returnValue = "[{name: '任務單數量',data: [370.0,162.0,13,13,370.0,162.0,13,13]}, {name: '計劃工時（小時）',data: [120,23,25,2,370.0,162.0,13,13]}, {name: '實際人數',data: [60,43,65,20,30.0,12.0,13,103]}, {name: '實際工時（小時）',data: [89,57,114,26,32,52.0,43,63]}]";
public string xAxisCategories = "['IT中心部門', '創前萬博考試', '電大服務中心', '考試服務中心','财務部','學生服務中心','職教中心','總經辦']";
protected void Page_Load(object sender, EventArgs e)
{
}
}
截圖：截出來圖檔的顔色丢失，實際顔色效果可以參考Highcharts官網提供的執行個體
作者：鄭某人 出處：http://jsonzheng.cnblogs.com 歡迎轉載或分享，但請務必聲明文章出處。如果文章對您有幫助，希望你能推薦或關注。