奥运会奖牌榜，无需洪荒之力，用Wijmo轻松搞定
本帖最后由 断天涯大虾 于 2016-8-18 10:08 编辑里约奥运赛事如火如荼，激战正酣！中国队奋力拼搏，表现抢眼，不断刷新奖牌榜！
赛场下，小编也被奥运激情点燃，看赛事直播，在微博和朋友圈点赞助威，更用纯前端开发工具 Wijmo 写了个奖牌榜，前后用了不到一个小时，成就感满满，分享给大家。
先来一起看看界面吧。清晰明了，简约大方，实时自动更新奖牌数，并根据金牌数自动调整排名。支持分页查看，并可搜索你想了解的国家奖牌数。（请点击看大图）http://mmbiz.qpic.cn/mmbiz_jpg/9eQPQ8Bxg1U8N3GGDVWoZx0nN1IauMJicNicWmOCf2y68UxqabcpyuXbapVqAJ8PAEzL4NXEp0CdGZr1yrHAtFag/0?wx_fmt=jpeg
还可一键切换为“图表”样式，在图表元素上方移动鼠标时，还会显示数据点的详细信息。（请点击看大图）
http://mmbiz.qpic.cn/mmbiz_jpg/9eQPQ8Bxg1U8N3GGDVWoZx0nN1IauMJicVEibft9khCDNT4VdXM6j0Okw79xOxQS7RaDvxVsGX3Kic3qLDA0x8JiaQ/0?wx_fmt=jpeg
在创建奖牌榜时，小编用到了两款前端工具:AngularJS优秀的前端 JS 框架，已经被用于 Google 的多款产品当中，其最为核心的功能是 MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等；
Wijmo新一代 JavaScript UI 控件集，由全球最大的控件提供商葡萄城公司研发并提供技术支持，它秉承触控优先的设计理念，具有触控设备支持广泛、设计简洁、极易定制等特点，并全面支持 Angular 2。微软 Dynamics 使用葡萄城的Wijmo 5提供移动端用户界面选择。
创建方法上，先使用 Angular 服务来获取里约奥运会的最新战况，数据被获取并通过一个 JSON 对象返回，然后加载到 Wijmo 的 CollectionView 上。
数据展示上，使用了 Wijmo Popover，Wijmo FlexChart 和 Wijmo FlexGrid 控件，十分多样。
Wijmo FlexGrid 可将表格绑定到一个数据源，并允许选择数据项的数量、Selection Mode 和 Culture 以及是否用数据映射和格式化的菜单。即使有大量的数据项，也可通过自动虚拟化行和列来实现这个级别的性能；
Wijmo FlexChart 可将图表绑定到一个数据源，您可选择图表类型，系列叠加和旋转。如果在图表元素上方移动鼠标，还会显示数据点的详细信息 Tooltip。快如闪电触控优先的 Wijmo，提供更灵活的操作体验，您也来试试吧！
查看 Demo，请点击此处。了解更多或下载试用，请访问 Wijmo 官方网站。
页:
[1]