如何在我们项目中利用开源的图表(js chart)
最近觉得应该把自己在技术上的一些心得记录在博客里面跟大家分享,一起讨论,一起成长!
这篇随笔主要为介绍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 }
我们在datasource.ashx上写上代码,在这里需要注意的是,为了充分利用这个handler文件我们需要利用反射,当ajax请求的时候,传入对应的方法的的名称,handler利用这个参数,去找到对应的方法,获得对应的数据。当然如果你的数据存储在数据库里面的,需要在方法里面把数据库的数据提出出来转化为我们上面的ChartData模型数据。
1 public class datasource : IHttpHandler
2 {
3
4 public void ProcessRequest(HttpContext context)
5 {
6 //write your handler implementation here.
7 String methodName = context.Request["method"];
8 if (String.IsNullOrEmpty(methodName)) return;
9
10 //invoke method
11 Type type = this.GetType();
12 MethodInfo method = type.GetMethod(methodName);
13 object[] paras = { context };
14 method.Invoke(this, paras);
15 }
16
17 public void GetObjectJsonData(HttpContext context)
18 {
19 Dictionary<string, object> resultData = new Dictionary<string, object>();
20 List<ChartData> data = new List<ChartData>();
21 data.Add(new ChartData() { name = "UC浏览器", value = 40.0, color = "#4572a7" });
22 data.Add(new ChartData() { name = "QQ浏览器", value = 37.1, color = "#aa4643" });
23 data.Add(new ChartData() { name = "欧朋浏览器", value = 13.8, color = "#89a54e" });
24 data.Add(new ChartData() { name = "百度浏览器", value = 1.6, color = "#80699b" });
25 data.Add(new ChartData() { name = "海豚浏览器", value = 1.4, color = "#92a8cd" });
26 data.Add(new ChartData() { name = "天天浏览器", value = 1.2, color = "#db843d" });
27 data.Add(new ChartData() { name = "其他", value = 4.9, color = "#a47d7c" });
28 resultData.Add("data", data);
29 resultData.Add("title", "2012年第3季度中国第三方手机浏览器市场份额");
30 resultData.Add("fillText", "UC浏览器、\nUC浏览器、\nUC浏览器、\nUC浏览器、\n手机QQ浏览器及\n欧朋浏览器的份额\n位列第三方手机浏览器\n市场前三甲");
31 context.Response.ContentType = "application/json";
32 context.Response.Write(Newtonsoft.Json.JsonConvert.SerializeObject(resultData));
33 context.Response.End();
34 }
35
36 public bool IsReusable
37 {
38 get
39 {
40 return false;
41 }
42 }
43 }
这个时候我们需要引用一个数据集(也可以说在项目中安装json.net)
这个时候Ajax还不能通过handler里的GetObjectJsonData发放获得数据,我们还需要在web.config里面配置对应的信息
1 <configuration>
2 <system.web>
3 <compilation debug="true" targetFramework="4.5" />
4 <httpRuntime targetFramework="4.5" />
5 </system.web>
6 <system.webServer>
7 <handlers>
8 <add name="chart" type="Ichartjs.datasource" path="*.datasource" verb="*"/>
9 </handlers>
10 </system.webServer>
11 </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插件了。前台的代码如下:
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head runat="server">
3 <title></title>
4 <script src="Js/ichart.1.2.src.js"></script>
5 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
6 <script>
7 $(function () {
8 $.ajax({
9 type: "post",
10 url: "111.ChartDataSourcecs?method=GetObjectJsonData",
11 contentType: "application/json;charset=utf-8",
12 dataType: "json",
13 success: function (data) {
14 var chart = new iChart.Pie2D({
15 render: 'canvasDiv',
16 data: data.data,
17 title: {
18 text: data.title,
19 color: '#3e576f'
20 },
21 footnote: {
22 text: 'ichartjs.com',
23 color: '#486c8f',
24 fontsize: 11,
25 padding: '0 38'
26 },
27 sub_option: {
28 label: {
29 background_color: null,
30 sign: false,//设置禁用label的小图标
31 padding: '0 4',
32 border: {
33 enable: false,
34 color: '#666666'
35 },
36 fontsize: 11,
37 fontweight: 600,
38 color: '#4572a7'
39 },
40 border: {
41 width: 2,
42 color: '#ffffff'
43 }
44 },
45 shadow: true,
46 shadow_blur: 6,
47 shadow_color: '#aaaaaa',
48 shadow_offsetx: 0,
49 shadow_offsety: 0,
50 background_color: '#fefefe',
51 offsetx: -60,//设置向x轴负方向偏移位置60px
52 offset_angle: -120,//逆时针偏移120度
53 showpercent: true,
54 decimalsnum: 2,
55 width: 800,
56 height: 400,
57 radius: 120
58 });
59 //利用自定义组件构造右侧说明文本
60 chart.plugin(new iChart.Custom({
61 drawFn: function () {
62 //计算位置
63 var y = chart.get('originy'),
64 w = chart.get('width');
65
66 //在右侧的位置,渲染说明文字
67 chart.target.textAlign('start')
68 .textBaseline('middle')
69 .textFont('600 16px Verdana')
70 .fillText(data.fillText, w - 220, y - 40, false, '#be5985', false, 20);
71 }
72 }));
73
74 chart.draw();
75 },
76 error: function (e) {
77 var message = e;
78 }
79 });
80 });
81 </script>
82 </head>
83 <body>
84 <form id="form1" runat="server">
85 //Html代码
86 <div id='canvasDiv'></div>
87 </form>
88 </body>
89 </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
如何在我们项目中利用开源的图表(js chart)的更多相关文章
- 在dotnetcore的MVC项目中,创建支持 vue.js 的最小工程模板
网上Vue模板不是最新的,我自己做了一个最新的支持 Vue.js 的最小工程模板,方便大家从 Hello world. 入门, 在 VS2017 里学习,并扩展出自己的项目. 下面是创建步骤: 1.在 ...
- 擦他丫的,今天在Django项目中引用静态文件jQuery.js 就是引入报错,终于找到原因了!
擦 ,今天在Django项目中引用静态文件jQuery.js 就是引入报错,终于找到原因了! 问题在于我使用的谷歌浏览器,默认使用了缓存,导致每次访问同一个url时,都返回的是缓存里面的东西.通过谷歌 ...
- php课程 1-3 web项目中php、html、js代码的执行顺序是怎样的(详解)
php课程 1-3 web项目中php.html.js代码的执行顺序是怎样的(详解) 一.总结 一句话总结:b/s结构 总是先执行服务器端的先.js是客户端脚本 ,是最后执行的.所以肯定是php先执行 ...
- react项目中引入了redux后js控制路由跳转方案
如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...
- 报表开发工具中开放的部分图表js接口列表
1.. 描述 报表开发工具FineReport 8.0版本中开放了部分图表js接口,在具体应用的过程中很多人都不知道这些接口到底有什么作用,该怎么应用,所以根据我自己的应用在下面归纳了这些新开放js接 ...
- 在项目中利用TX Text Control进行WORD文档的编辑显示处理
在很多文档管理的功能模块里面,我们往往需要对WORD稳定进行展示.编辑等处理,而如果使用微软word控件进行处理,需要安装WORD组件,而且接口使用也不见得简单易用,因此如果有第三方且不用安装Offi ...
- 如何在Android Studio项目中导入开源库?
前两天,谷歌发布了Android Studio 1.0的正式版,也有更多的人开始迁移到Android Studio进行开发.然而,网上很多的开源库,控件等还是以前的基于Eclipse进行开发,很多人不 ...
- vue项目中利用popstate处理页面返回操作
需求背景:项目中需要做一个返回确认,避免用户误触返回键而退出当前页面. 原理:利用history和浏览器刷新popstate状态 实现: 1.在mounted() 阶段判断并添加popstate事件监 ...
- 在Springboot + Mybaitis-plus 项目中利用Jackson实现json对java多态的(反)序列化
Jackson允许配置多态类型处理,当JSON面对的转换对象是一个接口.抽象类或者一个基类的时候,可以通过一定配置实现JSON的转换.在实际项目中,Controller层接收入参以及在Dao层将对象以 ...
随机推荐
- Defining Database and Instance【数据库与实例】
Database: A collection of physical operating system files or disks. When usingOracle Automatic Stora ...
- 剑指offer-第三章高质量的代码(输出该链表中倒数第K个节点)
题目:输入一个链表,输出这个链表中倒数第K个节点.(代码的鲁棒性) 思路:用两个指针p1和p2,都指向头节点,开始的时候,p2不动,p1移动k-1次,指向第k个节点.此时,如果p1->next! ...
- 【转】IOS --- OC与Swift混编
群里大神发的网址,感觉有用就先收录了,暂时没时间看SWIFT,感觉代码简洁,但是可阅读性不是太高,有些代码让系统去判断类型,同样的,我们看代码的时候也得自己去判断类型,或许看多就习惯了,有时间再说吧, ...
- Apache PHP 安装问题 (SUSE Linux)
1. SUSE Linux配置命令如下: './configure' '--with-apxs2=/usr/local/apache2/bin/apxs' '--with-mysql' 2. 接下来 ...
- PHP中的session
来自博客园 1.初始化(使用session前都要使用,一个页面用一个就可以了) session_start(); 2.保存 $_SESSION[$sessionName]=$value; (value ...
- Oracle 安装 检查操作系统版本 必须是 5.0 5.1 的解决办法
打开 oraparam.ini文件 添加红色部分 Windows=5.1,5.2,6.1 最下面添加 [Windows-6.1-required]#Minimum display colours fo ...
- Spring 框架概述
◆简介 目的:解决企业应用开发的复杂性 功能:使用基本的JavaBean代替EJB,并提供了更多的企业应用功能 范围:任何Java应用 Spring 框架是一个分层架构,由 7 个定义良好的模块组成. ...
- hdu 2476(第一道区间dp)
题意:就是给定两个字符串,第一个是初始串,第二个是目标串,问你把初始串变到目标串最少需要多少串! 分析:此题分两步,第一步是假设开始的初始串是空串,然后就进行区间dp,dp[i][j]代表把区间[i, ...
- Mac OS 10.8 中的 OpenCV 开发环境设置
一.编译OpenCV 要在Mac OS上使用OpenCV,需要自己编译源代码.操作过程如下: 1)从http://www.cmake.org下载cmake 2.8安装包. 2)安装cmake 2.8. ...
- 33条C#、.Net经典面试题目及答案
33条C#..Net经典面试题目及答案[zt] 本文集中了多条常见的C#..Net经典面试题目例如".NET中类和结构的区别"."ASP.NET页面之间传递值的几种方式? ...