在ASP.NET中使用Highcharts js图表

简介:

从事过ASP.NET开发的可能都会接触到一些图表控件,比如OWC、ZendGraph等等,这些控件都有一个特点,那就是我们可以像操作.NET中的对象一样控制它们的某些属性,有可能在本地开发好了上传到服务器端部署运行的时候会出现权限问题而导致不能正常运行。本篇周公讲述一个JavaScript的图表控件,不要小看了这个JavaScript图表控件,它能生成各种常见的图表。
 Highcharts是一个JavaScript的图表控件,它的官方网站网址是:http://www.highcharts.com/,参考手册网址是:http://www.highcharts.com/ref/,示例网址是:http://www.highcharts.com/demo/。要想简单使用它的图表功能,只需要两个JS类库即可,一个是jquery的,另外一个就是它本身的。但是如果需要支持主题和导出图表功能,就需要更多的JS类库支持了。本篇只讲述满足大多数要求的基本功能。
 
 准备工作
 首先从http://jquery.com/下载最新版本的jQuery,然后从http://www.highcharts.com/下载Highcharts的JavaScript类库。将这两个文件下载到本地的Web项目的JS文件下。
 因为Highcharts是根据js脚本中的属性设置来生成图表的,因为我们需要在ASP.NET中输出这些脚本。为了方便,周公将生成各种图表的核心逻辑部分抽取出来作为一个模板,需要的时候从这些模板中读取数据,然后将模板中的标签替换掉,这样就可以输出到客户端了。这些带有标签的JS模板位于js/template目录下。
 除了输出控制逻辑代码之外,还要在网页的ready客户端事件中调用,如下格式:
 $(document).ready(function() {//这里是逻辑和控制代码});
 
 编码
 为了便于演示,周公在创建ASP.NET页面的时候使用了单页模式,整个页面的代码如下:

 

 
  1. <%@ Page Language="C#" %> 
  2. <%@ Import Namespace="System.Text" %> 
  3. <%@ Import Namespace="System.IO" %> 
  4.  
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  6.  
  7. <script runat="server"> 
  8.     public string result = string.Empty;  
  9.     protected void Page_Load(object sender, EventArgs e)  
  10.     {  
  11.         string graphType = ddlGraphType.SelectedValue;  
  12.           
  13.         graphTypegraphType = graphType.ToLower();  
  14.         switch (graphType)  
  15.         {  
  16.             case "line": result=OutputLine(); break;  
  17.             case "spline": result = OutputSpline(); break;  
  18.             case "area": result = OutputArea(); break;  
  19.             case "areaspline": result = OutputAreaSpline(); break;  
  20.             case "column": result = OutputColumn(); break;  
  21.             case "bar": result = OutputBar(); break;  
  22.             case "pie": result = OutputPie(); break;  
  23.             case "scatter": result = OutputScatter(); break;  
  24.         }  
  25.     }  
  26.  
  27.     private string OutputLine()  
  28.     {  
  29.         string result = string.Empty;  
  30.         using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/line.js"), Encoding.UTF8))  
  31.         {  
  32.             StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
  33.             buffer.Replace("{#title#}", "周公的演示例子");  
  34.             result = buffer.ToString();  
  35.         }  
  36.         return result;  
  37.     }  
  38.  
  39.     private string OutputSpline()  
  40.     {  
  41.         string result = string.Empty;  
  42.         using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/spline.js"), Encoding.UTF8))  
  43.         {  
  44.             StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
  45.             buffer.Replace("{#title#}", "周公的演示例子");  
  46.             result = buffer.ToString();  
  47.         }  
  48.         return result;  
  49.     }  
  50.  
  51.     private string OutputArea()  
  52.     {  
  53.         string result = string.Empty;  
  54.         using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/area.js"), Encoding.UTF8))  
  55.         {  
  56.             StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
  57.             buffer.Replace("{#title#}", "周公的演示例子");  
  58.             result = buffer.ToString();  
  59.         }  
  60.         return result;  
  61.     }  
  62.  
  63.     private string OutputAreaSpline()  
  64.     {  
  65.         string result = string.Empty;  
  66.         using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/areaspline.js"), Encoding.UTF8))  
  67.         {  
  68.             StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
  69.             buffer.Replace("{#title#}", "周公的演示例子");  
  70.             result = buffer.ToString();  
  71.         }  
  72.         return result;  
  73.     }  
  74.  
  75.     private string OutputColumn()  
  76.     {  
  77.         string result = string.Empty;  
  78.         using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/column.js"), Encoding.UTF8))  
  79.         {  
  80.             StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
  81.             buffer.Replace("{#title#}", "周公的演示例子");  
  82.             result = buffer.ToString();  
  83.         }  
  84.         return result;  
  85.     }  
  86.  
  87.     private string OutputBar()  
  88.     {  
  89.         string result = string.Empty;  
  90.         using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/bar.js"), Encoding.UTF8))  
  91.         {  
  92.             StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
  93.             buffer.Replace("{#title#}", "周公的演示例子");  
  94.             buffer.Replace("{#subTitle#}", "扇形图表");  
  95.             //下面的数据应该是从数据库来,为了演示,这里直接上了  
  96.             string data = "{name: '1812年',data: [107, 31, 635, 203, 2]}, {name: '1912年',data: [133, 156, 947, 408, 6]}, {name: '2012年',data: [973, 914, 4054, 732, 34]}";  
  97.             buffer.Replace("{#series#}", data);  
  98.             result = buffer.ToString();  
  99.         }  
  100.         return result;  
  101.     }  
  102.  
  103.     private string OutputPie()  
  104.     {  
  105.         string result = string.Empty;  
  106.         using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/pie.js"), Encoding.UTF8))  
  107.         {  
  108.             StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
  109.             buffer.Replace("{#title#}", "周公的演示例子");  
  110.             result = buffer.ToString();  
  111.         }  
  112.         return result;  
  113.     }  
  114.  
  115.     private string OutputScatter()  
  116.     {  
  117.         string result = string.Empty;  
  118.         using (StreamReader reader = new StreamReader(Server.MapPath("~/js/template/scatter.js"), Encoding.UTF8))  
  119.         {  
  120.             StringBuilder buffer = new StringBuilder(reader.ReadToEnd());  
  121.             buffer.Replace("{#title#}", "周公的演示例子");  
  122.             result = buffer.ToString();  
  123.         }  
  124.         return result;  
  125.     }  
  126. </script> 
  127.  
  128. <html xmlns="http://www.w3.org/1999/xhtml"> 
  129. <head runat="server"> 
  130.     <title>Hign Charts 实例</title> 
  131. <script src="js/jquery-1.5.2.min.js" type="text/javascript"></script> 
  132. <script src="js/highcharts.js" type="text/javascript"></script> 
  133.  
  134. </head> 
  135. <body> 
  136.     <form id="form1" runat="server"> 
  137.     <div> 
  138.     <table border="0" width="800"> 
  139.     <tr><td>请选择图表类型:<asp:DropDownList runat="server" ID="ddlGraphType"   
  140.             AutoPostBack="True"> 
  141.         <asp:ListItem>line</asp:ListItem> 
  142.         <asp:ListItem>spline</asp:ListItem> 
  143.         <asp:ListItem>area</asp:ListItem> 
  144.         <asp:ListItem>areaspline</asp:ListItem> 
  145.         <asp:ListItem>column</asp:ListItem> 
  146.         <asp:ListItem>bar</asp:ListItem> 
  147.         <asp:ListItem>pie</asp:ListItem> 
  148.         <asp:ListItem>scatter</asp:ListItem> 
  149.         </asp:DropDownList></td></tr> 
  150.     <tr><td><div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div></td></tr> 
  151.     </table> 
  152.     </div> 
  153.       
  154.     </form> 
  155.     <script type="text/javascript"> 
  156.         var chart;  
  157.         $(document).ready(function() {  
  158. <%=result %> 
  159.             });  
  160.                   
  161.         </script> 
  162. </body> 
  163. </html> 

 演示
 运行页面之后,效果如下:
 


 


 说明:1.在官方的实例中是采用了ajax.googleapis.com上的jQuery库,如果在不能联网的局域网中则不能正常运行,因为周公直接将jQuery类库下载到本地,这样就不需要联网也能运行了。2.在官方示例中,是直接在$(document).ready()这个方法中将全部逻辑放在这个方法中,在实际开发中可能有大量的逻辑需要判断和处理,所以在这个例子中采用模板替换的方式。
















本文转自周金桥51CTO博客,原文链接:http://blog.51cto.com/zhoufoxcn/537324 ,如需转载请自行联系原作者



相关文章
|
1月前
|
开发框架 数据可视化 .NET
在Blazor中使用Chart.js快速创建图表
在Blazor中使用Chart.js快速创建图表
|
11月前
|
数据可视化
数据可视化图表开发:查看Echarts.js版本方法
数据可视化图表开发:查看Echarts.js版本方法
241 0
|
5天前
|
JavaScript
JS图表生成以及点击修改图表样式
JS图表生成以及点击修改图表样式
|
1月前
|
存储 JavaScript 前端开发
JavaScript复杂功能实现:实时数据可视化图表
JavaScript复杂功能实现:实时数据可视化图表
|
1月前
|
数据可视化 前端开发 JavaScript
探秘D3.js:数据可视化交互式图表与效果
数据可视化已经成为如今大数据时代的重要工具之一。它不仅可以更直观地呈现数据,还可以帮助人们更好地理解数据背后的含义。而D3.js则作为目前最流行的数据可视化库之一,其强大的功能和灵活性广受开发者青睐。本文将介绍如何使用D3.js创建交互式图表和可视化效果,以及如何利用其强大的API来进行个性化定制。
169 0
|
1月前
|
移动开发 JavaScript
echarts生成图表并下载为PDF文件(附带js源码地址)
echarts生成图表并下载为PDF文件(附带js源码地址)
51 0
|
1月前
|
数据可视化 JavaScript 前端开发
D3.js的交互式图表和可视化效果
在当今数据爆炸的时代,有一个强大的工具可以帮助我们更好地理解和使用数据:D3.js。D3.js是一个流行的JavaScript库,用于创建交互式图表和可视化效果。本文将介绍D3.js的基本特性以及如何使用它来创建高质量的数据可视化。
|
1月前
|
JavaScript C#
【傻瓜级JS-DLL-WINCC-PLC交互】2.wincc使用C#开发的.net控件
【傻瓜级JS-DLL-WINCC-PLC交互】2.wincc使用C#开发的.net控件
53 0
|
1月前
|
JavaScript Linux C#
【傻瓜级JS-DLL-WINCC-PLC交互】1.C#用windows窗体控件创建.net控件
【傻瓜级JS-DLL-WINCC-PLC交互】1.C#用windows窗体控件创建.net控件
84 0
|
1月前
|
应用服务中间件 nginx
Angular打包构建项目服务器运行runtime.js、polyfills.js、vendor.js报错net::ERR_ABORTED 404 (Not Found),build修改为相对路径./
Angular打包构建项目服务器运行runtime.js、polyfills.js、vendor.js报错net::ERR_ABORTED 404 (Not Found),build修改为相对路径./