huangjinnan

huangjinnan 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

huangjinnan 发布了文章 · 2016-03-23

JavaScript/HTML5图表开发工具JavaScript Charts v3.19.6发布【附下载】

JavaScript Charts是拥有良好兼容性的JavaScript、HTML5图表开发工具,能满足大部分的开发需求,包括序列图表(列型图,条形图,线型图,面积图,步骤折线图,平滑折线图,蜡烛图,ohlc图),饼图/环形图,雷达图/极区图以及xy图/散点图/气泡图。我们的图表是现代标准化的兼容图表集,提供无与伦比功能与性能。

新增:

  • AmRectangularChart图表新增了minMarginLeft、minMarginRight、minMarginTop和minMarginBottom属性。如果图表的左侧有一个值轴并且autoMargins设置为true(默认),那么这边的边距将不低于minMarginLeft属性设置的值,另一边也一样。

  • smootheLine图形现在支持渐变。

  • GaugeAxis新增了颜色属性,用来指定轴的标签颜色。

  • ValueAxis新增了axisFrequency属性,只能用于Radar图表。如果你的轴数量很多,该属性将只能帮助您显示每一个X轴。

修复:

  • 修复了当ChartCursor的enabled属性设置为false时不能正确处理的问题。

  • 修复了amcharts-balloon-div-[id](id为图形或轴id)类名称没有被设置的问题。

  • 修复了某些情况下轴导向不可见的问题。

  • 修复了在某些安装设置中快速滚动滚动条时出现JavaScript错误的问题。

  • 修复了tapToActivate在某些设备上不能正确处理的问题。

  • 修复了某些情况下ChartScrollbar在接近图表div容器边缘缩放时,一些数据点会超出数据图区域的问题。

立即下载JavaScript Charts v3.19.6最新版本

查看原文

赞 0 收藏 4 评论 0

huangjinnan 发布了文章 · 2016-03-18

【数据可视化】艺术——图表的选择(下)

本篇文章将介绍一些日常办公中常常用到的图表处理的技巧并且能够推荐给读者一些非常优秀的制图工具,比如FusionChartsHighCharts、Visio、Swiff Chart、ColorWheel、Tableau、Ucinet、Excel、PPT、Mindmanager等等。

下面是几个关于图形运用非常不错的测试,贴出来与大家分享:

6、热力图的制作经常用吧,左右两个有什么区别?

数据可视化图表技巧

点评:地理信息是可视化的重要表现形式,在数据呈现中不断增加地理信息元素是非常重要的,从事分析的人要有采用地理信息呈现的思维方式,不断提炼,日积月累就会有好的模板了!当然上面的左图依然满足简约就是美的原则,同时我们知道地图的四色原理,颜色的基本规则也是不用超过4种,不行采用渐变颜色;现在活动地图还是比较容易的,大家可以从Google Map和一些Go2map等软件截取恰当的地理信息,然后用心抠图就可以用来,当然这是比较笨但也是有效的方法,高级的可以采用PS等技术抠图啦!当然,如何让地图与数据大小联动呈现,需要编写宏或者VBA的一点语句支持!

7、又遇3D和2D的问题,上面的3D图表相对于下面的四个2D表分列节省了空间,但是所传达的信息呢?

数据可视化图表技巧

点评:我们说了尽量不用用三维图,但是大家是不是会把信息按某个维度作出分散的二维图呢,一定注意要去掉后面图的纵坐标的Lable,否则是四张图,要贴成一张图!

8、常用Excel的人恐怕对下面的图表深有体会吧,横坐标的标签名称太长怎么办?旋转呗?

数据可视化图表技巧

点评:当然左侧的图的Label更好看,但我们会作出这样的Lable吗?最笨也是最没有办法的办法就是把Label变成图片贴上去盖住原来的;当然,Excel是可以实现的,只要在标签单元格用Alt+Enter就可以在一个单元格输入多行标签了;如果不想改变原来的文本格式,就让单元格引用其它位置就可以了,所以在图表中要有能力和用心去修改图表中的每一个元素!

9、鲜艳的背景颜色会对数据展现产生什么影响?

数据可视化图表技巧

点评:我们应该选下面的,如果选上面的打印都费墨,坚持简单是最好的;当然如果有艺术细胞的话,背景也是生动的,但是更多是考虑展示结果,如果最终要打印你就要考虑考虑啦!

10、哪张表里面能够一目了然的发现问题所在?

数据可视化图表技巧

点评:我们应该选择上面的,因为网格线会让我们看不清晰,最好不要用网格线;当然颜色也是非常重要的,记住条件格式的应用,别一点一点的把数值变字体颜色,要用规则变;当然细节也是非常重要的,比如字体、数值、对齐等格式问题,这些都有助于领导欣赏!

至此,关于这个图形测试的十道问题都已经贴出。怎么样,大家平时遇到过这么问题么?

转自:沈浩老师的微博

点击【数据可视化专题】了解更多图表相关资讯

查看原文

赞 2 收藏 3 评论 0

huangjinnan 发布了文章 · 2016-03-15

MindFusion.Diagramming for WPF v3.4【附下载】

MindFusion.Diagramming for WPF 是创建任何类型示意图包括流程图、方案图、类层次图、树形图和算法等在内的理想的图形工具。

最新版本下载地址:WpfDiagTrial v3.4

新增自由形式节点

FreeFormNode收集来自用户的鼠标或触摸输入的所有的点,并将它们显示为节点的轮廓。要让用户交互式绘制形式自由的节点,设置Diagram.Behavior 为DrawFreeForms或LinkFreeforms。使用FreeFormNode的Points属性来编程式获取或设置轮廓的点。如果设置了Closed属性,该节点被画成一个内部填充的封闭形状,或以其它方式将节点绘制成多元的线。如果用户所绘制的第一和最后点之间的距离比Diagram.AutoClose距离短,节点的Closed属性被自动设置为真。 AutoCloseDistance默认值是Double.MaxValue,所以自由形式的节点始终为闭合形。
wpf-diagram-free-shapes

形状控制点

形状公式现在可以通过将控制点与Shape对象联系起来进行参数设置。每个控制点传递给形状脚本作为其命名变量。除了名称,您还可以通过ShapeControlPoint构造函数以及是否将其值视为百分比或固定偏移来为每个参数指定默认坐标、最小和最大坐标。

调整表列和行

如果AllowResizeColumns或AllowResizeRows属性启用,TableNode的行和列现在就可以交互地进行调整。要调整其大小,移动鼠标指针到列的右侧或行的底部边框线,直到它显示调整光标,开始拖动。控件会引发TableColumnResizing和TableRowResizing事件,让您验证新的大小或防止调整一些元素。

条码节点

BarcodeNode类显示EAN、UPC或QR条码作为节点的内容。就地编辑操作让用户为一维码或文本字符串QR码插入新的数字代码。条形码格式通过Format属性指定,编码数字或文本通过Content进行设置,并且1D条码/2D模块的颜色通过BarColor进行设置。
barcode_diagram_nodes

支持Visio模具

流程图现在可以显示来自Visio 2003 XML模板格式(.vsx)的模具文件的形状。要加载一个模板文件,使用VisioStencil类的一个实例即可。形状通过VisioNode对象显示在流程图中。

改进了形状设计器

  • ShapeDesigner控制支持撤消。调用其Undo或Redo方法来分别撤消或重做做对设计形状的更改。

  • ShapeDesigner新增了ZoomFactor属性。支持通过鼠标滚动实现交互式放大/缩小。

  • SelectedElement属性公开在ShapeDesigner画布当前被选中的图形元素。您可以将其绑定到其行程和画笔属性来创建编辑元素属性的替代用户界面。

改进了锚模式

  • XUnit和YUnit属性允许指定AnchorPoint的坐标作为从节点的左上角,而不是以百分比的固定偏移,使得当节点的大小被调整时其位置不改变。

  • Shape类的AnchorPattern属性允许您将锚点与形状定义联系起来。如果一个ShapeNode实例不包含其自己的AnchorPattern,那么它将从节点的Shape中获得。

  • RowAnchorPattern属性允许您为所有的表行指定默认AnchorPattern。

点击查看MindFusion.Diagramming for WPF更新原文

查看原文

赞 0 收藏 1 评论 0

huangjinnan 发布了文章 · 2016-03-14

【数据可视化】艺术——图表的选择(上)

本篇文章将介绍一些日常办公中常常用到的图表处理的技巧并且能够推荐给读者一些非常优秀的制图工具,比如FusionChartsHighCharts、Visio、Swiff Chart、ColorWheel、Tableau、Ucinet、Excel、PPT、Mindmanager等等。

下面是几个关于图形运用非常不错的测试,贴出来与大家分享:

1、下面两个图形中,哪个更容易表现Mid-Cap和Small-Cap的市场份额大小,饼图还是条形图?

数据可视化图表

点评:一般来讲表述市场份额是100%,所以大家习惯用饼图表述,研究表明人们更习惯从条形图来比较大小,更醒目的看到差异!

2、立体的图表是否比平面的图形更容易解读?

数据可视化图表

点评:从简约的角度,显然二维图更适合人们观察,当然大部分图表需要打印在平面;三维并不适合观察,所以只要可能尽量用二维图,毕竟是我们视觉空间的最低维度!当然上面的图是时间轴应该采用折线图表述趋势!

3、交叉表恐怕还是简洁的好!

数据可视化图表

点评:简约就是美,显然下面的更清晰明快!我们习惯采用中国式图表,一般都是封闭边框线的,但是我们如果经常看英文的论文,你会发现很多论文都是下面的图表!在文章中,大家最好让表格内字体小于正文1个字号,保持非封闭的表格会有不一样的视角效果,似乎更显专业水准!当然中西文化的差异也可能存在不同观点!

4、横坐标是时间序列,为了展现数据的趋势,应该选线图还是柱形图?(这个问题比较普遍)

数据可视化图表

点评:选择下面的最重要的是X轴是时间,时间序列,所以折线图更能够感知的趋势、模式的变化!当然如果你表现的是不同品牌的市场份额,条形图或直方图也是可以的!

5、在不同的场合应该选择将真实数据比例展示出来还是将差异放大?

数据可视化图表

点评:这两个图的最大差异是Y轴坐标,显然B图是真实的表现,并不存在“显著”差异,而A图是用放大镜在寻找差异,那么采用B是真实的;如果你想强调差异性,也应该在提供了B图之后,采用引线标明A图是来自B图的放大效果!

转自:沈浩老师的微博

还没看够?点击【数据可视化专题】了解更多图表相关资讯

查看原文

赞 1 收藏 3 评论 0

huangjinnan 发布了文章 · 2016-03-11

【数据可视化】基础知识贴③:错综复杂散点图

散点图

热门图表工具下载:

散点图,如果学过我们前面创意图表系列的话,这种图表应该非常熟悉了。

散点图,在图表界有万表之王的称号。

这可不是我随便封的。

美国权威心理学专刊《Journal of the History of the Behavioral Sciences》(行为科学史杂志)在2005年一篇论文中如此评价散点图:

“Most versatile, polymorphic, and generally useful invention in the history of statistical graphics.”这是信息图表史上功能最多,形式多样,应用范围极为广阔的一个伟大发明!

散点图能获此评价,绝对不是吹出来的。

正如它的名字一样,散点图,可以一堆纷乱如麻,看似无迹可寻的数据显示出内在的关系逻辑来。

散点图已经不仅仅是一个图表了,它已经演化为一个强大的分析工具,可以这么说,散点图,就是为大数据而生的!

下面,还是让我们一起回顾一下散点图的前世今生吧。

认识散点图

散点图,是绘制在X轴和Y轴坐标系中,可以同时表述两个变量的一组数据点。这些大量的数据点组合在一起,形成了一些形状,揭示了数据背后的相关信息。
散点图

在这个散点图中,就揭示了不同系列的产品中,销售量与产品收入之间的关系模式。

散点图溯源

说起散点图的来由,如果你读过我们启视录系列前面几篇的话,一定会想到一个名字:William Playfair。这是信息图史上一个神一般的存在,他将折线图、饼图还有条状图带到了我们这个世界上。

可是,这一次你猜错了。

散点图不是普莱费尔发明的。

事实上,散点图的出现如同它的名字一样,散乱不堪,无法理出一个有序的线索出来。

其实,对于散点数据的的视觉化应用,由来已久。好几百年以来,人们一直将这些点放置在地图,或者笛卡尔坐标系中。后来人们逐渐意识到,当这些数据以不同参数,放置在直角坐标系中,很多不为人知的故事会偷偷地浮现出来。于是,散点图逐渐开始流传开来。

所以只能这么说,散点图,是广大数据民工在长期的生产实践中,通过不断的探索和研究,最终发明出来的。

而William Playfair爵士之所以会与这个伟大的发明擦肩而过,主要是因为,他发明的图表都是基于时间序列的,而散点图却不再拘泥于时间这个基本的变量。

散点图从一开始的默默无闻,到最后轰动科学界,直到最后加冕图表之王,其实也就是百十年的事。但是通过散点图带来的很多伟大的发现,则彻底改变了我们的世界观,推动了科学的发展。

1905年,丹麦科学家Danish astronomer Ejnar Hertzprung,在将一些恒星的亮度等级(绝对亮度}和他们的颜色(按光谱从蓝白到红色排列)进行对比的时候,他注意到这其中似乎有着某些相关性。但是他一直没有找到其中的奥秘。

直到1913年,美国天文学家Henry Norris Russell独立发表论文,阐述了这个改变我们认知宇宙的新发现。
散点图

没错,正是通过散点图,他将恒星的按光谱和亮度两个参数进行排列分析后发现,从高亮度低光谱(左上)到低亮度高光谱(右下)形成了一条明显的趋势线,而在左上角,还有一团比较密集的数据。

Henry意识到,这条趋势线,或许正揭示了恒星从蓝白色的新星到红色的老星的一个演变的过程,也就是说,他发现了恒星一生的秘密。而左上角的那些数据,则是由一些暮年的红巨星所集合而成。

这就是后来我们所熟知的恒星的一生:原恒星—-主序星—-红巨星—-白矮星—-黑矮星

这是重新绘制的由2200颗恒星数据所组成的Henry Norris Russell散点图,我们的太阳目前大致位于光序1(竖轴)色谱1.0左右的位置上,主序星阶段,正值壮年!

关于更多的散点图带来的伟大发现,大家可以到这里围观:http://www.datavis.ca/papers/friendly-scat.pdf我就不再多说了。

散点图的应用

显而易见,散点图是一种应用非常广泛的图表,而且具有其他图表所没有的独特优势。

不像其他图表的单一特性,散点图不光可以显示趋势,还能显示集群的形状,以及在数据云团中各数据点的关系——这在大数据应用中是极为重要的一点。

无论是探寻肺活量与自由潜水的深度的关系,还是研究地震强度与持续时间之间的关联,或者对比不同部门利润与支出的数据,我们都可以用散点图来进行不同方位解读。

下面就是散点图所经常表现出来的几种趋势:
正相关
散点图
负相关
散点图
无关
散点图
线性相关
散点图
指数相关
散点图
离群值
散点图

这里要注意的是,并不是所有的相关关系都是简单的因果关系,要注意其他变量的存在以及对数据的影响。

散点图的基本原则

对于散点图,我们现在已经有了大致的一些了解,现在让我们来看看散点图设计中的一些基本原则吧

Y轴从0开始
散点图

这个应该是我们反复强调的了,Y轴从非零开始的话会截断数据,造成误读。

包含多重变量
散点图

通过改变数据点的大小和颜色,来表示数据值的区别。

添加趋势线
散点图

趋势线可以用来显示数据变化的趋势。

不要添加两条以上的趋势线
散点图

太多趋势线,反而搅乱视线。

来源:InfoVision

了解更多数据可视化相关资讯

查看原文

赞 0 收藏 0 评论 0

huangjinnan 发布了文章 · 2016-03-10

【数据可视化】基础知识贴②:似曾相识面积图

面积图

热门图表工具下载:

面积图也是一种随着时间变化的图表,而且很稳重。

无论你是要梳理出每个月各部门的净收益,或者想看看从上世纪50年代以来各个音乐流派的普及流行程度,相信我,在那些与时间相关的图表中,没有什么比面积图都可以更满足你的需求了。

下面就让我们来好好认识一下这个似曾相识的面积图吧!
面积图

这就是前面提到的20世纪各流派音乐流行交互面积图。

了解面积图

面积图描绘了时间序列的关系,不过与线型图不同,它还可以很直观地表示面积大小的不同。

信息被标示在两个轴之间,通过线段将数据点连缀起来,到这里为止,似乎和折线图没有什么不同。

但是一旦我们将这条折线和轴之间的区域涂上颜色的话,意义就不一样了。

一般面积图用与对两种或者两种以上的类别进行比较。

面积图溯源

威廉.普莱菲尔——信息图表的鼻祖!

就是他,发明了前面我们介绍过的饼图、条状图以及,没错,还有今天要说的面积图!
面积图

1876年,商业与政治图表 史上第一张面积图

面积图的使用

面积图是用来表述多类别整体运行趋势的完美之选,所以不要试图用它来展示单一的值。

我们也常常用堆积面积图来展示多类别中部分与整体的关系,或者同系列累计的值。

面积图有三种不同的形态,根据数据以及背景的不同,均有其最佳的展示环境。

标准面积图
面积图

标准面积图一般用于展示或者比较随时间序列而变化的的定量。不过在很多实际案例中,由于不同的系列太多,面积图的说服力往往不及折线图。不过如果要追求一定的视觉效果的话,相互遮挡的数据点这也是面积图设计饿色之一。

堆积面积图
面积图

堆积面积图,最佳的使用环境是用于展示部分与整体的关系。较之于饼图,我们可以很明晰地看出,不同的类别在不同时间段上对于整体累计数据所做出的贡献。

100%累计面积图
面积图

这种100%累计面积图,和饼图有点类似。主要是用来展示不同类别所占据的面积大小,这里具体的累计数倒没人去关注了。

面积图设计小贴士

面积图因为高大上的设计,越来越受到图表设计者的欢迎。不过面积图要是设计得不好,读者将很难从你的图表中解读出正确的信息来。下面这几条设计面积图的小贴士,会让你的面积图的b格大为提升。

易读
面积图

在堆积面积图中,将波动较大的类别放在最上面,而将波动较小的类别放在最下面。

使用透明色
面积图

在标准面积图中,应对数据类别的图层顺序进行排序,并使用透明色,以便看到被遮挡的数据。

不要超过4个类别
面积图

太多数据类别会导致图表杂乱,不易分辨。

y轴从0开始
面积图

Y轴从非零开始会截断数据,不能反映数据的真实大小和变化趋势

不要用面积图表示离散数据
面积图

面积图中两个点之间的连线表示中间值,只有连续数据才有中间值。

来源:InfoVision

了解更多数据可视化相关知识贴

查看原文

赞 0 收藏 0 评论 1

huangjinnan 发布了文章 · 2016-03-09

【数据可视化】基础知识贴①:激情四溢热力图

热力图

热门图表工具下载:

什么是热力图?

所谓热力图(heat map),又叫等值线地图(choropleth map),是超越了传统地图意义的一种新型的地图。

首先,它是根植于传统地图的,一张热力图上的边界,一般是按照传统地图上的市、省、国家的行政区域边界来划分。

其次,热力图以不同的颜色来对各个地区的不同情况予以显示。不同的颜色可以表示不同的人口密度、天气情况、人均收入、社会观点等等基于地理位置的不同数据。

下面这张图,就展示了2008年美国大选的投票结果。红色是麦凯恩,蓝色代表奥巴马,用不同的颜色深度表示他们在不同的州赢得的支持率。结果,当然大家都是知道滴。

热力图

热力图溯源

前面说过,热力图是根植于传统地图的一种新型的图表,所以热力图的历史并不长。

很多因素限制了热力图的萌芽,其中就包括现代地图学。

直到19世纪,航海大发现催生了现代地图学的成熟和发展,采用投影法的地图越加精细,全球的地理数据积累也日益丰富,热力图才自然而然地被发明出来了。

法国的一位数学家、工程师、经济学家和政治家夏尔.潘迪(Charles Dupin 1784-1873),可能是世界上第一位使用热力图的人。

这张发表于1826年的黑白地图上,以从白到黑不同深度,标示了法国文盲的分布情况。

热力图

热力图的使用

热力图是完美的传统地图与现代数据结合的产物,最大的特点,就是它的数据范围有边界,而这个边界,是由传统地图或者说人为划定的。

就像前面美国大选图,我们可以看到以各个州、市中双方赢得的选票比例。

相信诸位现在心里会有一个疑问了。

我知道,且看下面这张图,请注意其中的一些细节。

热力图

这是关于英伦三岛的一张人口密度分布图。

请注意,它不是直接按照人口密度分布画出的等值线图,而是以行政区域来划分数据边界的。

请注意图中的一些细节:

这张图上主要显示的是英国各个郡的人口密度分布情况。但是有的郡区域内,会有很小部分颜色很深,说明人口密度比周边地区要高出很多。

因为像都柏林、爱尔兰这些地区,整体人烟稀少,人口密度很低,但是在中心城市却聚集大量人口,采用全郡平均值的话,会引起很大的误会。

所以,这张图上,将一些重点城市的人口密度也标示出来。以免造成误读。

当然,我们别忘了,热力图还有一个名字叫做等值线图。这里人为划分的行政区域已经取消,数据的边界由数据本身决定。就像下面这张全球轮班航次图。

热力图

热力图最佳设计指南

前面我们已经简单介绍了热力图的一些基本情况,下面该讲讲基本的设计原则了。

使用细的地图轮廓线
热力图

粗的轮廓线,会使得地图上的各个图块变得分散。

选择合适的配色
热力图

热力图中,同一系列的颜色应该选用同一色系的颜色,或者是相近颜色的过渡色。

少用填充图案
热力图

可以用不同的图案标示不同的变量。但是不宜超过3种,否则就喧宾夺主了。

选择合适的数据区间
热力图

选择3-5个数据范围,尽量使数据在这几个范围内分布均匀,超出这个范围的数据用+/-号表示。

来源:InfoVision

查看原文

赞 0 收藏 1 评论 2

huangjinnan 发布了文章 · 2016-03-04

【数据可视化】背后的故事——图表设计

图表设计

热门图表工具下载:

一、图表的目的和价值

图表设计是数据可视化的一个分支领域,是对数据进行二次加工,用统计图表的方式进行呈现。数据是事实或观察的结果,是对客观事物的逻辑归纳,通常一个具体的数字比一个模糊的说法更加具有可信度和说服力。但单纯的数字本身并不能提供足够的影响力,假设一个淘宝女装卖家3月份的成交金额是50万,这个数据本身并不能说明什么问题,但是当你加上4月份60万,5月份的成交金额70万等多个月的数据,通过折线图的方式呈现,可以判断出成交金额是上升趋势,再结合去年同时段的销售曲线进行对比和其他维度信息的补充(图1-1),可能推断出是因为换季所带来得销量增长,店铺可以考虑加大夏季款的上新。所以我们说图表是解读数字的一种强有力的手段。

图表设计

图1-1 店铺成交金额

相对于单纯的文本来说,大脑处理图形化的内容会更加省力。每一个汉字都可以看作是一个图形符号,在阅读文本时,大脑首先对其一一进行解码,将这些形状和头脑中储存的记忆进行匹配,从而理解它的含义。一段文本中,汉字的解码过程是线性依次进行的,而图表是作为一个完整的图形同步进行解码,所以比文本要快的多(图1-2)。根据相关研究,一个高质量的信息图理解度比纯文字高30倍。

图表设计

图1-2 女装金额占比

可用性专家Jakob Nielsen的一项研究表明,一般人阅读网页平均只会读到20%左右的文字。人们的注意力越来越碎片化,大量的文字让人很容易产生阅读疲劳,图表能够比较好的抓住人们的注意力。在微博、微信等渠道营销传播上,将数据用图表的形式展现比纯文字会获得更高的点击、收藏等数值,也更容易被人记住,从而制造话题,营造口碑营销。试想下面的文字和图表(图1-3),你更愿意去分享哪个?

7大洲中最高的山峰:

  • 南极洲,文森峰,16050呎 4892米;

  • 南美洲,阿空加瓜山,22841呎 6962米;

  • 非洲,乞力马扎罗山,19340呎 5892米;

  • 亚洲,珠穆朗玛峰,29035 8848米;

  • 欧洲,厄尔布鲁士山18510呎 5642米;

  • 北美洲,麦金利山20320呎 6194米;

  • 大洋洲,卡斯滕土山16024呎 4884米。

图表设计

图1-3 7大洲中最高的山峰

二、数据产品中的图表设计原则和方法

大数据是近些年非常热门的一个词,马云曾说过阿里巴巴未来十年的战略目标是建立DT数据时代中国商业发展的基础设施。生意参谋就是在这个大环境下孵化的一款数据产品,旨在为中小卖家提供数据化运营的思路,通过监控店铺日常经营和活动情况,帮助卖家对店铺运营进行调整。有幸参与这个产品从建立到成长的全过程。数据产品最离不开的其实就是图表设计,既要保证图表本身数据清晰准确、直观易懂,又要在找准用户关注的核心内容进行适当的突显,帮助用户通过数据进行决策。生意参谋这种数据产品就是将数据化运营的思路融入设计中,引导用户通过数据得出有效的结论,辅助店铺经营。除此以外,具有一定设计感的、打动人心的图表设计也可以创造更多的商业传播价值,提升品牌形象。

1.如何精准表达图表中的数据

数据产品中用户主要是利用数据来进行分析和决策,所以十分强调数据的精准性。那么如何通过图表来准确的传达数据呢,首先我们要明确每种图表的定义和使用范围。其次要使用正确的方式将图表绘制出来,不能在表达上有所偏差。

(1)选择合适的图表

明确每种图表的定义和使用场景有助于我们对数据进行加工和二次传达。柱形图、饼图、折线图、表格是四种最常使用的图表,但往往容易被混乱使用,让我们一起来仔细研究这四种基础图表的定义和类型,找寻其中的差异。

A.柱形图

又称条形统计图,条状图。是一种以长方形的长度为变量的统计图表。常用于比较两个或以上的值。柱形图常见的有以下4种:

垂直柱形图,最常见的柱形图; 水平柱形图,一般按照数值的大小排列; 簇状柱形图,用于多组数据比较,强调一组数据内部的比较; 堆叠柱形图,用于多组数据比较,和簇状柱形图不同的是,堆叠柱形图更加强调一组数据中部分与整体的关系。

B.饼图

以圆心角的度数来表达数值大小的统计图表。常用于表现数据的占比关系,饼图中各项的总和为100%,最适合表达单一主题,即部分占整体的比例。饼图的类型比较少,主要有以下三种:
基础型饼图,包括常规型饼图和环形饼图; 半圆型饼图,在某些场景中,半圆会比较方便排版,利于对齐。而且标注信息也方便呈现; 复合型饼图,当饼图的扇形数量过多时,可以将最后的若干项合并为其他类,在二级图表中表现这些项目的构成。

  1. 折线图

是通过线条的波动(上升或下降)来显示连续数据随时间或有序类别变化的图表。常用于强调数据的变化或者趋势。折线图主要可分为单条、多条、堆叠:

单条折线图,只显示一组数据波动的情况; 多条折线图,同时显示多组数据波动的情况; 多条堆叠折线图,显示多组数据波动的情况,同时表现多组数据之合的变化。多个数据叠加时(堆叠图),推荐使用面积图,不推荐使用折线图形式。

D. 表格

由若干的行与列所构成的一种有序的组织形式,表格可以高效率的展现大量数据。表格的类型多种多样,除了单纯的文本和数字外,我们还可以往里面添加图片、操作等多种类型。表格是几种图表中最多样和特殊的类型。

基础表格,静态纯文本类的基本表格; 内容复合表格,由其他内容类型结合的较复杂的表格形式; 操作复合表格,用户的行为对表格样式或特征产生影响。

(2)正确的绘制图表

了解了四种的图表后,通过选择适合的图表类型我们完成了精准表达数据的第一步,那么第二步就是将图表正确的绘制出来。错误的坐标轴选择,或者关键元素的缺失,会导致图表的准确性下降,表意不明。

A.柱形图

数据产品的图表强调数据的准确性,通常零基线是不可或缺的,为了强调起始位置,颜色上要比其他的网格线深。考虑到用户不同显示设备的差异,建议至少取94的灰度值才可以保证清楚的辨识,颜色太浅在一些设备上无法显示清楚。

图表设计

图2-1 柱形图中的零基线

柱子的宽度为D,则柱子之间的间距建议在1/2D与D之间,簇形柱形图两个柱子之间的间距建议为1/8D。这样既可以保证柱子之间不会过于分散-失去数据之间的关联性,又不会过密-保障数据之间的独立性和舒适阅读。

图表设计

图2-2 柱形之间的间距

B. 饼图

饼图一般我们采用的绘制方法是,按照用户的阅读习惯,从上到下,以时钟的12点为起点,顺时针排布扇形(图2-3)。

图表设计

图2-3 饼图的绘制方法

但这种绘制方法存在一点不足,在用户视线的焦点——饼图的上半部,不重要的最小数据项和最大数据项一起占据了视觉焦点。为了解决这个问题,我们在这个基础上做了一些优化,同样以时钟的12点为起点,先逆时针绘制最大切片,再回到12点,顺时针绘制出第二大切片,其余切片依次绘制(图2-4)。这种方法使得用户视线的焦点——饼图的上半部放置的都是最重要的数据。但这种绘制方法也有一点小小的不足:在有多个饼图时,每个饼图的起始位置都不相同(图中问号所标出的位置)。大家可以根据不同的使用场景选择不同的饼图绘制方法。

图表设计

图2-4 饼图的绘制方法

C. 折线图

折线图常用于表示数据的变化和趋势,坐标轴的不同对折线的变化幅度有很大的影响。坐标轴的数值设定的太高,则折线变化过于平缓,掩盖现实无法清晰的表现折线的变化。反之,如果坐标轴设定的太低,又会让折线变化过于陡峭,过于夸张夸大了折线变化的趋势。

图表设计

图2-5 折线的绘制方法

2. 如何提升图表的易读性

数据产品中往往充满了大量的数字和图表,用户容易淹没在数据的海洋中,除了精准表达这些数据以外,提升图表的易读性也是数据产品中图表设计的一个显著特点。图表中文字部分通常为具体的数值和数值的含义解释。通过对这些文本进行合理排版,可以使用户快速理解图表,从而达到高效阅读的目的。

A. 柱形图

坐标轴的标签使用水平排列,不建议垂直排列或者倾斜排列,字数多的时候不易阅读。柱形图中部分标签的使用方法也适用于折线图。

图表设计

图2-6 柱形图的标签排列

水平柱形图一般会简化坐标,数据值跟随在柱形图后方,增加数据墨水比率。

图表设计

图2-7 水平柱形图

当坐标轴标签过长时,垂直柱形图无法将所有坐标轴标签全部显示,有以下几种解决方案:

可采用水平柱形图增加标签的显示空间。

图表设计

图2-8 水平柱形图

显示主刻度,其余数据省略,通过交互动作来显示。比如显示2010年/2011年,而年里面的具体的月份隐藏,hover时出现。如图2-9中的横坐标。 高位数的数值可以转化单位。比如500,000显示为50万,更符合中文的阅读习惯,且节省空间。如图2-9中的纵坐标。

图表设计

图2-9 柱形图的刻度值

B.饼图

①. 在饼图内与百分比数值一起显示:

信息连贯视觉集中,理论上最合适的位置。但受限于饼图本身的形状和大小,文字过多时容易溢出。

图表设计

图2-10 饼图的标签

②. 使用引导线,在饼图周围合适位置显示:

引导线可以将切片与标签有效的关联,可以显示更多的字符数。引导线较多时,可以进行变形规整。在数据产品中通常是活动数据,数值大小经常在变化,标签和引导线的位置不固定,排版上难以掌控。

图表设计

图2-11 使用引导线的饼图

③. 数值和标签分离显示:

标签字符数不受局限,但标签与饼图分离,需要对照阅读。

图表设计

图2-12 数值和标签分离显示

④. 配合交互动作切换标签在环形圆饼空白处显示:

空白部分不受切片大小影响,标签和数值可一起显示。适用于强调当个切片数值。标签与切片对应关系需要带交互操作说明,数据展示较隐藏。

图表设计

图2-13 带交互的标签

C. 表格

文字信息纵向列对比能够很好的形成视觉引导线,符合格式塔心理学中相近原则。不同的数据类型有不同的对齐方式。一般来说文本采用左对齐,数据右对齐,方便通过数字位数的长短对比数据的量级和大小。

图表设计

图2-14 表格的对齐

表示状态的文字,通常只有固定几种类型(如已完成、待支付等),则可以采用居中对齐。关系紧密的字段可以靠近成组排列,加强数据之间的关联性,同时减少了数据组的量,也可以方便用户快速定位信息。

图表设计

图2-15 表格的对齐

来源:阿里巴巴(中国站)用户体验设计部博客

查看原文

赞 1 收藏 3 评论 1

huangjinnan 发布了文章 · 2016-03-02

【总结】数据可视化:柱状图、折线图、饼图等六种基本图表的特点及适用场合

“数据可视化”可以帮助用户理解数据,一直是热门方向。

图表是”数据可视化”的常用手段,其中又以基本图表—-柱状图、折线图、饼图等等—-最为常用。

热门图表工具下载:

图表类型

用户非常熟悉这些图表,但如果被问道,它们的特点是什么,最适用怎样的场合(数据集)?恐怕答得上来的人就不多了。

本文是电子书《Data Visualization with JavaScript》第一章的笔记,总结了六种基本图表的特点和适用场合,非常好地回答了上面的问题。

进入正题之前,先纠正一种误解。有人觉得,基本图表太简单、太原始、不高端、不大气,因此追求更复杂的图表。但是,越简单的图表,越容易理解,而快速易懂地理解数据,不正是”数据可视化”的最重要目的和最高追求吗?

所以,请不要小看这些基本图表。因为用户最熟悉它们,所以只要是适用的场合,就应该考虑优先使用。

一、柱状图(Bar Chart)

柱状图是最常见的图表,也最容易解读。

图表类型

它的适用场合是二维数据集(每个数据点包括两个值x和y),但只有一个维度需要比较。年销售额就是二维数据,”年份”和”销售额”就是它的两个维度,但只需要比较”销售额”这一个维度。

柱状图利用柱子的高度,反映数据的差异。肉眼对高度差异很敏感,辨识效果非常好。柱状图的局限在于只适用中小规模的数据集。

通常来说,柱状图的X轴是时间维,用户习惯性认为存在时间趋势。如果遇到X轴不是时间维的情况,建议用颜色区分每根柱子,改变用户对时间趋势的关注。

图表类型

上图是英国足球联赛某个年度各队的赢球场数,X轴代表不同球队,Y轴代表赢球数。

二、折线图(Line Chart)数据

折线图适合二维的大数据集,尤其是那些趋势比单个数据点更重要的场合。

图表类型

它还适合多个二维数据集的比较。

图表类型

上图是两个二维数据集(大气中二氧化碳浓度,地表平均气温)的折线图。

三、饼图(Pie Chart)

饼图是一种应该避免使用的图表,因为肉眼对面积大小不敏感。

图表类型
图表类型

上图中,上面饼图的五个色块的面积排序,不容易看出来。换成柱状图,就容易多了。

一般情况下,总是应该用柱状图替代饼图。但是有一个例外,就是反映某个部分占整体的比重,比如贫穷人口占总人口的百分比。

图表类型

四、散点图(Scatter Chart)

散点图适用于三维数据集,但其中只有两维需要比较。

图表类型

上图是各国的医疗支出与预期寿命,三个维度分别为国家、医疗支出、预期寿命,只有后两个维度需要比较。

为了识别第三维,可以为每个点加上文字标示,或者不同颜色。

图表类型

五、气泡图(Bubble Chart)

气泡图是散点图的一种变体,通过每个点的面积大小,反映第三维。

图表类型

上图是卡特里娜飓风的路径,三个维度分别为经度、纬度、强度。点的面积越大,就代表强度越大。因为用户不善于判断面积大小,所以气泡图只适用不要求精确辨识第三维的场合。

如果为气泡加上不同颜色(或文字标签),气泡图就可用来表达四维数据。比如下图就是通过颜色,表示每个点的风力等级。

图表类型

六、雷达图(Radar Chart)

雷达图适用于多维数据(四维以上),且每个维度必须可以排序(国籍就不可以排序)。但是,它有一个局限,就是数据点最多6个,否则无法辨别,因此适用场合有限。

下面是迈阿密热火队首发的五名篮球选手的数据。除了姓名,每个数据点有五个维度,分别是得分、篮板、助攻、抢断、封盖。

图表类型

画成雷达图,就是下面这样。

图表类型

面积越大的数据点,就表示越重要。很显然,勒布朗·詹姆斯(红色区域)是热火队最重要的选手。

需要注意的时候,用户不熟悉雷达图,解读有困难。使用时尽量加上说明,减轻解读负担。

图表类型

转自:https://www.evget.com/article/2016/3/2/23633.html

查看原文

赞 2 收藏 3 评论 1

huangjinnan 发布了文章 · 2016-02-29

Stimulsoft报表控件 v2016.1版本全线更新【附下载】

Reports.Web中新增组件

在新发布的2016.1版本中HTML5报表设计器支持Table组件。该表由行和列交叉形成的单元格组成。这些单元格可以包有各种数据,如文本、词组、参照数据列、富文本、图像,复选框等。

Stimulsoft Reports 2016.1

在处理Table组件时,你可以设置无限多个用于显示数据标题和页脚的行。

Reports.Web中新增数据源

在HTML5和HTML5 for MVC中我们添加了基于一个数据源创建另一个数据源的功能。假设,需要对数据进行分组、排序、过滤或对这些数据进行计算,然后再将数据传递到一张报表中。在这种情况下,报表的数据源就是基于另一个数据源创建的。

Stimulsoft Reports 2016.1

Reports.JS中新增报表打印

从2016.1版本开始,你可以在HTML5浏览器和HTML5设计器中预览选项卡上的打印命令之间进行选择。打印选项如下:

打印为PDF。
打印预览。
无需预览直接打印。

Stimulsoft Reports 2016.1

HTML5 Designer中新增交叉选项卡

自2016.1版本开始,HTML5报表设计器可以编辑和创建带有交叉表的报表。此前,它只能预览和输出带有交叉表的报表。交叉表是一个很特别的组件,用于处理、分组、和汇总来自数据源的数据。这一处理结果将显示在一张表格中。交叉表编辑器包括三个制表符,其中包含已选择的数据源以及指定的数据列和定义的交叉表样式。

Stimulsoft Reports 2016.1

Reports.Web中新增Events选项卡

在HTML5设计器的属性面板中,我们新添加了Events选项卡,其中包含一系列报表事件和事件相关的组件列表。例如,如果你想要在文本渲染结束后立即进行一些操作,那么您应该提交一个文本组件的End Render事件。

Stimulsoft Reports 2016.1

Break if True

当使用多级条件时,您可以中断条件的处理过程。默认情况下,所有的条件按顺序进行处理,直到最后一级条件执行完毕。在2016.1版本中我们添加了“如果为真那么Break”的选项。如果启用该选项并且任何级别的条件都已执行(返回真值),则发生中断,后面的条件将不再进行处理。如果该选项被禁用,则各条件按顺序进行处理。该选项已被添加到Reports.Web、Reports.Net、Reports.Wpf和Reports.JS中。

Stimulsoft Reports 2016.1

新增了Infographics 菜单

在工具栏和Insert选项卡中的某些设计器中,您将会发现一个新增的类别 - Infographics。此类别包括所有的图形组件,如地图、仪表以及所有类型的图表。您只需双击鼠标就可将任何所需的数据可视化组件添加到报表中。

Stimulsoft Reports 2016.1

更新了报表设计器样式

2016.1新版本带来了全新的报表设计器样式。我们增加了新的功能以及对其外外观做了更新。其中最主要的特点就是,创建的样式基于样式设置显示在缩略图中。现在您可以对样式进行编辑,并且可以立即看到结果。

Stimulsoft Reports 2016.1

更新了Add Style菜单

在2016.1中,我们重新设计了添加样式菜单。样式设计人员可以为报表组件、图表、仪表、交叉表以及报表控件创建样式。考虑到组件的应用,每种样式都有自己的设置。

Stimulsoft Reports 2016.1

更新了Show Styles菜单

在2016.1版本中,我们改进了Show Styles菜单。有了此菜单,你可以找到当前样式,查看可用的样式,并选择一个合适的。调用下拉列表中的Show Styles菜单可以通过点击缩略图来完成。

Stimulsoft Reports 2016.1

PDF中新增AES-128加密

在2015.3及更早的版本中,当输出报表时使用RC4 40、128-bit和AES 256位加密算法。从2016.1版本开始,还支持AES-128加密算法。这种加密算法由Acrobat 7及更高版本支持。该选项已添加到Reports.Web、Reports.Net和Reports.Wpf中。

新增GS1-128条码

在2016.1版本中,我们新增了对GS1-128条码的支持。该条码用于物流单位的贸易项数据编码,可以包含各种信息。例如,产品代码、失效日期、大小、数量、批号等。该条码已被添加到报表工具Reports.Web、Reports.Net和Reports.Wpf中。

Stimulsoft Reports 2016.1

Reports.JS中新增预览

在新版本中,我们已经实现了在JS设计器中全功能的报表预览。此前,预览仅在HTML中可用。现在预览将与报表查看器相同,并且具有其所有功能。可用的打印选项有。导出为PDF、HTML、HTML5、Microsoft Word以及Excel。此外,预览选项卡上还有搜索栏、书签和参数。它还包含导航、缩放控制以及页面视图模式。

Stimulsoft Reports 2016.1

Reports.JS中新增PostgreSQL适配器

Stimulsoft Reports.JS从发布的第一个版本开始就对MS SQL、MySQL和Firebird数据源进行处理。在2016.1中,我们增加了对PostgreSQL适配器的支持。现在,您可以创建PostgreSQL数据源以及设计基于此数据源报表。

Stimulsoft Reports 2016.1

Reports.JS中List Type的变量

当创建报表时,变量在各种情况下都有使用。通常情况下,变量用于存储一个用于检索数据的值,包括数据过滤。在2016.1版本中,变量可以存储一系列值。只需在创建变量时确定其类型并选择一个列表选项。

Stimulsoft Reports 2016.1

HTML5 Designer中新增网格

我们新增了在HTML5和JS设计器的页面中显示网格的功能。网格被用于组件间的精确相对对齐。例如,您可以使用Snap to Grid命令来将报表的组件绑定到网格节点。网格的绘制可通过点和线来完成。网格的启用的外观设置可在Options窗口中完成。

Stimulsoft Reports 2016.1

HTML5 Designer中新增复制页面功能

在2016.1中,设计器中添加了复制页面的命令。有了此命令您可以创建具有所有组件和参数的页面完全相同的副本。可通过调用页面标题中的上下文菜单选择复制命令。此选项已被添加到Reports.Web和Reports.JS中。

Stimulsoft Reports 2016.1

HTML5 Designer中新增Drag and Drop Wizard样式

在此版本中,我们在HTML5和JS设计器中增加了定义报告样式来创建其结构的功能。当您在报表模板中拖入数据源时Data window将被调用,那么您需要选择数据列并定义其它选项。现在,在这个窗口中,你会发现一个Styles选项卡。该选项卡提供预定义的样式和自定义样式集。选择一种样式,它会被立即应用并创建一个报表。该选项已被添加到Reports.Web和Reports.JS中。

Stimulsoft Reports 2016.1

Reports.Java中新增支持JSON数据源URL

此前,在Reports.Java中创建JSON数据源时,您只可以指定JSON文件的路径。现在,当在创建JSON数据源时,您可以指定一个URL作为JSON文件的路径。

Stimulsoft Reports 2016.1

Reports.Java中Parameters for Swing Viewer中的文本编辑

当在报表中使用参数时,参数和输入值的字段的名称被放在一个单独的面板上。在这种情况下,如果必须将文本输入到参数字段,然后,有时会出现一些输入困难的情况,因为只显示部分文本。

因此在2016.1版本中,我们为Swing viewer添加了新的文本编辑器选项。

点击下面的链接了解详细更新及下载

查看原文

赞 1 收藏 2 评论 0

认证与成就

  • 获得 19 次点赞
  • 获得 2 枚徽章 获得 0 枚金徽章, 获得 1 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2015-07-14
个人主页被 760 人浏览