EXT.NET 使用总结（3）--动态图表

时间：2023-03-08 19:56:23
EXT.NET 使用总结（3）--动态图表

动态生成雷达图--Radar

效果图：

EXT.NET 使用总结（3）--动态图表

aspx页面代码：

 <ext:Panel ID="ResultPanel" Border="true" runat="server">

     <Items>

     </Items>

 </ext:Panel>

因为是动态生成图，所以只需要一个容器装载（Panel）；

aspx.cs代码

         [DirectMethod(Timeout = )]//限制执行超时时间

         protected void ReloadData(object sender, DirectEventArgs e)

         {

             Dictionary<string, Dictionary<string, double>> data = GenerateChartBySingleCorp();

             ResultPanel.Controls.Clear();

             Ext.Net.Panel Panel = GetGroupChart(data);

             ResultPanel.Add(Panel);//把生成带有Radar图的Panel加到容器里

             ResultPanel.ReRender();//重新装载容器（容器位置不变）

             // ResultPanel.Render();重新装载容器（容器位置根据添加子元素的顺序加载）

         }
        public Ext.Net.Panel GetGroupChart(Dictionary<string, Dictionary<string, double>> data )

         {

             List<Datas> DataList = GetDataSource(data);//数据源

             Ext.Net.Model ExtModel = new Ext.Net.Model();//定义一个mode

             ExtModel.Fields.Add(new ModelField("Name", ModelFieldType.String));

             Dictionary<string, double> first=data.First().Value;

             Dictionary<string, string> dataMODE = new Dictionary<string, string>();

             int i = ;

             foreach (var item in first)

             {

                 ExtModel.Fields.Add(new ModelField("Data"+i, ModelFieldType.Float));

                 dataMODE.Add("Data"+i,item.Key);

                 i++;

             }

             RadialAxis ra = new RadialAxis();//定义图表类型，这里定义为 雷达图，也可以定义为线图，柱图，饼图等。

             ra.Maximum = ;//最大值

             ra.Steps = ;//分成几个圈

             //Maximum="5" Steps="5"

             Chart Chart = new Chart();//定义一个chart容器

             Chart.Height = ;

             Chart.Width = ;

             Chart.StyleSpec = "background:#fff;";

             Chart.StandardTheme = StandardChartTheme.Category2;

             Chart.InsetPadding = ;

             Chart.Animate = true;

             Chart.LegendConfig = new ChartLegend(new ChartLegend.Config() { Position = LegendPosition.Right });

             foreach (var item in dataMODE)//循环加载数据集

             {

                 RadarSeries radarseries = new RadarSeries();

                 List<string> XFieldFields = new List<string>();

                 XFieldFields.Add("Name");

                 List<string> YFieldFields = new List<string>();

                 YFieldFields.Add(item.Key);

                 radarseries.XField = XFieldFields.ToArray();

                 radarseries.YField = YFieldFields.ToArray();

                 radarseries.ShowInLegend = true;

                 radarseries.ShowMarkers = true;

                 radarseries.Title = item.Value;

                 SpriteAttributes SpriteAttributes = new Ext.Net.SpriteAttributes();

                 SpriteAttributes.Radius = ;

                 SpriteAttributes.Size = ;

                 radarseries.MarkerConfig = SpriteAttributes;

                 SpriteAttributes SpriteAttributes1 = new Ext.Net.SpriteAttributes();

                 SpriteAttributes1.StrokeWidth = ;

                 SpriteAttributes1.Fill = "none";

                 radarseries.Style = SpriteAttributes1;

                 ChartTip ChartTip = new Ext.Net.ChartTip();

                 ChartTip.TrackMouse = true;

                 ChartTip.Width = ;

                 ChartTip.Height = ;

                 ChartTip.Renderer.Handler = "this.setTitle(storeItem.get('Name') + ': ' + storeItem.get('" + item.Key + "'));";

                 radarseries.Tips = ChartTip;

                 Chart.Series.Add(radarseries);

             }

             Chart.Axes.Add(ra);

             Store Store = new Ext.Net.Store();

             Store.Model.Add(ExtModel);

             Store.Data = DataList;

             Store.AutoDataBind = true;

             Chart.Store.Add(Store);

             Ext.Net.Panel Panelp = new Ext.Net.Panel();

             Panelp.Border = false;

             Panelp.Height = ;

             Panelp.Width = ;

             Panelp.Add(Chart);

             return Panelp;

         }

图表总结

和雷达图一样，其他图表也是类似的定义，只是属性不同而已。具体可参考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

欢迎博友的意见和建议。

相关文章