EXT.NET 使用总结（3）--动态图表
动态生成雷达图--Radar
效果图：
aspx页面代码：
1 <ext:Panel ID="ResultPanel" Border="true" runat="server"> 2 <Items> 3 </Items> 4 </ext:Panel>
因为是动态生成图，所以只需要一个容器装载（Panel）；
aspx.cs代码
1 [DirectMethod(Timeout = 2000000)]//限制执行超时时间 2 protected void ReloadData(object sender, DirectEventArgs e) 3 { 4 Dictionary<string, Dictionary<string, double>> data = GenerateChartBySingleCorp(); 5 ResultPanel.Controls.Clear(); 6 Ext.Net.Panel Panel = GetGroupChart(data); 7 ResultPanel.Add(Panel);//把生成带有Radar图的Panel加到容器里 8 ResultPanel.ReRender();//重新装载容器（容器位置不变） 9 // ResultPanel.Render();重新装载容器（容器位置根据添加子元素的顺序加载） 10 }
1 public Ext.Net.Panel GetGroupChart(Dictionary<string, Dictionary<string, double>> data ) 2 { 3 List<Datas> DataList = GetDataSource(data);//数据源 4 5 Ext.Net.Model ExtModel = new Ext.Net.Model();//定义一个mode 6 ExtModel.Fields.Add(new ModelField("Name", ModelFieldType.String)); 7 Dictionary<string, double> first=data.First().Value; 8 Dictionary<string, string> dataMODE = new Dictionary<string, string>(); 9 int i = 0; 10 foreach (var item in first) 11 { 12 ExtModel.Fields.Add(new ModelField("Data"+i, ModelFieldType.Float)); 13 dataMODE.Add("Data"+i,item.Key); 14 i++; 15 } 16 17 RadialAxis ra = new RadialAxis();//定义图表类型，这里定义为 雷达图，也可以定义为线图，柱图，饼图等。 18 ra.Maximum = 5;//最大值 19 ra.Steps = 5;//分成几个圈 20 //Maximum="5" Steps="5" 21 22 Chart Chart = new Chart();//定义一个chart容器 23 Chart.Height = 500; 24 Chart.Width = 950; 25 Chart.StyleSpec = "background:#fff;"; 26 Chart.StandardTheme = StandardChartTheme.Category2; 27 Chart.InsetPadding = 20; 28 Chart.Animate = true; 29 Chart.LegendConfig = new ChartLegend(new ChartLegend.Config() { Position = LegendPosition.Right }); 30 foreach (var item in dataMODE)//循环加载数据集 31 { 32 RadarSeries radarseries = new RadarSeries(); 33 List<string> XFieldFields = new List<string>(); 34 XFieldFields.Add("Name"); 35 List<string> YFieldFields = new List<string>(); 36 YFieldFields.Add(item.Key); 37 radarseries.XField = XFieldFields.ToArray(); 38 radarseries.YField = YFieldFields.ToArray(); 39 radarseries.ShowInLegend = true; 40 radarseries.ShowMarkers = true; 41 radarseries.Title = item.Value; 42 43 SpriteAttributes SpriteAttributes = new Ext.Net.SpriteAttributes(); 44 SpriteAttributes.Radius = 5; 45 SpriteAttributes.Size = 5; 46 radarseries.MarkerConfig = SpriteAttributes; 47 48 SpriteAttributes SpriteAttributes1 = new Ext.Net.SpriteAttributes(); 49 SpriteAttributes1.StrokeWidth = 2; 50 SpriteAttributes1.Fill = "none"; 51 radarseries.Style = SpriteAttributes1; 52 53 ChartTip ChartTip = new Ext.Net.ChartTip(); 54 ChartTip.TrackMouse = true; 55 ChartTip.Width = 250; 56 ChartTip.Height = 28; 57 ChartTip.Renderer.Handler = "this.setTitle(storeItem.get('Name') + ': ' + storeItem.get('" + item.Key + "'));"; 58 radarseries.Tips = ChartTip; 59 Chart.Series.Add(radarseries); 60 } 61 Chart.Axes.Add(ra); 62 Store Store = new Ext.Net.Store(); 63 Store.Model.Add(ExtModel); 64 Store.Data = DataList; 65 Store.AutoDataBind = true; 66 Chart.Store.Add(Store); 67 68 Ext.Net.Panel Panelp = new Ext.Net.Panel(); 69 Panelp.Border = false; 70 Panelp.Height = 560; 71 Panelp.Width = 960; 72 Panelp.Add(Chart); 73 return Panelp; 74 }
图表总结
和雷达图一样，其他图表也是类似的定义，只是属性不同而已。具体可参考ext.net 提供的demo http://examples.ext.net/#/Chart/Area/Basic/
小白在项目中用到的其他优秀的图表插件
fashion chart
Highcharts
这两款都是比较优秀的图表插件。当然就雷达图而言，小白觉得还是ext的比较漂亮。
更多图表请看小白的博文 http://www.cnblogs.com/WangJinYang/archive/2012/06/19/2554594.html
欢迎博友的意见和建议。
