专栏首页java跬步EXT.NET 使用总结(3)--动态图表

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

http://www.fusioncharts.com/

Highcharts

http://www.highcharts.com/

这两款都是比较优秀的图表插件。当然就雷达图而言,小白觉得还是ext的比较漂亮。

更多图表请看小白的博文 http://www.cnblogs.com/WangJinYang/archive/2012/06/19/2554594.html

欢迎博友的意见和建议。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • .NET代码错误日志

    DougWang
  • EXT.NET 使用总结(1)

    从系统改版到现在,将近半年的时间,原本陌生的Ext.NET的UI框架,也慢慢的熟悉了。总的来说,这个UI框架还是很优秀的,但是也没有100%完美的产品(老系统使...

    DougWang
  • .NET Remoting 体系结构 之 消息接收器

    Activator.GetObject()方法调用 RemotingServices.Connect()方法连接已知对象。在 Connect()方法中,Unma...

    DougWang
  • dotNET Core 中怎样操作AD(续1)

    在 AD 中进行用户的操作,通常需要先判断用户是否存在,这时就需要使用查询了,用下面代码可以进行 AD 中的查询:

    oec2003
  • 使用 neovim 的浮动窗口让你再次爱上 fzf

    fzf 是一个非常高效实用且美观的命令行工具,并且配置有对应的 vim 插件 fzf.vim, 相信很多人都用过。这里就不在赘述,如果你还没有用过,很推荐一试。

    用户1558438
  • javascript中日期格式与时间戳之间的转化

    日期格式与时间戳之间的转化 一:日期格式转化为时间戳 function timeTodate(date) { var new_str = date.re...

    猿人谷
  • 2018-05-20

    JavaEdge
  • 数据库 ID 生成方案:数据库自增

    phone 的存在是为了方便插入数据,当插入数据成功时,就产生了自增 id,而对于插入,这里使用的是 replace,replace 会先查找是否存在 phon...

    happyJared
  • 喂喂,3块钱的小程序服务器还剩下一天了

    今天义务提醒一下,腾讯云关于小程序两个月的体验活动快要结束了。 (怎么听起来像个广告) 不是广告啦!花3块钱,一台业务服务器+一台会话服务器+一台Mysql服务...

    花叔

扫码关注云+社区

领取腾讯云代金券