毋庸洪荒之力,轻松化解奥林匹克运动会奖牌榜

图片 1

  • AngularJS,
    出色的前端JS框架,已经被用来谷歌的多款产品中间,其无与伦比主题的服从是MVVM、模块化、自动化双向数据绑定、语义化标签、注重注入等等;
  • Wijmo,新一代JavaScript
    UI控件集,由伍洲最大的控件提供商葡萄城集团研究开发并提供技术援救,它秉承触控优先的陈设意见,具有触控设备支撑周边、设计简单、极易定制等特点,并健全支持Angular
  • Wijmo
    FlexGrid,可将表格绑定到2个数据源,并同意选拔数据项的数码、Selection
    Mode和Culture以及是不是用数据映射和格式化的菜系。就算有恢宏的多少项,也可通过自动虚拟化行和列来兑现那几个级其余性子。
  • Wijmo
    FlexChart,可将图纸绑定到一个数据源,您可挑选图表类型,类别叠加和旋转。如若在图纸成分上方移动鼠标,还会展现数据点的详细新闻Tooltip。

图片 2

查看Demo,请访问:http://demo.gcpowertools.com.cn/Wijmo5/OlympicTracker/#/standings

先来壹块看看界面吧。清晰明了,简约大方,实时自动更新奖牌数,并基于金牌数自动调整排行。援助分页查看,并可照葫芦画瓢你想询问的国度奖牌数。

还可1键切换为“图表”样式,在图纸元素上方移动鼠标时,还会议及展览示数据点的详细消息。

数量显示上,使用了Wijmo Popover,Wijmo FlexChart和Wijmo FlexGrid
控件,10分类别。

里约奥林匹克运动赛事如火如荼,激战正酣!中华夏族民共和国队奋力拼搏,表现抢眼,不断刷新奖牌榜!

比赛场面下,作者也被奥林匹克运动心境激起,除了看赛事直播,在微博和对象圈点赞助威,更用纯前端开发工具Wijmo
写了个高姿容金牌榜,前后用了不到三个钟头,成就感满满。

 

成立方法上,先选用Angular
服务来赢得里约奥林匹克运动会的风行作战景况,数据被获取并通过2个JSON对象回来,然后加载到Wijmo
的CollectionView上。

在创设这些奖牌榜时,作者使用了七款前端工具:

相关文章