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

以下为饼状图示例:

  1. <html xmlns="http://www.w3.org/1999/xhtml" > 
  2. <head runat="server"> 
  3.     <title>图表-饼状</title> 
  4.     <meta http-equiv="Content-Type" content="text/html; charset=iso-utf-8"/> 
  5.     <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> 
  6.     <script src="js/highcharts.js" type="text/javascript"></script> 
  7.     <script src="JS/exporting.js" type="text/javascript"></script> 
  8.     <style type="text/css"> 
  9.         a:link{ outline: none; text-decoration: none; color: #000;}  
  10.         a:hover{ text-decoration: underline;}  
  11.         a:focus{ outline: 0;}  
  12.         a{ outline: none; text-decoration: none; color: #AAA;}  
  13.     </style> 
  14. </head> 
  15. <body> 
  16.     <form id="form1" runat="server"> 
  17.    <script type="text/javascript"> 
  18.  
  19.        var pieType=1;  
  20.        var chart;  
  21.        $(document).ready(function() {  
  22.            chart = new Highcharts.Chart({  
  23.                chart: {  
  24.                    renderTo: 'container',  
  25.                    defaultSeriesType: 'pie',  
  26.                    plotBackgroundColor: null,  
  27.                    plotBorderWidth: null,  
  28.                    plotShadow: false  
  29.                },  
  30.                title: {  
  31.                 text: 'ITOMS工作量统计'  
  32.                },  
  33.                subtitle: {                           
  34.                     text: '<a href="?t=1">任务单数量</a>&nbsp;&nbsp;<a href="?t=2">计划工时(小时)</a>&nbsp;&nbsp;<a href="?t=3">实际人数</a>&nbsp;&nbsp;<a href="?t=4">实际工时(小时)</a>'              //图标的副标题  
  35.                 },  
  36.                tooltip: {  
  37.                    formatter: function() {  
  38.                        return '<b>' + this.point.name + '</b>: ' + this.y + ' %';  
  39.                    }  
  40.                },  
  41.                plotOptions: {  
  42.                    pie: {  
  43.                        allowPointSelect: true,  
  44.                        cursor: 'pointer',  
  45.                        dataLabels: {  
  46.                            enabled: true,  
  47.                            color: '#000000',  
  48.                            connectorColor: '#000000',  
  49.                            formatter: function() {  
  50.                                return '<b>' + this.point.name + '</b>: ' + this.y + ' %';  
  51.                            }  
  52.                        }  
  53.                    }  
  54.                },  
  55.                series: <%=returnValue %> 
  56.                });  
  57.            });  
  58.                   
  59.         </script> 
  60.         <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div> 
  61.     </form> 
  62. </body> 
  63. </html> 

 

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Web;  
  4. using System.Web.UI;  
  5. using System.Web.UI.WebControls;  
  6.  
  7. namespace Project.Highcharts  
  8. {  
  9.     public partial class Demo_Pie : System.Web.UI.Page  
  10.     {  
  11.         /*public string data = @"[{name: '任务单数量',data: [370.0,162.0,13,13,370.0,162.0,13,13]},   
  12.                                 {name: '计划工时(小时)',data: [120,23,25,2,370.0,162.0,13,13]},   
  13.                                 {name: '实际人数',data: [60,43,65,20,30.0,12.0,13,103]},   
  14.                                 {name: '实际工时(小时)',data: [89,57,114,26,32,52.0,43,63]}]";  
  15.  
  16.         public string xAxisCategories = "['IT中心部门', '创前万博考试', '电大服务中心', '考试服务中心','财务部','学生服务中心','职教中心','总经办']";*/ 
  17.  
  18.         public string returnValue = "";  
  19.         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]]}]";  
  20.         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]]}]";  
  21.         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]]}]";  
  22.         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]]}]";  
  23.           
  24.         protected void Page_Load(object sender, EventArgs e)  
  25.         {  
  26.             int type = Request["t"] != null ? Convert.ToInt32(Request["t"]) : 1;  
  27.             string[] array = new string[] { returnValue1, returnValue2, returnValue3, returnValue4 };  
  28.             returnValue = array[type - 1];  
  29.         }  
  30.     }  
  31. }