图表(Chart & Graph)你真的用对了吗?
欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~
工作中,我们常常会遇到各式各样的数据,例如网站性能,销售业绩,客户服务 、营销活动等数据。对于这些数据,有哪些行之有效的方法来形象化数据,挖掘数据关系,提升数据价值呢?
答案就是将这些数据可视化。数据可视化主要是借助图形化的方法,清晰有效的展示数据,让关系繁杂的数据变得一目了然,数据趋势变得明显,数据内在关系变得明确。
数据可视化的第一步就是选择选择合适的图表类型。
为了确保我们正确的使用了图表,可以从以下5个方面具体考虑。
1. 是否需要对比数据?
图表很适合于对比多个数据集。通过图表,可以轻易的看到数据的高低。有以下几种类型,用于创建对比数据的图表:
- 柱状图
- 条形图
- 百分比图
- 线形图
- 散点图
- 子弹图
2. 是否需要展示数据的组成部分?
这种图表类型主要用于展示数据的所有组成部分,例如各省份的数据合在一起组成全国数据。
有以下几种图表类型,展示数据的组成:
- 饼状图
- 堆叠条形图
- 堆叠柱形图
- 区域图
- 瀑布图
3. 是否需要了解数据的分布?
分布图表能够帮助我们清晰的理解正常趋势、正常范围和异常值。
有以下几种图表类型,展示数据的分布:
- 散点图
- 线形图
- 柱状图
- 条形图
4. 是否需要分析数据趋势?
可以通过这种图表了解数据集的更多趋势信息。主要有以下几种图表类型:
- 线形图
- 双轴线图
- 柱状图
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/marketing/data-visualization-choosing-chart
相关阅读:
用于 Windows8 的 Wijmo Charts 图表控件
图表(Chart & Graph)你真的用对了吗?的更多相关文章
- [转]一些实用的图表Chart制作工具
最近工作过程中需要用到前端一些JS框架,看到一篇博文就转过来备份使用,后续会再完善一些材料. Flot Flot一个纯javascript绘画库,基于jQuery开发.它能够在客户端根据任何数 ...
- salesforce 零基础学习(二十六)自定义图表chart简单介绍(使用apex和VF实现)
chart在报表中经常使用到,他可以使报表结果更加直观的展现给用户.salesforce支持VF和apex代码来更好的展示chart. chart分类:常用的图表样式有饼状图,柱状图,折线图,条形图, ...
- 03-24 Winform图表Chart
图表主要分为以下几个部分: 1.Annotations--图形注解集合, 2.ChartAreas--图表区域集合, 3.Legends--图例集合, 4.Series--图表序列集合(即图表数据对象 ...
- Sencha Touch 2.1学习图表Chart概述
Extjs.chart提供了可视化展现数据的能力,每个图表可以绑定到数据模型Ext.data.Store上, 并随着数据的变换可以自动的更新图表 一个图表对象包括图标风格.坐标(axes).序列(se ...
- FastReport.Net使用:[23]图表(Chart)控件
图表基本设置 1.拖放一个图表控件到报表设计界面中. 2.右键菜单“编辑”或者双击图表进入图表编辑器 3.将原有的簇状柱状图删除,添加圆环图 4.绑定数据源,并且指定X,Y轴数据. X轴数据为科目名称 ...
- 图表 Chart
工作中,需要实现如下的图表,查阅了不少的资料,问了不少的人,下面对下图表的实现代码做下讲解. 实现代码: chart1.Series.Clear();//清空图表中的序列,图表中有默认的序列 //ch ...
- vue.js 图表chart.js使用
在使用这个chart.js之前,自己写过一个饼图,总之碰到的问题不少,所以能用现成的插件就用,能节省不少时间 这里不打算介绍chart.js里面详细的参数意义和各个参数的用法,只作为首次使用chart ...
- 13个JavaScript图表(JS图表)图形绘制插件【转】
现在网络上又有越来越多的免费的(JS 图表)JavaScript图表图形绘制插件.我之前给一家网站做过复杂的图形,我们用的是 highchart.在那段时间,没有很多可供选择的插件.但现在不同了,很容 ...
- 13个JavaScript图表(JS图表)图形绘制插件
转自:http://blog.jobbole.com/13671/ 1. Flash 过去是最佳解决方案,但很多人多在从那迁移: 2. 现代浏览器及其更强大的计算能力,使其在转化绘制实时数据方面的能力 ...
随机推荐
- 第五章 HQL实用技术
第五章 HQL实用技术5.1 使用HQL查询语句(面向对象查询语句) 5.1.1 编写HQL语句 5.1.1.1 from子句 例:fr ...
- 【Spark2.0源码学习】-1.概述
Spark作为当前主流的分布式计算框架,其高效性.通用性.易用性使其得到广泛的关注,本系列博客不会介绍其原理.安装与使用相关知识,将会从源码角度进行深度分析,理解其背后的设计精髓,以便后续 ...
- Linux学习(一)
Linux系统 1.组成部分 1.1内核负责的功能 1.1.1:系统内存管理 内存管理即管理物理内存和虚拟内存 (通过硬盘实现的,即swap space),长时间为被访问的内存块会被放到虚拟内存中,当 ...
- unity 看到Sphere内部,通过Sphere播放全景视频时候遇到的问题
Unity创建一Sphere默认是看不到球体内部的,所以需要用 Cull Front 修改剔除的方向,这就会带来一个新的问题,所播放的视频是像镜子一样翻转着的,所以要改变它的UV坐标使其翻转过来 f ...
- python数据处理——numpy_2
上一次的学习了numpy的一些基础操作,今天接着学习numpy的高级索引.轴对换数值转置以及作图. #花式索引 import numpy as np ''' t = np.empty((8,4)) # ...
- 蓝桥杯-趣味算式-java
/* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...
- 写具有良好风格的ABAP代码
编程风格是一个经久不衰的话题,大家所公认的事实是:一个良好的编程风格会带来很多的好处.而对于“良好”的标准,则众说纷纭,莫衷一是.编程风格在ABAP程序中当然也有着重要的意义,因为很少看到专门针对AB ...
- mysql主从复制-异步复制
一.创建复制账号: 在Master的数据库中建立一个备份帐户:每个Slave使用标准的MySQL用户名和密码连接master. 进行复制操作的用户会授予REPLICATION SL ...
- Java常见快捷键
1.Alt+/ 补充代码 2.shift+d 删除选中代码同时删除空格 3.shift+alt+R 改变所有与选中部分相同的字符串 4.ctrl+S 保存代码 5.ctrl+shift+F 格式化代码 ...
- VueJs开发笔记—IDE选择和WebStorm性能优化、框架特性和数据调用、路由选项以及使用
一.IDE的选择: VsCode和WebStorm都是不错的选择,两者运行调试都非常的方便都可以使用快捷键运行和停止,就打开项目的速度和对电脑配置的要求来说,vscode要比webstorm要出色很多 ...