当前位置: 首页 > article >正文

模板学堂|DataEase图表样式解析

DataEase开源数据可视化分析平台于2022年6月正式发布模板市场(https://dataease.io/templates/)。模板市场旨在为DataEase用户提供专业、美观、拿来即用的仪表板模板,方便用户根据自身的业务需求和使用场景选择对应的仪表板模板,并在优质模板的基础上轻松制作自己的仪表板。

2023年3月上新模板

DataEase模板市场定期进行模板上新。2023年3月共上新3个模板,涉及Zabbix告警监控、资产监控和开源社区运营主题,欢迎大家在DataEase模板市场下载使用。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

模板技巧

本月为大家推荐的模板技巧是为大家介绍并解析DataEase中的各种图表样式。

当我们使用数据可视化分析工具时,图表样式是展现数据的关键因素之一。在DataEase开源数据可视化分析平台上,提供了多种图表样式,包括折线图、柱状图、饼图、雷达图、散点图等。不同的图表样式适用于不同的数据类型和数据分析需求,因此在使用DataEase时选择合适的图表样式非常重要。

本期模板技巧将为您介绍饼图、柱状图、折线图、南丁格尔玫瑰图、漏斗图、雷达图、瀑布图、词云图等图表样式。在本文中,我们对DataEase的多种图表样式进行解析,旨在帮助用户更好地展现数据并深入地理解数据的内涵。

图表介绍

饼图

一、释义

饼图,或称饼状图,是一个划分为几个扇形的圆形统计图表,用于描述量、频率或百分比之间的相对关系,每个扇区的弧长(以及圆心角和面积)大小为其所表示的数量的比例。
在这里插入图片描述

二、适用场景

当符合以下条件时,更适合使用饼图进行展现:

1.想要突出表示某个部分在整体中所占比例;

2.分类数量最好不大于5个;

3.各不同分类间的占比差异明显。

三、辅助使用方式

1.显示出各扇区占比数据,可以起到辅助阅读的作用。
在这里插入图片描述

2.将数值进行排序,扇区按照大小顺序依次展示,可以起到辅助阅读的作用。
在这里插入图片描述

四、不适用场景

1.部分统计学家认为,将饼图用于表达信息的效果很差。虽然饼图在商业领域和杂志中的使用非常广泛,但在科学文献中却很少用到饼图。原因是饼图用面积取代了长度,这样就加大了对各个数据进行比较的难度。由于感知力的差异与实际差异呈线性相关,长度更适宜用于量度。考虑到这种情况,当数值较为接近时或在信息上我们更倾向于精确的表达时,比起饼图更建议使用柱状图。
在这里插入图片描述

2.当图表需要展现的类型过多时,不建议选择饼图。

在这里插入图片描述

柱状图

一、释义

柱状图是一种以长方形的长度为变量的统计图表。柱状图用来比较两个或以上的价值(不同时间或者不同条件),只有一个变量,通常利用于较小的数据集分析,柱状图亦可横向排列。
在这里插入图片描述
在这里插入图片描述

作为人们最常用的图表之一,柱状图也衍生出了多种多样的图表形式。例如,将多个并列的类别聚类、形成一组,再在组与组之间进行比较,这种图表叫做“分组柱状图”或“簇状柱形图”;将类别拆分称多个子类别,形成“堆叠柱状图”;也可以将柱形图与折线图结合起来,共同绘制在一张图上,形成“双轴图”。

1.分组柱状图:由子类别来划分一组有几条柱子,形成分组柱状图。
在这里插入图片描述

2.堆叠柱状图:由堆叠项将一个类别拆成多个子类别形成堆叠柱状图。
在这里插入图片描述

3.双轴图

双轴图的指标分为左侧指标和右侧指标,对应的坐标轴分别为坐标Y轴的左轴(主轴)和右轴(副轴)。通常采用柱状图与折线图搭配使用的方式,下图展示了一年中各个月份的销量(柱状图)与目标完成率(折线图)。
在这里插入图片描述

二、适用场景

柱状图最适合对分类的数据进行比较,尤其是当数值比较接近的时候。由于人眼对于高度的感知优于其他视觉元素(例如面积、角度等),因此使用柱状图更加合适。

三、不适用场景

柱状图最核心的功能是比较,比较的核心是高度。如果人为地改变高度,那么数据间的比例关系会失常。如下图,当柱状图的起始值不为0时,则很难通过柱状图体现出数据间的差值和比例关系。
在这里插入图片描述

折线图

一、释义

折线图是把许多的点用直线连接形成的统计图表。折线图是许多领域都会使用到的基础图表,常用来观察数据在一段时间之内的变化,因此其X轴常为时间,这种折线图又称为趋势图。折线图用于分析事物随时间或有序类别而变化的趋势。如果有多组数据,则可用于分析多组数据随时间变化或有序类别的相互作用和影响。折线的方向表示正/负变化,折线的斜率则表示变化的程度。
在这里插入图片描述

二、适用场景

1.同一变量随时间或有序类别的变化。

如下图所示,该折线图可以表现某公司一年中各个月份的销量数据变化趋势。
在这里插入图片描述

2.多个变量随时间或有序类别的变化,可同时观察单变量的走势以及多变量的对比,例如以下两个场景:

■ 不同年份下各个月之间的销售额对比;

■ 不同指标变量之间是否存在影响关系。
在这里插入图片描述

三、不适用场景

1.节点过多,整体展示过于密集,对于每个点的信息很难准确地对应。
在这里插入图片描述

2.同一图中指标数据过多,多折线造成堆积,难以聚焦到重点。
在这里插入图片描述

3.变量数值大多数情况为0。
在这里插入图片描述

四、辅助用法

1.使用缩略轴辅助X轴数据点过于密集的情况。

做成可交互版本,打开图表的缩略轴,设置一个默认展示范围,让用户集中在一个特定的时间选区。
在这里插入图片描述

分析数据时可以拖动缩略轴查看不同的时间段,或是拖动缩略轴的起始/终止点,用来扩大/缩小每次的数据展示范围。
在这里插入图片描述

2.设置预警线,辅助识别“标准值”以外的数据。
在这里插入图片描述

五、注意事项

当你以时间作为X轴画折线图时,数据必须有着一致的时间间隔,否则数据会产生误导(如下图所示)。画图时需务必保证时间间隔的一致性。
在这里插入图片描述

南丁格尔玫瑰图

一、释义

南丁格尔玫瑰图又名鸡冠花图、极坐标区域图。尽管外形很像饼图,但本质上来说,南丁格尔玫瑰图更像在极坐标下绘制的柱状图或堆叠柱状图,只不过它是用半径来反映数值(而饼图是以扇形的弧度来表示数据的)。

但是由于半径和面积之间是平方的关系,视觉上南丁格尔玫瑰图会将数据的比例夸大。因此,当我们追求数据的准确性时,南丁格尔玫瑰图不一定是个好的选择。但反过来说,当我们需要对比非常相近的数值时,适当的夸大会有助于分辨数据的差异性。
在这里插入图片描述
在这里插入图片描述

二、适用场景

对比不同分类的大小,且各分类值差异不是太大。
在这里插入图片描述

三、不适用场景

1.分类过少的场景。例如,只有2类时,可直接用饼图或者环图来表示。
在这里插入图片描述
在这里插入图片描述

2.南丁格尔玫瑰图是将数值映射到半径上,而扇形的面积和半径是平方关系,这样从视觉上看,数值的差异会被扩大。因此,当数值差异较大、或者希望精确地比较数值大小时,推荐使用柱状图。
在这里插入图片描述

漏斗图

一、释义

漏斗图适用于业务流程比较规范、周期长、环节多的单流程单向分析。通过漏斗各环节业务数据的比较,能够直观地发现和说明问题所在的环节,进而做出决策。

漏斗图的起始总是100%,并在各个环节依次减少,漏斗图用梯形面积表示某个环节业务量与上一个环节之间的差异。漏斗图从上到下,有逻辑上的顺序关系,表现了随着业务流程的推进业务目标完成的情况,比如用户的转化情况、订单的处理情况、招聘的录用情况等。一般来说,所有梯形的高度应该是一致的,这有助于用户辨别数值间的差异。
在这里插入图片描述

二、适用场景

1.数据是有序的,彼此之间有逻辑上的顺序关系,阶段最好大于3个;

2.反映的流程应该是“消耗性”的流程,例如在电商领域中从用户注册到下单的转化情况,在人力领域中从收到简历到入职的转化情况等。具体如下图所示:
在这里插入图片描述

3.在实际的应用中,漏斗图非常适合于跟踪用户的转化率和保留率、跟踪点击广告/市场营销活动的进度和成功率,以及揭示线性流程中的瓶颈。在新闻领域,漏斗图也较适合社会平等、阶层分化、资源分配等的话题。

三、不适用场景

漏斗图不适合没有逻辑关系的数据。换句话说,如果数据不构成“流程”,那么就不能使用漏斗图。如下图所示,该漏斗图展示了大学一些课程的学生到课率,每门课之间的到课人数没有逻辑上的影响关系,不构成漏斗的流程。
在这里插入图片描述

作为一种统计图表,漏斗图的“长相”本质上是由数据决定的。梯形的高度、面积都是有意义的,不可以随意篡改。在传达数据时,漏斗图是通过面积表示的,对于人眼来说,面积的识别本来就不太容易,因此如果我们在制作漏斗图时,改变漏斗中每一个梯形的高度,那么识别起来就十分困难。

雷达图

一、释义

雷达图是一种显示多变量数据的图形方法。雷达图通常从同一中心点开始等角度间隔地射出三个以上的轴,每个轴代表一个定量变量,各轴上的点依次连接成线或几何图形。每个变量都具有自己的轴,彼此间的距离相等,所有轴都有相同的刻度。在将数据映射到这些轴上时,需要注意预先对数值进行标准化处理,保证各个轴之间的数值比例能够进行同级别的比较。
在这里插入图片描述
在这里插入图片描述

二、适用场景

1.雷达图可以用来在变量间进行对比,或者查看变量中有没有异常值。如下图所示,该人员在所需的各项技能上,数据分析这一项明显较为薄弱。
在这里插入图片描述

2.多幅雷达图之间或者雷达图的多层数据线之间,还可以进行总体数值情况的对比。以下面两张图为例,对甲乙两位员工的技能进行对比,可以较明显地比较出两位员工分别擅长与不擅长的事情。
在这里插入图片描述
在这里插入图片描述

3.在某一数据对象由多个特征类别构成的情况下,用雷达图来描绘这个数据对象,例如食品的营养成分(糖、维生素、矿物质、脂肪、水等)。

三、不适用场景

1.分类类型过多,导致轴过多,显示混乱;

2.不可在统一程度上标准化的情况;

3.雷达图中层叠的多边形过多的情况。
在这里插入图片描述
在这里插入图片描述

瀑布图

一、释义

瀑布图是由麦肯锡顾问公司所独创的图表类型,因为形似瀑布流水而称之为瀑布图。此种图表采用绝对值与相对值结合的方式,适用于表达数个特定数值之间的数量变化关系。
在这里插入图片描述

在瀑布图中,图表的每个柱子的起始位置为上一根柱子的顶端,若数值增加(正数),柱子则向上延伸,若数值减少(负数),柱子则向下延伸;每个柱子的顶端即为当前变化情况下的最终数量,即小计,最后的柱子即为最终数据的最终数量,即总计。通常我们将上升与下降的柱子使用不同的颜色标识,更加有利于查看。
在这里插入图片描述

二、适用场景

1.显示结果累积的过程,解释从一个数字到另一个数据的变化过程,表达数量的变化关系。如下图所示,该瀑布图展示了公司每年的人员流动情况,每年的入职与离职人数变化。
在这里插入图片描述

2.展示总分结构,通过柱图垂直高度展示数据,直观地展示指标的构成,可以帮助用户快速地找到影响总值的关键因素。相比饼图或常规的柱形图,瀑布图可以将总体值与细分维度值同时展示出来。如下图所示,该瀑布图展示了公司各项成本的支出情况,左侧各个柱子为各项子类的数值,数值越大则对应的柱子高度越高,最右侧的柱子则展示了各个子类所汇总的总数据,即公司总的支出金额。
在这里插入图片描述

三、不适用场景

如果数据没有共同的基线,那么就无法在同一标准线上衡量各个子类的详细数值差异。

词云图

一、释义

词云图又称文字云,是文本数据的视觉表示,由词汇组成类似云的彩色图形,可以用于展示大量文本数据。每个词的重要性以字体大小或颜色显示,文本出现次数越多,字体就越大,更容易被看到。

词云图可以对出现频率较高的“关键词”予以视觉上的突出展示,形成关键词云层,从而过滤掉大量冗余的文本信息,使浏览者只要一眼扫过文本就可以接收到重点。词云图的优势在于可以快速感知最突出的文字信息,或者区别权重不同的文字,而且可以展示大量文本。
在这里插入图片描述

二、适用场景

1.做用户画像,对用户进行聚类,实现精细化营销;

2.直观展示文本频率,对比文字重要程度,突出重点文字。

三、不适用场景

1.不适合展现数据太少的数据集;

2.不适合展现区分度不大的数据,即无重点关键词的情况;

3.在展示时无法区分出各个数值之间具体的差异大小。

在这里插入图片描述
在这里插入图片描述

总结

本次为大家介绍的是DataEase开源数据可视化分析平台中的多种图表样式,包括饼图、柱状图、折线图、南丁格尔玫瑰图、漏斗图、雷达图、瀑布图和词云图,这些图表样式可以帮助用户更好地展示和解析数据,满足不同场景的需求。

在未来的产品迭代中,DataEase将会提供更多的图表样式,满足用户更多的场景需求,帮助用户根据不同的数据特点,灵活准确地解析和展示数据。


http://www.kler.cn/a/10153.html

相关文章:

  • jmeter常用配置元件介绍总结之后置处理器
  • 【Vue】Vue3.0(十九)Vue 3.0 中一种组件间通信方式-自定义事件
  • Flink_DataStreamAPI_输出算子Sink
  • vue el-date-picker 日期选择器禁用失效问题
  • 【Linux】进程池实现指南:掌控并发编程的核心
  • 第8章 利用CSS制作导航菜单
  • 科技成果评价最新攻略,你确定不来看看?
  • Python实现Imagenet数据集的合并和拆分
  • 一篇文章让你搞懂TypeScript中的??和?:和?.和!.是什么意思
  • 风电的Weibull分布及光电的Beta分布组合研究(Matlab代码实现)
  • 开源后台管理系统解决方案 boot-admin 简介
  • 关于ChatGPT人工智能浅谈
  • Oracle之PL/SQL游标练习题(三)
  • 服务器部署需要注意的事项
  • 多个渠道成功销售的秘诀速递
  • 深度学习数据集—水果数据集大合集
  • C++模板初阶
  • 系统集成项目管理工程师软考第三章习题(每天更新)
  • 如何找回u盘被删除的文件
  • 00后卷王的自述,我难道真的很卷?
  • 模拟点击是啥?如何实现的呢?
  • 分享4个不可或缺的 VSCode 插件,让 Tailwind CSS开发更简单
  • Spring核心与设计思想
  • 如何使用golang库gqlgen?如何在golang中实现graphql请求?
  • 环形缓冲区
  • 14 个快速简洁的单行 JavaScript 代码解决方案