网站开发对显卡的要求,海南建设工程股份有限公司网站,微信网站特征,国外做汽配的网站最近觉得应该把自己在技术上的一些心得记录在博客里面跟大家分享#xff0c;一起讨论#xff0c;一起成长#xff01; 这篇随笔主要为介绍chart在项目中的运用#xff0c;因为在我们看到一些开源的chart时候#xff0c;是使用纯js 或者建立在一些插件(例如#xff1a;jqu… 最近觉得应该把自己在技术上的一些心得记录在博客里面跟大家分享一起讨论一起成长 这篇随笔主要为介绍chart在项目中的运用因为在我们看到一些开源的chart时候是使用纯js 或者建立在一些插件(例如jquery)上的我们会用有一些茫然。chart里面的文档和实例都是html css js ,数据源都是静态定义成json对象标题、脚注等都是静态的字符串我们如何让这些数据动态地与数据库交互或者后台进行交互呢 既然讲到了图表chart在这里想大家推荐个人觉得不错的几个chart:ichartjs、nvd3、highcharts和echarts。ichartjs做的非常不错学习相当容易文档和事例都很丰富是使用纯js写的开源插件缺点是只支持html5一些低版本的浏览器使用不了nvd3学习起来相对较难当效果相当炫也是我推荐的原因highcharts:功能是很强大的图表比较齐全学习成本较低唯一不好的是虽然开源使用却又限制使用在商业的网址上是需要收费的echarts是最值得推荐的了这个chart是百度开发的非常强大是我见过最完美的一个chart,这个也是同事在一个偶然的机会想找到的网上没见过人推荐过这款chart应该是太还比较新百度自己的搜索优化没做好吧...着也是个人的见解而已仅供参考。 ichartjshttp://www.ichartjs.com/ nvd3http://nvd3.org/ highchartshttp://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 } View Code 我们在datasource.ashx上写上代码在这里需要注意的是为了充分利用这个handler文件我们需要利用反射当ajax请求的时候传入对应的方法的的名称handler利用这个参数去找到对应的方法获得对应的数据。当然如果你的数据存储在数据库里面的需要在方法里面把数据库的数据提出出来转化为我们上面的ChartData模型数据。 1 public class datasource : IHttpHandler2 {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 Dictionarystring, object resultData new Dictionarystring, object();
20 ListChartData data new ListChartData();
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 } View Code 这个时候我们需要引用一个数据集也可以说在项目中安装json.net 这个时候Ajax还不能通过handler里的GetObjectJsonData发放获得数据我们还需要在web.config里面配置对应的信息 1 configuration2 system.web3 compilation debugtrue targetFramework4.5 /4 httpRuntime targetFramework4.5 /5 /system.web6 system.webServer7 handlers8 add namechart typeIchartjs.datasource path*.datasource verb*/9 /handlers
10 /system.webServer
11 /configuration View Code 关键的地方在add namechart typeIchartjs.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 xmlnshttp://www.w3.org/1999/xhtml2 head runatserver3 title/title4 script srcJs/ichart.1.2.src.js/script5 script srchttp://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js/script6 script7 $(function () {8 $.ajax({9 type: post,
10 url: 111.ChartDataSourcecs?methodGetObjectJsonData,
11 contentType: application/json;charsetutf-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 idform1 runatserver
85 //Html代码
86 div idcanvasDiv/div
87 /form
88 /body
89 /html View Code 着里通过jquery ajax的地址111.datasource?methodGetObjectJsonData执行到handler 里面的ProcessRequest方法ProcessRequest方法通过传入的参数methodGetObjectJsonData找到对应的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转载于:https://www.cnblogs.com/sczw-maqing/p/3375837.html
