如何在我们项目中利用开源的图表（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