介紹兩款經常使用的「圖表統計圖"的插件

1、相信朋友們在開發的過程當中都會使用到「數據統計」的功能，圖表的統計更爲直觀，在這裏就介紹兩款插件：fusionChart、DataVisualization。

     一、fusionChart實際項目中用的比較多，包括一些3D效果圖（餅狀、柱狀、儀表板），先上效果圖：

                             

                             

                                                         

       二、實現上面的效果：

               （1）、官網下載FusionCharts.js,或者下載個人源碼，其中就有：FusionCharts.js、Pie3D.swf（3D餅狀動畫效果）、Pie2D.swf（2D餅狀效果）、Column3D.swf（3D柱狀圖動畫效果），其餘的像儀表板、溫度計、音樂播放器效果，點擊這裏下載官方Demo:

               （2）、他須要的數據格式有兩種：XML、JSON，先來演示使用XML格式的效果,繼續使用MVC的方式。

                         一、首先添加FusionCharts.js。

                         二、添加一個DIV，做爲顯示的位置：<div id="divChart"></div>。

                         三、JS渲染，其中：chart.setXMLUrl,使用的就是XML來做爲數據源。

                 

@{
    ViewBag.Title = "主頁";
}
<script src="@Url.Content("~/Scripts/FusionCharts/FusionCharts.js")" type="text/javascript"></script>
<script type="text/javascript"> 
         $(function () {
             var chart = new FusionCharts("@Url.Content("~/Scripts/FusionCharts/Pie3D.swf")", "chart1", "800", "600", "0");
             chart.setXMLUrl("@Url.Content("~/StudentData.xml")"); 
             chart.render("divChart");
         });     
</script>

<div id="divChart"></div>

Index View

                         四、XML數據格式以下：                               

                 

<?xml version="1.0" encoding="utf-8" ?>
      <chart caption="全校年齡分佈圖" subCaption="年齡"
        showBorder="1" startingAngle="70" bgAngle="360" bgRatio="0,100" bgColor="99ccff,ffffff"
        enableRotation="1" enableSmartLabels="1" decimals="0" palette="3"
        formatNumberScale="0" XAxisName="橫座標" YAxisName="縱座標">
    
      <set label="年齡在20~24之間" value="750"  isSliced="1"/>
      <set label="年齡在15~20之間" value="1420"  isSliced="1"/>
      <set label="年齡在11~15之間" value="1120"  isSliced="0"/>
      <set label="年齡在8~11之間" value="5846"  isSliced="0"/>
      <set label="年齡在5~8之間" value="1245"  isSliced="0"/>
      <set label="年齡在3~5之間" value="521"  isSliced="0" displayValue="我是幼兒園的學生"/>

        <styles>

          <definition>

            <style type="font" name="CaptionFont" size="25" color='FFFFFF' />

            <style type="font" name="SubCaptionFont" bold="10" />
            
          </definition>

          <application>

            <apply toObject="caption" styles="CaptionFont" />

            <apply toObject="SubCaption" styles="SubCaptionFont" />
            

          </application>

        </styles>
</chart>

StudentData.xml

                         五、簡單的介紹XML中的參數吧：

1. 1. 1. caption 圖表顯示的標題
      2. subCaption 副標題
      3. showBorder是否顯示邊框若是是1說明爲True，0爲false
      4. startingAngle (餅狀圖中用到)初始的角度
      5. bgAngle 背景的角度
      6. bgColor 背景的顏色
      7. enableRotation 是否容許旋轉，1表示能夠旋轉，0爲不容許旋轉
      8. decimals  舉個例子來講，就是說若是一個數值爲999.999，若是decimals設置爲0.則顯示的結果就是999.能夠理解成小數位數
      9. palette 表示採用的風格
      10. formatNumberScale 格式化數字的意思。
      11. XAxisName 在柱狀圖中表示橫座標的Name，YAxisName表示縱座標的Name
      12. set的Label表示顯示在圖表中的Name，Value則表明值，
      13. set中的isSliced，是否分裂，1表明True,0爲false
      14. set中的displayValue，至關於屬性上加[DisplayName]是同樣的，圖表上顯示的名稱
      15. <styles>中，<definition>能夠自定義格式，包括字體的大小，前景色，背景色，等等                   <application>中toObject="caption" styles="CaptionFont",意思是採用的Style，name爲CaptionFont，映射到caption對象上，也就是主標題的意思。

                                  

                                   使用isSliced產生的分裂效果

                                   

                                   使用displayValue的顯示自定義名稱的效果

                                   

                    六、使用JSon格式做爲數據源，添加一個JSon文件，我是先添加的一個類，而後重命名爲.json格式，記得前臺要改成                   

                         chart.setJSONUrl("@Url.Content("~/Demo.json")");使用JSON格式進行渲染，

                 

{
    "chart": {
        "caption": "'餅狀圖使用JSon'",
        "formatnumberscale": "0"
    },
    "data": [
        {
            "label": "B",
            "value": "51852"
        },
        {
            "label": "C",
            "value": "88168"
        },
        {
            "label": "D",
            "value": "73897"
        },
        {
            "label": "E",
            "value": "93933"
        },
        {
            "label": "F",
            "value": "19289"
        },
        {
            "label": "G",
            "value": "79623"
        },
        {
            "label": "H",
            "value": "48262"
        },
        {
            "label": "I",
            "value": "29162"
        },
        {
            "label": "J",
            "value": "96878"
        },
        {
            "label": "K",
            "value": "81241"
        },
        {
            "label": "L",
            "value": "40652",
            "issliced": "1"
        },
        {
            "label": "M",
            "value": "37581",
            "issliced": "1"
        },
        {
            "label": "N",
            "value": "2882"
        },
        {
            "label": "O",
            "value": "746"
        },
        {
            "label": "P",
            "value": "7155"
        },
        {
            "label": "Q",
            "value": "12072"
        },
        {
            "label": "R",
            "value": "45608"
        },
        {
            "label": "S",
            "value": "72570"
        },
        {
            "label": "T",
            "value": "44799"
        },
        {
            "label": "U",
            "value": "71887"
        },
        {
            "label": "V",
            "value": "78170"
        }
    ]
}

JSON數據源

                

                                     

                                使用JSON格式的柱狀圖效果：

                       

2、使用DataVisualization實現如下 的效果：

                

                       

                  

     思路：

         一、首先添加引用：System.Web.DataVisualization.dll,沒有的話，在源碼中下載，dll生成到本地就行。

         二、數據源沒有FusionCharts那麼複雜，他使用的知識一個普通的集合類型。

         三、前臺渲染，也只是一張圖片而已，不須要Jquery進行操做（緣由：只是一個2D的效果）。

         四、後臺返回的是一個AcionResult下FileResult下的FileStreamResult（二進制流）。

         五、這個插件就不介紹那麼多了，代碼中基本都有註釋。

       

 public List<Student> DB()
        {
            List<Student> students = new List<Student>()
            {
                new Student {ID=1,Name="田鑫",Age=23 },
                new Student {ID=2,Name="顧燕",Age=24 } ,
                new Student { ID=3,Name="周杰倫",Age=30 } ,
                new Student { ID=4,Name="王力宏",Age=32} ,
                new Student { ID=5,Name="潘瑋柏",Age=30 } ,
                new Student {ID=6,Name="羅志祥",Age=29  },
                 new Student {ID=7,Name="田鑫",Age=23 },
                new Student {ID=8,Name="顧燕",Age=24 } ,
                new Student { ID=9,Name="周杰倫",Age=30 } ,
                new Student { ID=10,Name="王力宏",Age=32} ,
                new Student { ID=11,Name="潘瑋柏",Age=22 }
              }
          }
        }

數據源代碼（只給了一小部分數據，最好添加多點，效果會明顯不少）

        

        public List<int> ListAge()
        {
            List<int> egNumList = new List<int>();
            int count1 = DB().Where(p=>p.Age>5&&p.Age<10).Count();
            int count2 = DB().Where(p => p.Age >10 && p.Age < 20).Count();
            int count3 = DB().Where(p => p.Age > 20 && p.Age < 30).Count();
            int count4 = DB().Where(p => p.Age > 30).Count();
            egNumList.Add(count1);
            egNumList.Add(count2);
            egNumList.Add(count3);
            egNumList.Add(count4);
            return egNumList;
        }

計算出各個年齡段的人數

        

        public FileResult GetChart()
        {
            string[] xval = { "5~10", "10~20", "20~30", "30以上" };
            string xTitle = "各個年齡段人數";
            return publicChart(xTitle, xval);
        }

統計柱狀圖核心代碼

        

        private FileResult publicChart(string xTitle, string[] xVal)
        {            
            Chart Chart2 = new Chart();
            Chart2.Width = 860;
            Chart2.Height = 520;
            Chart2.RenderType = RenderType.ImageTag;
            Chart2.Palette = ChartColorPalette.BrightPastel;
            Title t = new Title("全校年齡統計表", Docking.Top, new System.Drawing.Font("Trebuchet MS", 12, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));
            Chart2.Titles.Add(t);
            Chart2.ChartAreas.Add("b");
            //右側顯示的文字（）
            Chart2.Series.Add("數量");
            //ListAge()：各個年齡段的人數
            List<int> yValues = ListAge();
            Chart2.Series["數量"].Points.DataBindXY(xVal, yValues);
            //SeriesChartType.Column：餅狀圖仍是柱狀圖
            Chart2.Series["數量"].ChartType = SeriesChartType.Column;
            Chart2.ChartAreas[0].Area3DStyle.Enable3D = true;

            Chart2.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
            Chart2.BorderColor = System.Drawing.Color.FromArgb(26, 59, 105);
            Chart2.BorderlineDashStyle = ChartDashStyle.Solid;
            Chart2.BorderWidth = 2;
            Chart2.Series["數量"].IsValueShownAsLabel = true;//顯示每一個柱體的數據
            Chart2.Series["數量"].MarkerStyle = MarkerStyle.Diamond;
            Chart2.Series["數量"].MarkerSize = 8;

            //  Chart2.ChartAreas[0].AxisY.Title = "yyyyyyy";
            Chart2.ChartAreas[0].AxisX.Title = xTitle;
            Chart2.ChartAreas[0].AxisX.Interval = 1;//X軸標題間隔
            //動態顯示Y軸標題間隔
            int sumValues = 0, avyValues = 100;
            foreach (int yValue in yValues)
            {
                sumValues += yValue;
            }
            if (sumValues > 1000 && sumValues < 10000)
                avyValues = (sumValues / 1000) * 100;
            else if (sumValues >= 10000)
                avyValues = (sumValues / 10000) * 1000;
            Chart2.ChartAreas[0].AxisY.Interval = avyValues;//Y軸標題間隔
            Chart2.Legends.Add("Legend1");
            MemoryStream momory = new MemoryStream();
            Chart2.SaveImage(momory, ChartImageFormat.Png);
            momory.Position = 0;
            return new FileStreamResult(momory, "image/png");
        }

返回到前臺的內容

        

<image src="/Home/GetChart" name="TX" />

前臺View（放一個<image>便可）

3、總結：說了兩款比較經常使用的「統計圖表」插件，若是對您有一點點幫助的話，右下角「推薦」一下，代碼中若有Bug，請留言。