希望通过本篇文章让大家对BI图表绘制过程、图表编辑器设计思路有所了解。
1.数据可视化原理
数据可视化的作用在于视物致知，即从看见物体到获取知识。——《数据可视化·第2版》
1.1可视化原理
提到可视化，可能大家脑海中立马会浮现与之相关的人体器官——眼睛。没错，眼睛作为视觉感官是我们获取信息的重要途径之一，超过50%的人脑功能用于视觉感知。可以将可视化看成一个把不可见（难以发现）的事物形成可见的图形，增强用户感知、认知的过程。下图是一个用户在客观世界中对数据可视化分析和事件处理的简化过程，其中不仅包含了个体对可视化分析的主要流程，还涉及到群组共享协作的部分。
图1 用户在客观世界可视分析和事件处理的简化过程
在《BI系统概述（上）--BI价值及核心模块》提到了“数据—信息—知识—价值”就是来自于“DIKW模型”即“数据—信息—知识—智慧”。这个过程也可以看作是数据处理的流程，从“知识”向“智慧”的转变，是及其困难的一步，那么数据可视化就可作为“理解”的一环，提高对事物的感知能力，从而进行高效的知识理解。
图2 数据可视化与“DIKW模型”
1.2可视化流程核心要素
在数据可视化过程具有多种实现流程，但往往都离不开数据表示与转换、可视化呈现、用户交互三个核心要素。下面介绍数据可视化的三个核心要素，大到整个BI系统，小到可视化编辑器的设计，均涉及到以下过程。
数据表示与转换数据可视化的基础是数据表示和变换，在BI中体现的就是能够将多源异构数据抽取到系统内，实现用户自助取数、处理等。
数据可视化呈现将数据直观、正确地展现给用户是可视化效果表达的关键，这一过程实际上是将数据进行视觉编码的过程。如同一数据集能够产生制作出不同的图表类型，需要选择合适的图表类型表达。
用户交互能够进行人机交互，让用户进行探索式分析。如用户在查看全国门店销售额时，可以点击地图的行政区划进行下钻查看各个省份的数据。
这三个核心要素也对应了在《BI系统概述（上）--BI价值及核心模块》中的描述五大BI核心能力，即“数据连接、数据处理、可视化分析、多维交互分析、数据应用分发”。
对可视化分析流程的了解能够更好地帮助我们设计出贴切用户使用场景、提高数据分析效率的BI产品。
2.BI中的图表可视化
数据可视化是一个广义概念，包含科学可视化、信息可视化、可视化分析学等方向，商业智能（BI）中的可视化展示是可视化分析学中的一个研究领域。数据可视化原理作为指导思想，可以帮助我们更好地从可视化编辑器（如仪表板编辑器）、可视化结果（如报告呈现的效果）等多个方面来设计BI系统。图表可视化是BI系统中重要的一部分，下面以图表为例讲述如何将数据绘制成图表、绘制图表不同方法。
2.1一个流程
在BI系统中，用户制作图表时往往要先将数据字段拖到维度、度量上，选择合适的图表类型，再去调整图表配置项使其表达更加清晰、美观。这个实际上涉及到了“字段选择—数据映射—可视化调整”的流程。其中涉及到的数据映射，是指将数据集中的字段映射到维度、度量上，并绘制出图表的过程。
图3 图表绘制过程
2.2两种流派
在图表绘制的通常会被分为两种流派：图表类型学、图形语法，搞清原理也就会发现为什么市场上BI产品在图表制作的功能不同。图形语法相较于类型学难以理解，这里重点介绍图形语法。
图表类型学
将图表按照自身特征，如折线图、柱状图、饼图等进行穷举分类列出所有的图表，每种图表的都有自己的一套配置来修改其样式、数据等内容。
图形语法
这是由Wilkinson提出的，一套用来描述所有统计图表底层特性的语法规则。他认为图形是对象的集合。如果这些对象之间的联系遵循一定的语法，那么它们的行为将一致且灵活，从而避免每绘制一个图表都要构造一套配置的繁琐。简单来说，通过这套语法能够绘制出所有的统计图表且不受图表类型的限制。
就像英语语法一样可以由“主—谓—宾”构成一个完整句子，只要掌握一套语法就能够说出很多种正确语句。那么用一套图形语法是如何能创建所有图表呢？它有一套图表绘制的标准流程“规范—组装—显示”。
图4 用图形语法绘制饼图的流程，截图自《The Grammar of Graphics》
在“规范”阶段，图形语法定义了如下6个概念，即数据、变换、度量、坐标、元素、参考。
图5 “规范”定义，截图自《The Grammar of Graphics》
- 数据：从数据集创建变量的数据操作。
- 转换：数据变量间的转换。
- 度量：度量转换。
- 坐标：坐标系统，比如笛卡尔坐标系、极坐标系等。
- 元素：图形及其美学属性，比如点、线、面图形，红、黄、绿颜色等。
- 参考：用于图形与对象间的对齐，比如图例等。
数据和转换定义在数据空间；度量和坐标定义了底层的图形几何和数据的空间位置；图形定义了不同的图形对象。“组装”是指将描述图表的元素、布局和视觉相关的对象以一种合理的方式装配起来，用来构造出视窗的过程。“显示”是将图表通过美学属性加上显示系统表达成为视觉可见。
案例
下面来举一些案例方便对概念的理解，通过两款BI工具、两款开源图表组件来介绍两种流派不同之处。
Power BI与Tableau
在使用Power BI过程中，往往是先选择图表类型，然后拖拽字段到相应的轴、值上，然后在画布中绘制出来图表。
图6 Power BI图表编辑工作区
而Tableau则不需要先选择图表类型，只要将数据拖到行、列上，通过标记（Marks）配置数据列的图形、颜色、尺寸、标签等生成一张图表。
图7 Tableau图表编辑工作区
Power BI和Tableau的设计理念不同，采取的分别是图表类型学、图形语法两个流派。
ECharts与AntV
对于BI的前端开发同学来说，应该比较熟悉ECharts、AntV，他们都是目前比较流行的开源图表框架。从ECharts的API手册可以看出，它定义了series type罗列出了所有的图表类型，如series-line就是折线图。
图8 Echarts图表类型及配置项
AntV中则没有穷举出所有的图表类型，是通过chart.data、chart.coodinate、chart.interval等函数，控制数据、坐标类型、视觉通道来绘制出图表。
图9 AntV折线图配置项
除了上述图表的图形语法，设计图表时还应该遵循一些交互语法，后面也会大致讲解关于图表交互方面内容。
3.图表编辑器设计
当我们了解图表的绘制的方法和过程，那么图表编辑器的设计相对来说就容易些了。那作为一款工具如何让用户通过可视化方式，轻松制作出图表呢？接下来大致讲一讲以图形语法为依据的图表编辑器设计思路。各类BI产品的图表编辑器风格不同，基本上分为两类：
- 报告编辑、图表制作在同一编辑器内，这种方式能够缩短用户操作路径，提高内容编排效率。
- 报告编辑、图表制作不在同一编辑器内，这种方式会让图表可视化分析更加专注。
可以根据用户群体、使用场景作为一个参考方式，选择不同页面结构。这里采用的是第一种方式，即报告、图表制作在同一编辑器下，主要是缩短用户操作路径，提高制作效率。根据前文中的仪表板编辑器框架（界面设计原理不做赘述，感兴趣可以读前几篇文章），将其填充内容后呈现出的原型如下图。
图 10 图表编辑器原型（简化版）
这里忽略报告层面的内容制作，先看图表层面的制作层面。与图表制作相关的区域如下图所示，分为工具栏、数据集展示与选择区、数据映射与样式配置区、图表绘制区四个部分。
图 11 图表编辑器结构分区
工具栏：作为编辑器的保存、预览、返回以及撤销还原操作区域。
数据集展示与选择区：用户从最右侧选取数据集（大多数情况下是经过数据处理后的数据），然后在该区域会展示数据表内的所有数据字段及其类型，并且自动区分为维度、度量。
数据映射和样式配置区：该区域分为数据、样式两种属性配置，“数据”配置主要是负责将数据映射到图表的维度、度量上。样式配置主要是用来配置图表要展示的文字、图形等。
图表绘制区：该区域一般称为画布，用来展示绘制出来的图表及其样式。当报告、图表编辑在同一页面时，画布也会增加一些页面内容的编辑属性，如上方除了图表组件外，多了一些容器布局组件。
4.总结
本文从数据可视化基础知识开始，讲述数据可视化原理及其必要性。又从人类的在客观世界获取信息的行为映射到用户在计算机系统内进行可视化分析行为的角度分析，便于我们设计出符合人机交互的数据可视化流程、易于使用的BI工具。同时在以图表绘制为例，介绍了绘制图表的流程和不同流派，为设计图表编辑器提供了设计参考。
在了解原理、设计理念后，结合实际需求场景就更容易设计出一款高效的系统。
