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];
- }
- }
- }
