highcharts是基於javascript的高交互的圖表封裝。目前highcharts可以非常輕鬆的畫出線圖，列圖，餅圖，傳播圖，區域圖等。能兼容主流瀏覽器(包括IE6)。
相關的資料：
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/#chart
以下爲餅狀圖示例：
- <html xmlns="http://www.w3.org/1999/xhtml" >
- <head runat="server">
- <title>圖表-餅狀</title>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-utf-8"/>
- <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
- <script src="js/highcharts.js" type="text/javascript"></script>
- <script src="JS/exporting.js" type="text/javascript"></script>
- <style type="text/css">
- a:link{ outline: none; text-decoration: none; color: #000;}
- a:hover{ text-decoration: underline;}
- a:focus{ outline: 0;}
- a{ outline: none; text-decoration: none; color: #AAA;}
- </style>
- </head>
- <body>
- <form id="form1" runat="server">
- <script type="text/javascript">
- var pieType=1;
- var chart;
- $(document).ready(function() {
- chart = new Highcharts.Chart({
- chart: {
- renderTo: 'container',
- defaultSeriesType: 'pie',
- plotBackgroundColor: null,
- plotBorderWidth: null,
- plotShadow: false
- },
- title: {
- text: 'ITOMS工作量統計'
- },
- subtitle: {
- text: '<a href="?t=1">任務單數量</a> <a href="?t=2">計劃工時（小時）</a> <a href="?t=3">實際人數</a> <a href="?t=4">實際工時（小時）</a>' //圖標的副標題
- },
- tooltip: {
- formatter: function() {
- return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
- }
- },
- plotOptions: {
- pie: {
- allowPointSelect: true,
- cursor: 'pointer',
- dataLabels: {
- enabled: true,
- color: '#000000',
- connectorColor: '#000000',
- formatter: function() {
- return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
- }
- }
- }
- },
- series: <%=returnValue %>
- });
- });
- </script>
- <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
- </form>
- </body>
- </html>
- using System;
- using System.Collections.Generic;
- using System.Web;
- using System.Web.UI;
- using System.Web.UI.WebControls;
- namespace Project.Highcharts
- {
- public partial class Demo_Pie : System.Web.UI.Page
- {
- /*public string data = @"[{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中心部門', '創前萬博考試', '電大服務中心', '考試服務中心','財務部','學生服務中心','職教中心','總經辦']";*/
- public string returnValue = "";
- public string returnValue1 = @"[{name: '任務單數量',data: [['IT中心部門', 33.2],{name:'創前萬博考試',y:14.5,sliced:true,selected:true},['電大服務中心',1.2],['考試服務中心', 1.2],['財務部', 33.2],['學生服務中心', 14.5],['職教中心', 1.2],['總經辦', 1.2]]}]";
- public string returnValue2 = @"[{name: '計劃工時（小時）',data: [['IT中心部門', 16.5],{name:'創前萬博考試',y:3.2,sliced:true,selected:true},['電大服務中心',3.4],['考試服務中心', 0.3],['財務部', 50.8],['學生服務中心', 22.3],['職教中心', 1.8],['總經辦', 1.8]]}]";
- public string returnValue3 = @"[{name: '實際人數',data: [['IT中心部門', 17.3],{name:'創前萬博考試',y:13.2,sliced:true,selected:true},['電大服務中心',19.9],['考試服務中心', 6.1],['財務部', 9.2],['學生服務中心', 3.7],['職教中心', 4.0],['總經辦', 4.0]]}]";
- public string returnValue4 = @"[{name: '實際工時（小時）',data: [['IT中心部門', 18.7],{name:'創前萬博考試',y:12.0,sliced:true,selected:true},['電大服務中心',23.9],['考試服務中心', 5.5],['財務部', 6.7],['學生服務中心', 10.9],['職教中心', 9.0],['總經辦', 13.2]]}]";
- protected void Page_Load(object sender, EventArgs e)
- {
- int type = Request["t"] != null ? Convert.ToInt32(Request["t"]) : 1;
- string[] array = new string[] { returnValue1, returnValue2, returnValue3, returnValue4 };
- returnValue = array[type - 1];
- }
- }
- }
