原创 | 分位属性图，教你制作动态属性标签（图表连载_02）_html/css_WEB-ITnose
一、认识：什么是分位属性图
东方财富网股票行情页面有这样一张表格：
表格数据为对应股票的财务指标，除了常规的定量数据外，值得称道的是其中最后一行“四分位属性”，用定性的方式帮我们解读每个财务指标，从而形成对股票标的的整体认识。在可视化上采用了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个（大致）
-展示对象名次变化，对象个数不限
【优点】形式新颖，数据可视，可放在单元格内
以上就是本期内容，感谢大家的关注和阅读，希望能给大家一些灵感。
操作中如有疑问，或有任意建议，欢迎在本公众号后台留言；
如果你有更多的应用创意，也欢迎随时交流。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
