Jadual Kandungan
一、认识:什么是分位属性图
二、作图:分位属性图的Excel作法
三、实践:分位属性图的引申用法
Rumah hujung hadapan web html tutorial 原创 | 分位属性图,教你制作动态属性标签(图表连载_02)_html/css_WEB-ITnose

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

Jun 21, 2016 am 08:48 AM

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

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

表格数据为对应股票的财务指标,除了常规的定量数据外,值得称道的是其中最后一行“四分位属性”,用定性的方式帮我们解读每个财务指标,从而形成对股票标的的整体认识。在可视化上采用了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个(大致)

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

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

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

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

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

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Akan R.E.P.O. Ada Crossplay?
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah tujuan & lt; kemajuan & gt; unsur? Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Mar 20, 2025 pm 05:56 PM

Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.

Adakah HTML mudah belajar untuk pemula? Adakah HTML mudah belajar untuk pemula? Apr 07, 2025 am 12:11 AM

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Mar 20, 2025 pm 06:05 PM

Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Apr 08, 2025 pm 07:05 PM

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Apakah contoh tag permulaan dalam html? Apakah contoh tag permulaan dalam html? Apr 06, 2025 am 12:04 AM

Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.

See all articles