利用div+css+table实现特殊图形效果(标签和图形混合交错显示)

浏览: 1885

环境:BIEE 11.1.1.7....

背景:

项目UI设计师在页面左侧添加图形显示,由于宽度问题,界面展示为:

1   XXX

    指标柱状图    指标值

2   XXX

    指标柱状图    指标值

。。。。。。


该展示效果为标签和指标混合展示,找遍图形展示插件,没有发现类似效果。只好另寻它法。

用BIEE分析拿数据,然后利用叙述视图实现。设置每一行图形在展示的时候分为2行,

第1行第1列展示排序序号,第1行第2列展示标签,第1行第3列空置

第2行第1列空置,第2行第2列用2个div展示,第2行第3列展示指标数据


由于该指标值为绝对值的百分比,故设置规则当超过XXX的全部图形展示为xxx,数值正常展示。

把第2行第2列全长分为xxx份,然后根据数据值确认第1个div和第2个div的长度,其中第1个div的背景色显示为图行的展示颜色,第2个div为背景色即可。

推荐 1
本文由 百分百 创作,采用 知识共享署名-相同方式共享 3.0 中国大陆许可协议 进行许可。
转载、引用前需联系作者,并署名作者且注明文章出处。
本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责。本站是一个个人学习交流的平台,并不用于任何商业目的,如果有任何问题,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

0 个评论

要回复文章请先登录注册