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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-1.5.2.min.js"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/highcharts.js" type="text/javascript"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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]; } } }
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦