如何在我們項目中利用開源的圖表（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

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 method
            Type 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軸負方向偏移位置60px
                        offset_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