Home > Web Front-end > HTML Tutorial > 原创 | 分位属性图,教你制作动态属性标签(图表连载_02)_html/css_WEB-ITnose

原创 | 分位属性图,教你制作动态属性标签(图表连载_02)_html/css_WEB-ITnose

WBOY
Release: 2016-06-21 08:48:56
Original
1664 people have browsed it

一、认识:什么是分位属性图

东方财富网股票行情页面有这样一张表格:

表格数据为对应股票的财务指标,除了常规的定量数据外,值得称道的是其中最后一行“四分位属性”,用定性的方式帮我们解读每个财务指标,从而形成对股票标的的整体认识。在可视化上采用了In-cell Chart的形式,形式非常新颖,效果也很直观。

本期以上图为例,为大家介绍分位属性图的Excel作法及引申玩法。

二、作图:分位属性图的Excel作法

制作思路:

首先,我们来看此图包含的定性标签:低、较低、高、较高,共四个标签,在图中自下而上对应四个档位。档位颜色根据指标属性而定,例如当指标为“较高”属性时,图上第二个档位变为蓝色,其它档位保持无色。其次,确定要使用的图表类型。显然,用条形图最合适了,图表系列下包含4个值,例如当指标数据对应标签为“较高”时,图表系列数值应为(0,0,1,0)。

1、构造数据源

数据源构造过程及效果如下图:

需要说明的是:表格第8行“档位划分”采用数据有效性制作下拉列表(低,较低, 较高,高)。

表格第13行“数值转换”为中间变量,用函数(提示:MATCH函数)返回标签对应序号,例如当E8单元格选择“较低”时,E13单元格返回数值2。

第3部分的“数据源制作”表用以生成制图数据,即当指标对应标签为“较高”时,数据源其它标签数据为0,“较高”标签数据为1。(提示:用IF函数)

2、制作图表

1)选择C18:C21单元格,插入条形图;

2)选中系列,在系列格式中设置分类间距为0,无边框线。同时设置坐标最大值为1,并删除系列标志;

3)删除纵向网格线,同时添加横向主要网格线。删除横、纵坐标,设置绘图区边框为灰色,设置系列填充色为深蓝色;

4)取消图表边框,调整图表大小,并拖放至C28单元格;

5)复制图表至其它几个单元格(D28到J28),修改各个图表的数据源,最终效果如下图:

以上是四分位属性图的作图过程,当然你可以根据需要制作五分位、六分位、……任意分位的属性图。时间有限,未能罗列更细致的步骤,还请各位多多包涵。有兴趣的朋友可以尝试制作,如有疑问可以公众号留言。

以下是GIF动态效果:

三、实践:分位属性图的引申用法

除了用于展示定性的属性标签外,分位属性图也可以恰如其分地展现对象名次的变化。

最近,为了准备信用卡战略评估工作,需要制作一张信用卡竞争对手主要指标近三年排名变化的PPT,正当为如何有效展现名次变化而绞尽脑汁时,突然想到了分位属性图。于是,试着用PPT制作了一张名次变化图:

从图上可以看出,自2013年我中信信用卡在发卡上一直处于第二梯队领头羊位置,贷款余额则从2014年的第3名攀升至首位,而收入也从13、14年的第二名跃居第一。三项指标均在第二梯队中处于领先,经营优势进一步巩固。(真实数据,非广告植入)

当然,在PPT中完全是用形状绘制而成,没有任何技术含量。

最后,做个简单的总结。

分位属性图:

【用途】-展示定性属性序列,适合序列项目数为3-5个(大致)

-展示对象名次变化,对象个数不限

【优点】形式新颖,数据可视,可放在单元格内

以上就是本期内容,感谢大家的关注和阅读,希望能给大家一些灵感。

操作中如有疑问,或有任意建议,欢迎在本公众号后台留言;

如果你有更多的应用创意,也欢迎随时交流。

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template