内容简介：接手了一个需求的时候，其中有个 UI图是这样的：按照 PM本来的意思，这张图中只有那几个数字是从接口获取的，而且从接口获取到的每项数字的值，与目前标注的数字相差不会超过 10%，所以柱状图的条形高度不用管，直接一张图片静态的就行了，这确实很省事，三下五除二就弄完。不过，作为一个老(xian)实(de)正(dan)直(teng)的程序员，怎么可以容忍弄虚作假呢，我心中默默计算了下，用代码把这张图画出来也要不了多长时间，不会耽误项目进度的，于是开搞。
接手了一个需求的时候，其中有个 UI图是这样的：
按照 PM本来的意思，这张图中只有那几个数字是从接口获取的，而且从接口获取到的每项数字的值，与目前标注的数字相差不会超过 10%，所以柱状图的条形高度不用管，直接一张图片静态的就行了，这确实很省事，三下五除二就弄完。
不过，作为一个老(xian)实(de)正(dan)直(teng)的程序员，怎么可以容忍弄虚作假呢，我心中默默计算了下，用代码把这张图画出来也要不了多长时间，不会耽误项目进度的，于是开搞。
首先，先把图拆解成几份可以用代码画出来的图形，如下：
border-radius
弄清楚了上述几点后，样式就比较好写了
然后就是各个竖直红色柱的高度计算。
这也很简单，给最高的红色柱定一个高度，其他红色柱以这个最高的红色柱为基准计算高度
例如，最高红色柱定为 200px ，最高红色柱的数字值为 987 ，则每 1 个数值对应的 px 高度为 200px / 1000 ，第二根红色柱的数字值为 230 ，则其高度就为 230 * (200px / 1000)
这样，就能计算出所有红色柱对应的高度了
至于如何让红色柱的高度从 0 动态增长到该有的高度，只需要使用一个 CSS3 的 transition 属性即可，最开始时将所有红色柱的高度设为 0 ，然后再使用 js 将高度设为该有的值就 ok 了
最终实现的效果如下：
本文所实现动画的可运行代码已经放到 Github 了，代码的注释算是比较清晰的，有兴趣的可以自行下载运行。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- php如何实现session,自己实现session,laravel如何实现session
- AOP如何实现及实现原理
- webpack 实现 HMR 及其实现原理
- Docker实现原理之 - OverlayFS实现原理
- 为什么实现 .NET 的 ICollection 集合时需要实现 SyncRoot 属性？如何正确实现这个属性？
- 自己实现集合框架(十):顺序栈的实现
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Linux程序设计
Neil Matthew、Richard Stones / 陈健、宋健建 / 人民邮电出版社 / 201005 / 99.00元
时至今日，Linux系统已经从一个个人作品发展为可以用于各种关键任务的成熟、高效和稳定的操作系统，因为具备跨平台、开源、支持众多应用软件和网络协议等优点，它得到了各大主流软硬件厂商的支持，也成为广大程序设计人员理想的开发平台。 本书是Linux程序设计领域的经典名著，以简单易懂、内容全面和示例丰富而受到广泛好评。中文版前两版出版后，在国内的Linux爱好者和程序员中也引起了强烈反响，这一热潮......一起来看看 《Linux程序设计》 这本书的介绍吧!
