1、相信朋友們在開發的過程當中都會使用到「數據統計」的功能,圖表的統計更爲直觀,在這裏就介紹兩款插件:fusionChart、DataVisualization。javascript
一、fusionChart實際項目中用的比較多,包括一些3D效果圖(餅狀、柱狀、儀表板),先上效果圖:java
二、實現上面的效果:json
(1)、官網下載FusionCharts.js,或者下載個人源碼,其中就有:FusionCharts.js、Pie3D.swf(3D餅狀動畫效果)、Pie2D.swf(2D餅狀效果)、Column3D.swf(3D柱狀圖動畫效果),其餘的像儀表板、溫度計、音樂播放器效果,點擊這裏下載官方Demo:app
(2)、他須要的數據格式有兩種:XML、JSON,先來演示使用XML格式的效果,繼續使用MVC的方式。ide
一、首先添加FusionCharts.js。字體
二、添加一個DIV,做爲顯示的位置:<div id="divChart"></div>。動畫
三、JS渲染,其中:chart.setXMLUrl,使用的就是XML來做爲數據源。spa
@{ 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>
四、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>
五、簡單的介紹XML中的參數吧:3d
使用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格式的柱狀圖效果:
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" />
3、總結:說了兩款比較經常使用的「統計圖表」插件,若是對您有一點點幫助的話,右下角「推薦」一下,代碼中若有Bug,請留言。