JQuery Highcharts圖表控件使用說明
Highcharts 官網：http://www.highcharts.com
Highcharts 官網示例：http://www.highcharts.com/demo/
Highcharts 官網文檔：http://www.highcharts.com/documentation/how-to-use
具體見代碼中的注視說明：
代碼<%@ 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//圖表柱形的粗細
},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>
<!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;
publicpartialclass WorkDoneChartByCenter : System.Web.UI.Page
{
publicstring 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]}]";
publicstring xAxisCategories ="['IT中心部門', '創前萬博考試', '電大服務中心', '考試服務中心','財務部','學生服務中心','職教中心','總經辦']";
protectedvoid Page_Load(object sender, EventArgs e)
{
}
}
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;
publicpartialclass WorkDoneChartByCenter : System.Web.UI.Page
{
publicstring 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]}]";
publicstring xAxisCategories ="['IT中心部門', '創前萬博考試', '電大服務中心', '考試服務中心','財務部','學生服務中心','職教中心','總經辦']";
protectedvoid Page_Load(object sender, EventArgs e)
{
}
}
截圖：截出來圖片的顏色丟失，實際顏色效果可以參考Highcharts官網提供的實例
轉載來源http://jsonzheng.cnblogs.com