无须洪荒之力,轻松搞定奥运会奖牌榜

里约奥运赛事如火如荼,激战正酣!中国队奋力拼搏,表现抢眼,不断刷新奖牌榜!

赛场下,小编也被奥运激情点燃,除了看赛事直播,在微博及情人圈点赞助威,更就此纯前端开发工具Wijmo
写了只高颜值金牌榜,前后用了不交一个时,成就感满满。

先来共同看看界面吧。清晰明了,简约大方,实时自动更新奖牌数,并根据金牌数自动调整排名。支持分页查看,并而找你想打听的国家奖牌数。

图片 1

还而同等键切换为“图表”样式,在图元素上方移动鼠标时,还会见显得数据点的详细信息。

图片 2

当创造是奖牌榜时,小编使用了区区缓慢前端工具:

  • AngularJS,
    优秀之前端JS框架,已经给用于Google的多款产品中间,其最为基本的功效是MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等;
  • Wijmo,初一代JavaScript
    UI控件集,由全球最酷之控件提供商葡萄城公司研发并提供技术支持,它秉承触控优先的筹划理念,具有触控设备支持大、设计简洁、极容易定制等特色,并完善支持Angular
    2

创办方法上,先使用Angular
服务来收获里大约奥运会的新颖战况,数据为取并透过一个JSON对象回来,然后加载到Wijmo
的CollectionView上。

数量显示及,使用了Wijmo Popover,Wijmo FlexChart和Wijmo FlexGrid
控件,十分名目繁多。

  • Wijmo
    FlexGrid,可将表格绑定到一个数据源,并同意选择数据项的多寡、Selection
    Mode和Culture以及是否就此数据映射和格式化的食谱。即使发生大量之数项,也可是由此机关虚拟化行和排来实现这个级别之属性。
  • Wijmo
    FlexChart,可将图纸绑定到一个数据源,您可是卜图表类型,系列叠加和转。如果当图片元素上方移动鼠标,还会显得数据点的详细信息Tooltip。

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

 

相关文章