最近觉得应该把自己在技术上的一些心得记录在博客里面跟大家分享,一起讨论,一起成长!
这篇随笔主要为介绍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
1 public class ChartData 2 { 3 public string name { get; set; } 4 public string color { get; set; } 5 public double value { get; set; } 6 }