资讯专栏INFORMATION COLUMN

图表(Chart & Graph)你真的用对了吗?

Donald / 796人阅读

摘要:线形图线形图展示了数据随时间变换的趋势,可用于显示许多不同类别的数据。设计线形图的最佳做法使用实线绘制。饼状图饼状图用于显示整体的组成比例。设计饼状图的最佳做法组成部分不宜过多,以免各部分之间不好区分。这正是引入甘特图的原因。

工作中,我们常常会遇到各式各样的数据,例如网站性能,销售业绩,客户服务 、营销活动等数据。对于这些数据,有哪些行之有效的方法来形象化数据,挖掘数据关系,提升数据价值呢?

答案就是将这些数据可视化。数据可视化主要是借助图形化的方法,清晰有效的展示数据,让关系繁杂的数据变得一目了然,数据趋势变得明显,数据内在关系变得明确。

数据可视化的第一步就是选择选择合适的图表类型。

为了确保我们正确的使用了图表,可以从以下5个方面具体考虑。

一、是否需要对比数据?

图表很适合于对比多个数据集。通过图表,可以轻易的看到数据的高低。有以下几种类型,用于创建对比数据的图表:

柱状图

条形图

百分比图

线形图

散点图

子弹图

二、 是否需要展示数据的组成部分?

这种图表类型主要用于展示数据的所有组成部分,例如各省份的数据合在一起组成全国数据。

有以下几种图表类型,展示数据的组成:

饼状图

堆叠条形图

堆叠柱形图

面积图

瀑布图

三、是否需要了解数据的分布?

分布图表能够帮助我们清晰的理解正常趋势、正常范围和异常值。

有以下几种图表类型,展示数据的分布:

散点图

线形图

柱状图

条形图

四、 是否需要分析数据趋势?

可以通过这种图表了解数据集的更多趋势信息。主要有以下几种图表类型:

线形图

双轴线图

柱状图

五、是否需要了解更多数据集之间的关系?

关系图形很适合于显示一个变量与单个或多个不同变量之间的关系,以便查看变量是否对其它变量产生了影响。

关系图形有以下几种类型:

散点图

气泡图

线形图
下面是13 种用于分析和呈现数据的不同类型的图表。为了更好地了解每个图表以及如何使用它们,文中分别对每一种图表进行了概述。

1)柱状图

柱状图用于显示不同数据之间的对比,也可以显示随时间变化的数据对比。

设计柱状图的最佳做法:

图表中使用对比色,高亮特殊有意义的数据。

使用水平标签,提高数据可读性。

y轴起始为0,可以显示各柱状的数值。

2)条形图

条形图基本上是水平的柱形图,可以用于避免在超过10个项目进行比较时产生杂乱。这种图表类型也可用于显示负数。

设计条形图的最佳做法:

图表中使用对比色,高亮特殊有意义的数据。

使用垂直标签,提高数据可读性。

X轴起始为0,可以显示各柱状的数值。

3)线形图

线形图展示了数据随时间变换的趋势,可用于显示许多不同类别的数据。需要绘制连续的数据集时,很适合使用这种图表类型。

设计线形图的最佳做法:

使用实线绘制。

数据线不超过4条,以免产生混乱。

使用正确的高度,使线条占据y轴高度的2/3左右。

4)双轴图

双轴图可用于显示双Y轴的数据。这种图形由三个数据集组成,两个Y轴数据,一个X轴数据。主要用于显示两个Y轴随X轴变化时的相关性。

设计双轴图的最佳做法:

使用左侧的y轴作为主要变量 ,因为大脑自然倾向于先看向左。

使用不同的图形样式来说明两个数据集,如上所示。

为两个数据集使用对比色。

5)面积图

面积图基本上是一条线图,但X轴和线之间的空间用颜色或图案填充,用于显示局部和整体的关系,可以帮助分析总体趋势和单个数据趋势。

设计面积图的最佳做法:

使用透明的颜色 ,使Y轴标签不被遮蔽。

最多显示4个数据,以免产生混淆。

图表顶部的数据是高度可变的,方便阅读。

6)堆叠条形图

这种图表用于比较多个不同的数据集,并显示每个被比较的数据集的组成。

设计堆叠条形图的最佳做法:

最适用于说明部分和整体的关系。

使用对比色,会使对比更加清晰。

图表尺寸足够大,以便各数据组之间有间隙。

7)饼状图

饼状图用于显示整体的组成比例。饼状图的每一部分都是百分比数字,所有部分的总和等于100%。

设计饼状图的最佳做法:

组成部分不宜过多,以免各部分之间不好区分。

确保各部分百分比加起来达到100%。

百分比与扇形面积成正比。

8)散点图

散点图用于显示两个不同变量之间的关系,或者用于揭示数据的分布趋势。当数据点较多并且需要显示数据集的相似性时,可以使用散点图。这种图形在寻找异常值或了解数据的分布时,会非常有用。

设计散点图的最佳做法:

尽可能的多包含数据。

启动y轴为0,以便准确地表示数据。

只使用两条趋势线,以便点数据更好理解。

9)气泡图

气泡图类似于散点图,用于显示分布或关系。气泡或圆的大小代表着数据大小。

设计气泡图的最佳做法:

气泡的面积代表数据大小。

确保标签清晰可见。

仅使用圆形。

10)瀑布图

瀑布图用于显示初始值如何受到中间值(正或负)的影响,并产生最终值,主要用于展示数据的组成。

设计瀑布图的最佳做法:

使用对比色来突出显示数据集中的差异。

使用温暖的颜色代表增加,冷色代表减少。

11)漏斗图

漏斗图显示了一系列步骤以及每一步的完成率,主要用于跟踪每一个页面或步骤的转换率。

设计漏斗图的最佳做法:

根据数据集的大小,准确的显示每个部分的大小。

漏斗图中使用渐变色调中的对比色。

12)子弹图

子弹图用于和标尺做对比,以便显示目标的进展程度。

设计子弹图的最佳做法:

使用对比色来突出显示数据的进度。

使用不同色调的颜色来衡量进度。

13)甘特图

甘特图擅长说明项目的开始和结束日期要素。 设定期限对项目的成功至关重要。 时刻了解需要完成的事情以及什么时候完成,是实现项目成功的关键。 这正是引入甘特图的原因。

设计甘特图的最佳做法:

迅速的改变甘特图中的条状颜色,以便告诉阅读者参数的关键变化。

可以在甘特图中结合地图和其它图表类型。

看完以上常用图表的介绍,你真的用对了图表吗?

原文链接:https://blog.hubspot.com/mark...

了解更多Chart信息:http://www.gcpowertools.com.c...

转载请注明出自:葡萄城控件

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/56325.html

相关文章

  • 基于HTML5 Canvas的3D动态Chart图表

    摘要:接下来我们要创建的是外部的透明节点,这个节点的构造方式基本上与内部节点相同,就是多了一点透明的样式设置要先设置为,再设置透明度。还有不懂的可以留言,或者直接去我们官网上查看手册,有更多你想不到的效果能快速实现哦 发现现在工业SCADA上或者电信网管方面用图表的特别多,虽然绝大部分人在图表制作方面用的是echarts,他确实好用,但是有些时候我们不能调用别的插件,这个时候就得自己写这些美...

    spademan 评论0 收藏0
  • [译] iOS 开源图形库 Core Plot 使教程

    摘要:首先,用下面这段替换掉同样你也需要为每个分片提供图例的数据。接着,把下面那么多行代码添加到里下面是这段代码逻辑的拆解首先,实例化一个,实际上就是一个柱状图,并将它关联到。 原文链接 : Core Plot Tutorial: Getting Started原文作者 : Attila Hegedüs译文出自 : 掘金翻译计划译者 : llp0574(web前端领域)校对者: yifili...

    pubdreamcc 评论0 收藏0
  • Python大数据可视化控制模块altair的应详细说明

      Altair被称作是统计分析大数据可视化库,因为他能通过筛选、数据变换、数据交换、图型复合型等。这篇文章跟大家聊一聊Python之中的altair大数据可视化控制模块,同时通过读取该控制模块来制作某些比较常见的数据图表,有兴趣的话可以认识一下。  接下来小编来跟大伙儿聊一聊Python之中的altair大数据可视化控制模块,同时通过读取该控制模块来制作某些比较常见的数据图表,依靠Altair,...

    89542767 评论0 收藏0
  • 18个基于 HTML5 Canvas 开发的图表

    摘要:是一个基于的图表库。类似于的财经图表工具,是一个基于的图表项目。基于特性开发的饼图工具,拥有漂亮的动画效果。是一个简单的库,可用于创建基于元素的图表。基于开发的可视化数据图表。是另外一个结合特性开发的跨浏览器图表库,兼容主流浏览器。 如今,HTML5 可谓如众星捧月一般,受到许多业内巨头的青睐。很多Web开发者也尝试着用 HTML 5 来制作各种各样的富 Web 应用。HTML 5 规...

    lemanli 评论0 收藏0
  • 又快又好!巧ChartJS打造的实折线图

    摘要:又快又好巧用打造你的实用折线图最终效果本示例利用官方示例改造而成,生成带图示的折线图,标出各折线的名称,可以筛选想要显示的折线。了解了上折线图的数据结构,大家也就明白了显示一条折线,即是添加隐藏一条折线,即是将其去除。 又快又好!巧用ChartJS打造你的实用折线图 最终效果 showImg(https://segmentfault.com/img/bVq52r); 本示例利用官方示例...

    channg 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<