用户名：周金桥
文章数：252
评论数：883
访问量：2360538
注册日期：
阅读量：1297
阅读量：3317
阅读量：588084
阅读量：474678
51CTO推荐博文
从事过ASP.NET开发的可能都会接触到一些图表控件，比如OWC、ZendGraph等等，这些控件都有一个特点，那就是我们可以像操作.NET中的对象一样控制它们的某些属性，有可能在本地开发好了上传到服务器端部署运行的时候会出现权限问题而导致不能正常运行。本篇周公讲述一个JavaScript的图表控件，不要小看了这个JavaScript图表控件，它能生成各种常见的图表。
&Highcharts是一个JavaScript的图表控件，它的官方网站网址是：，参考手册网址是：，示例网址是：。要想简单使用它的图表功能，只需要两个JS类库即可，一个是jquery的，另外一个就是它本身的。但是如果需要支持主题和导出图表功能，就需要更多的JS类库支持了。本篇只讲述满足大多数要求的基本功能。
&首先从下载最新版本的jQuery，然后从下载Highcharts的JavaScript类库。将这两个文件下载到本地的Web项目的JS文件下。
&因为Highcharts是根据js脚本中的属性设置来生成图表的，因为我们需要在ASP.NET中输出这些脚本。为了方便，周公将生成各种图表的核心逻辑部分抽取出来作为一个模板，需要的时候从这些模板中读取数据，然后将模板中的标签替换掉，这样就可以输出到客户端了。这些带有标签的JS模板位于js/template目录下。
&除了输出控制逻辑代码之外，还要在网页的ready客户端事件中调用，如下格式：
&$(document).ready(function() {//这里是逻辑和控制代码});
&为了便于演示，周公在创建ASP.NET页面的时候使用了单页模式，整个页面的代码如下：
%@&Page&Language=&C#&&%&%@&Import&Namespace=&System.Text&&%&%@&Import&Namespace=&System.IO&&%&&&!DOCTYPE&html&PUBLIC&&-//W3C//DTD&XHTML&1.0&Transitional//EN&&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&&&runat=&server&&&&&&public&string&result&=&string.E &&&&&protected&void&Page_Load(object&sender,&EventArgs&e) &&&&&{ &&&&&&&&&string&graphType&=&ddlGraphType.SelectedV &&&&&&&&& &&&&&&&&&graphTypegraphType&=&graphType.ToLower(); &&&&&&&&&switch&(graphType) &&&&&&&&&{ &&&&&&&&&&&&&case&&line&:&result=OutputLine();& &&&&&&&&&&&&&case&&spline&:&result&=&OutputSpline();& &&&&&&&&&&&&&case&&area&:&result&=&OutputArea();& &&&&&&&&&&&&&case&&areaspline&:&result&=&OutputAreaSpline();& &&&&&&&&&&&&&case&&column&:&result&=&OutputColumn();& &&&&&&&&&&&&&case&&bar&:&result&=&OutputBar();& &&&&&&&&&&&&&case&&pie&:&result&=&OutputPie();& &&&&&&&&&&&&&case&&scatter&:&result&=&OutputScatter();& &&&&&&&&&} &&&&&} &&&&&&private&string&OutputLine() &&&&&{ &&&&&&&&&string&result&=&string.E &&&&&&&&&using&(StreamReader&reader&=&new&StreamReader(Server.MapPath(&~/js/template/line.js&),&Encoding.UTF8)) &&&&&&&&&{ &&&&&&&&&&&&&StringBuilder&buffer&=&new&StringBuilder(reader.ReadToEnd()); &&&&&&&&&&&&&buffer.Replace(&{#title#}&,&&周公的演示例子&); &&&&&&&&&&&&&result&=&buffer.ToString(); &&&&&&&&&} &&&&&&&&&return& &&&&&} &&&&&&private&string&OutputSpline() &&&&&{ &&&&&&&&&string&result&=&string.E &&&&&&&&&using&(StreamReader&reader&=&new&StreamReader(Server.MapPath(&~/js/template/spline.js&),&Encoding.UTF8)) &&&&&&&&&{ &&&&&&&&&&&&&StringBuilder&buffer&=&new&StringBuilder(reader.ReadToEnd()); &&&&&&&&&&&&&buffer.Replace(&{#title#}&,&&周公的演示例子&); &&&&&&&&&&&&&result&=&buffer.ToString(); &&&&&&&&&} &&&&&&&&&return& &&&&&} &&&&&&private&string&OutputArea() &&&&&{ &&&&&&&&&string&result&=&string.E &&&&&&&&&using&(StreamReader&reader&=&new&StreamReader(Server.MapPath(&~/js/template/area.js&),&Encoding.UTF8)) &&&&&&&&&{ &&&&&&&&&&&&&StringBuilder&buffer&=&new&StringBuilder(reader.ReadToEnd()); &&&&&&&&&&&&&buffer.Replace(&{#title#}&,&&周公的演示例子&); &&&&&&&&&&&&&result&=&buffer.ToString(); &&&&&&&&&} &&&&&&&&&return& &&&&&} &&&&&&private&string&OutputAreaSpline() &&&&&{ &&&&&&&&&string&result&=&string.E &&&&&&&&&using&(StreamReader&reader&=&new&StreamReader(Server.MapPath(&~/js/template/areaspline.js&),&Encoding.UTF8)) &&&&&&&&&{ &&&&&&&&&&&&&StringBuilder&buffer&=&new&StringBuilder(reader.ReadToEnd()); &&&&&&&&&&&&&buffer.Replace(&{#title#}&,&&周公的演示例子&); &&&&&&&&&&&&&result&=&buffer.ToString(); &&&&&&&&&} &&&&&&&&&return& &&&&&} &&&&&&private&string&OutputColumn() &&&&&{ &&&&&&&&&string&result&=&string.E &&&&&&&&&using&(StreamReader&reader&=&new&StreamReader(Server.MapPath(&~/js/template/column.js&),&Encoding.UTF8)) &&&&&&&&&{ &&&&&&&&&&&&&StringBuilder&buffer&=&new&StringBuilder(reader.ReadToEnd()); &&&&&&&&&&&&&buffer.Replace(&{#title#}&,&&周公的演示例子&); &&&&&&&&&&&&&result&=&buffer.ToString(); &&&&&&&&&} &&&&&&&&&return& &&&&&} &&&&&&private&string&OutputBar() &&&&&{ &&&&&&&&&string&result&=&string.E &&&&&&&&&using&(StreamReader&reader&=&new&StreamReader(Server.MapPath(&~/js/template/bar.js&),&Encoding.UTF8)) &&&&&&&&&{ &&&&&&&&&&&&&StringBuilder&buffer&=&new&StringBuilder(reader.ReadToEnd()); &&&&&&&&&&&&&buffer.Replace(&{#title#}&,&&周公的演示例子&); &&&&&&&&&&&&&buffer.Replace(&{#subTitle#}&,&&扇形图表&); &&&&&&&&&&&&&//下面的数据应该是从数据库来，为了演示，这里直接上了 &&&&&&&&&&&&&string&data&=&&{name:&'1812年',data:&[107,&31,&635,&203,&2]},&{name:&'1912年',data:&[133,&156,&947,&408,&6]},&{name:&'2012年',data:&[973,&914,&,&34]}&; &&&&&&&&&&&&&buffer.Replace(&{#series#}&,&data); &&&&&&&&&&&&&result&=&buffer.ToString(); &&&&&&&&&} &&&&&&&&&return& &&&&&} &&&&&&private&string&OutputPie() &&&&&{ &&&&&&&&&string&result&=&string.E &&&&&&&&&using&(StreamReader&reader&=&new&StreamReader(Server.MapPath(&~/js/template/pie.js&),&Encoding.UTF8)) &&&&&&&&&{ &&&&&&&&&&&&&StringBuilder&buffer&=&new&StringBuilder(reader.ReadToEnd()); &&&&&&&&&&&&&buffer.Replace(&{#title#}&,&&周公的演示例子&); &&&&&&&&&&&&&result&=&buffer.ToString(); &&&&&&&&&} &&&&&&&&&return& &&&&&} &&&&&&private&string&OutputScatter() &&&&&{ &&&&&&&&&string&result&=&string.E &&&&&&&&&using&(StreamReader&reader&=&new&StreamReader(Server.MapPath(&~/js/template/scatter.js&),&Encoding.UTF8)) &&&&&&&&&{ &&&&&&&&&&&&&StringBuilder&buffer&=&new&StringBuilder(reader.ReadToEnd()); &&&&&&&&&&&&&buffer.Replace(&{#title#}&,&&周公的演示例子&); &&&&&&&&&&&&&result&=&buffer.ToString(); &&&&&&&&&} &&&&&&&&&return& &&&&&} &&&&xmlns=&http://www.w3.org/1999/xhtml&&&runat=&server&&&&&&Hign&Charts&实例&&src=&js/jquery-1.5.2.min.js&&type=&text/javascript&&&src=&js/highcharts.js&&type=&text/javascript&&&&&&&&&&id=&form1&&runat=&server&&&&&&&&&&&&border=&0&&width=&800&&&&&&请选择图表类型：&runat=&server&&ID=&ddlGraphType&& &&&&&&&&&&&&&AutoPostBack=&True&&&&&&&&&&line&&&&&&&&&spline&&&&&&&&&area&&&&&&&&&areaspline&&&&&&&&&column&&&&&&&&&bar&&&&&&&&&pie&&&&&&&&&scatter&&&&&&&&&&&&&&&id=&container&&style=&width:&800&height:&400&margin:&0&auto&&&&&&&&&&&&&&&& &&&&&&&&&&&type=&text/javascript&&&&&&&&&&var& &&&&&&&&&$(document).ready(function()&{ &%=result&%&&&&&&&&&&&&&}); &&&&&&&&&&&&&&&&& &&&&&&&&&&&&
&运行页面之后，效果如下：
&说明：1.在官方的实例中是采用了上的jQuery库，如果在不能联网的局域网中则不能正常运行，因为周公直接将jQuery类库下载到本地，这样就不需要联网也能运行了。2.在官方示例中，是直接在$(document).ready()这个方法中将全部逻辑放在这个方法中，在实际开发中可能有大量的逻辑需要判断和处理，所以在这个例子中采用模板替换的方式。
&本文出自 “” 博客，请务必保留此出处
了这篇文章
附件下载：　　
类别：┆阅读(0)┆评论(0)
17:36:05 10:44:22 22:59:40 01:11:27 16:56:58 14:20:42 18:14:55 23:19:44
请输入验证码：