内容简介：接手了一个需求的时候，其中有个 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 属性？如何正确实现这个属性？
- 自己实现集合框架(十):顺序栈的实现
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Beginning Apache Struts
Arnold Doray / Apress / 2006-02-20 / USD 44.99
Beginning Apache Struts will provide you a working knowledge of Apache Struts 1.2. This book is ideal for you Java programmers who have some JSP familiarity, but little or no prior experience with Ser......一起来看看 《Beginning Apache Struts》 这本书的介绍吧!
