动态生成雷达图--Radar
效果图：
aspx页面代码：
代码语言：javascript复制1 <ext:Panel ID="ResultPanel" Border="true" runat="server">
2 <Items>
3 </Items>
4 </ext:Panel>因为是动态生成图，所以只需要一个容器装载（Panel）；
aspx.cs代码
代码语言：javascript复制 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
http://www.fusioncharts.com/
Highcharts
http://www.highcharts.com/
这两款都是比较优秀的图表插件。当然就雷达图而言，小白觉得还是ext的比较漂亮。
更多图表请看小白的博文 http://www.cnblogs.com/WangJinYang/archive/2012/06/19/2554594.html
欢迎博友的意见和建议。
