利用c#+jquery+ichartjs生成统计图表

最近觉得应该把自己在技术上的一些心得记录在博客里面跟大家分享，一起讨论，一起成长！

这篇随笔主要为介绍chart在项目中的运用，因为在我们看到一些开源的chart时候，是使用纯js 或者建立在一些插件(例如：jquery)上的，我们会用有一些茫然。chart里面的文档和实例都是html + css +js ,数据源都是静态定义成json对象，标题、脚注等都是静态的字符串！我们如何让这些数据动态地与数据库交互，或者后台进行交互呢？

既然讲到了图表（chart），在这里想大家推荐个人觉得不错的几个chart:ichartjs、nvd3、highcharts和echarts。ichartjs做的非常不错，学习相当容易，文档和事例都很丰富，是使用纯js写的开源插件，缺点是只支持html5，一些低版本的浏览器使用不了；nvd3学习起来相对较难，当效果相当炫，也是我推荐的原因；highcharts:功能是很强大的，图表比较齐全，学习成本较低，唯一不好的是：虽然开源使用却又限制，使用在商业的网址上是需要收费的；echarts是最值得推荐的了，这个chart是百度开发的，非常强大，是我见过最完美的一个chart,这个也是同事在一个偶然的机会想找到的，网上没见过人推荐过这款chart，应该是太还比较新，百度自己的搜索优化没做好吧...着也是个人的见解而已，仅供参考。

ichartjs：http://www.ichartjs.com/

nvd3：http://nvd3.org/

highcharts：http://www.highcharts.com/

echarts:http://ecomfe.github.io/echarts/index.html

现在我选取ichartjs作为事例，首先我们要达到前后台交互，大家都知道需要用到ajax，说道ajax我们又会选择jquery，现在很到的项目都会利用到jquery的ajax。选择好前后台交互的技术后，我们去考虑ajax请求的地址对应的选择什么的，很多的项目中我们会选择aspx页面作为我们的数据源的来源，前台去掉DOCTYPE标签下面所有代码，后台在page_load事件里面写上自己的代码，输出json数据到页面如图：

后台Page_Load事件代码

可是这样做并不是最好的，我们何不利用handler技术呢这样会更加简单，请求的地址也会又自己随便定义（最好不要跟有的最后名发生冲突，取自己比较独特和好记的名称就好）。

那我们现在从数据源的流向，来介绍我认为比较好的写法：

首先我们新建一个asp.net web form的一个空项目取名为ichartjs

然后再项目中新建一个数据模型DataSource.cs文件，作为数据的承载对象；一个Generic Handler文件datasource.ashx（当然也可以是asp.net handlder，至于区别叫不在这里讲了）使用它作为数据源来源；和一个页面pie2d.aspx，作为图标展示页面。

首先定义好数据模型，数据源里面包含三个值name、color和value

public class ChartData{public string name { get; set; }public string color { get; set; }public double value { get; set; }}

我们在datasource.ashx上写上代码，在这里需要注意的是，为了充分利用这个handler文件我们需要利用反射，当ajax请求的时候，传入对应的方法的的名称，handler利用这个参数，去找到对应的方法，获得对应的数据。当然如果你的数据存储在数据库里面的，需要在方法里面把数据库的数据提出出来转化为我们上面的ChartData模型数据。

public class datasource : IHttpHandler{public void ProcessRequest(HttpContext context){//write your handler implementation here.String methodName = context.Request["method"];if (String.IsNullOrEmpty(methodName)) return;//invoke methodType type = this.GetType();MethodInfo method = type.GetMethod(methodName);object[] paras = { context };method.Invoke(this, paras);}public void GetObjectJsonData(HttpContext context){Dictionary<string, object> resultData = new Dictionary<string, object>();List<ChartData> data = new List<ChartData>();data.Add(new ChartData() { name = "UC浏览器", value = 40.0, color = "#4572a7" });data.Add(new ChartData() { name = "QQ浏览器", value = 37.1, color = "#aa4643" });data.Add(new ChartData() { name = "欧朋浏览器", value = 13.8, color = "#89a54e" });data.Add(new ChartData() { name = "百度浏览器", value = 1.6, color = "#80699b" });data.Add(new ChartData() { name = "海豚浏览器", value = 1.4, color = "#92a8cd" });data.Add(new ChartData() { name = "天天浏览器", value = 1.2, color = "#db843d" });data.Add(new ChartData() { name = "其他", value = 4.9, color = "#a47d7c" });resultData.Add("data", data);resultData.Add("title", "2012年第3季度中国第三方手机浏览器市场份额");resultData.Add("fillText", "UC浏览器、\nUC浏览器、\nUC浏览器、\nUC浏览器、\n手机QQ浏览器及\n欧朋浏览器的份额\n位列第三方手机浏览器\n市场前三甲");context.Response.ContentType = "application/json";context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(resultData));context.Response.End();}public bool IsReusable{get{return false;}}}

这个时候我们需要引用一个数据集（也可以说在项目中安装json.net）

这个时候Ajax还不能通过handler里的GetObjectJsonData发放获得数据，我们还需要在web.config里面配置对应的信息

<configuration><system.web><compilation debug="true" targetFramework="4.5" /><httpRuntime targetFramework="4.5" /></system.web><system.webServer><handlers><add name="chart" type="Ichartjs.datasource" path="*.datasource" verb="*"/></handlers></system.webServer>
</configuration>

关键的地方在<add name="chart" type="Ichartjs.datasource" path="*.datasource" verb="*"/>，name可以随便配置；type指向你的handler类（命名空间+类名）；path是ajax访问的的路径，*表示可以随便命名，只需要后缀为.datasource，当然后缀你可以修改；verb表示你访问方式，get 还是post 还是其他的。

这样配置好后，需要修改工程的属性，去掉Use Local IIS Web server 下面的use iis Express 的钩，重新命名project url 例如：http://localhost/

然后再我们的IIS里面配置对应的地址，一般80端口被占用，你也可以停掉对应的网站，也可以在project url 下修改为http://localhost:8086/ ，然后再iis配置8086端。

现在我们进行最后一般，编写前台的代码，首先我们引入ichartjs插件的js文件,下载地址为http://code.google.com/p/ichartjs/downloads/list，然后引入ichart.1.2.min.js文件，同时我们需要引入jquery文件，这里我们可以利用官网上提供的CDN地址 http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js，直接引入就OK ，就不需要下载jquery插件了。前台的代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title><script src="Js/ichart.1.2.src.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>$(function () {$.ajax({type: "post",url: "111.ChartDataSourcecs?method=GetObjectJsonData",contentType: "application/json;charset=utf-8",dataType: "json",success: function (data) {var chart = new iChart.Pie2D({render: 'canvasDiv',data: data.data,title: {text: data.title,color: '#3e576f'},footnote: {text: 'ichartjs.com',color: '#486c8f',fontsize: 11,padding: '0 38'},sub_option: {label: {background_color: null,sign: false,//设置禁用label的小图标padding: '0 4',border: {enable: false,color: '#666666'},fontsize: 11,fontweight: 600,color: '#4572a7'},border: {width: 2,color: '#ffffff'}},shadow: true,shadow_blur: 6,shadow_color: '#aaaaaa',shadow_offsetx: 0,shadow_offsety: 0,background_color: '#fefefe',offsetx: -60,//设置向x轴负方向偏移位置60pxoffset_angle: -120,//逆时针偏移120度showpercent: true,decimalsnum: 2,width: 800,height: 400,radius: 120});//利用自定义组件构造右侧说明文本chart.plugin(new iChart.Custom({drawFn: function () {//计算位置var y = chart.get('originy'),w = chart.get('width');//在右侧的位置，渲染说明文字chart.target.textAlign('start').textBaseline('middle').textFont('600 16px Verdana').fillText(data.fillText, w - 220, y - 40, false, '#be5985', false, 20);}}));chart.draw();},error: function (e) {var message = e;}});});</script>
</head>
<body><form id="form1" runat="server">//Html代码<div id='canvasDiv'></div></form>
</body>
</html>

着里通过jquery ajax的地址111.datasource?method=GetObjectJsonData执行到handler 里面的ProcessRequest方法，ProcessRequest方法通过传入的参数method=GetObjectJsonData找到对应的GetObjectJsonData方法，GetObjectJsonData方法把对应数据转化为json数据返回给前台，绑定到对应ichartjs的chart上data、title的tex、chart.plugin的fillText等上面，如果你想的话，可以把更多的信息通过后台提供给前他，最后渲染到我们对应的div canvasDiv上面，显示出对应的效果：

源代码：http://files.cnblogs.com/zhangxl/Ichartjs.zip

转至：http://www.cnblogs.com/zhangxl/p/chart.html

原文地址引自：http://www.cnblogs.com/zhangxl/p/chart.html 感谢原作者。

其他参考资料：

http://www.stepday.com/topic/?906

http://www.it165.net/pro/html/201310/7515.html

http://baigungun.blog.51cto.com/6736785/1312743/

http://suchso.com/catalog.asp?tags=Echarts%E4%BD%BF%E7%94%A8

http://www.myexception.cn/web/1664384.html

http://www.shaoqun.com/a/93673.aspx

利用c#+jquery+ichartjs生成统计图表相关推荐

c#中嵌入echarts_利用c#+jquery+echarts生成统计报表（附源代码）
背景: 因为最近项目要生成报表,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.百度echarts简介请参考虽然echarts功能强大,界面优美, 但是使用起来非常繁琐.本文在参考写的& ...
angelajs中ajax,前端测试数据怎么利用Mock.js进行生成
前端测试数据怎么利用Mock.js进行生成发布时间:2020-12-14 14:17:47 来源:亿速云阅读:108 作者:Leah 本篇文章为大家展示了前端测试数据怎么利用Mock.js进行生成 ...
jquery ajax 省城市二级菜单源码,利用了jquery的ajax实现二级联互动菜单
菜单资源保存在数据库中.利用了jquery的ajax实现.用到的包有:json-lib-2.2.3-jdk15.jar ezmorph-1.0.6.jar json.js jquery.js jsp页 ...
开发日记-20190328 关键词利用eolinker一键快速生成API接口文档
今天感觉效率真的很低= =各个层面的,apk发布到现场发现出现了问题,所以一个下午都在忙着解决现场出现的问题,领导一直打电话询问进度,午觉也没有睡所以今天预计的很多计划都处于停滞状态,像昨天规划的今天 ...
DL之RNN：人工智能为你写代码——基于TF利用RNN算法实现生成编程语言代码(C++语言)、训练测试过程全记录
DL之RNN:基于TF利用RNN算法实现生成编程语言代码(C语言).训练&测试过程全记录目录输出结果监控模型训练&测试过程全记录训练的数据集展示输出结果 1.test01 ...
实体类dao接口mysql_利用MyBatis生成器自动生成实体类、DAO接口和Mapping映射文件...
解决问题: 可利用MyBatis生成器自动生成实体类.DAO接口和Mapping映射文件. 测试环境准备: 新建一个mysql数据库,例如mungerzTest. 生成一张主键为自增ID的学生表: C ...
python的api库_python 利用toapi库自动生成api
在学习做接口测试自动化的时候,我们往往会自己动手写一些简单的API,比如写一个简单的TODO API之类. 不过自己写API的时候经常需要造一些假数据,以及处理分页逻辑,开始的时候还觉得比较有意思,但 ...
php识别名片,用户信息名片怎么利用PHP实现自动生成
用户信息名片怎么利用PHP实现自动生成发布时间:2020-12-10 14:29:56 来源:亿速云阅读:70 作者:Leah 本篇文章为大家展示了用户信息名片怎么利用PHP实现自动生成,内容简明 ...
利用strut2标签自动生成form前端验证代码
利用strut2标签自动生成form前端验证代码,使用到的技术有 1.struts2标签,如<s:form> <s:textfieled> 2.struts2读取*Valida ...

利用c#+jquery+ichartjs生成统计图表

利用c#+jquery+ichartjs生成统计图表相关推荐

最新文章

热门文章