axChart可视化图表知识分享之数据基础

axChart是用来支持Axure RP设计可视化图表原型的元件，为了方便各同学更好地使用axChart，所以计划分享本系列的可视化图表知识，由于本人经验也有限，希望尽可能对支持axChart的同学有所帮助。

我认为数据可视化设计的核心是“我有什么数据，需要用什么图表做什么？”。而不是先关注图表长什么样子、做更炫酷地图表炫技等等。设计可视化一般的步骤可以归纳为：

（1）准备原始数据，一般是经过清洗、统计后的数据。

（2）明确分析目的，针对不同的用户，确认需要分析数据背后表达的主题。

（3）选择合适的图表，选择正确类型的图表，将数据进行可视化呈现。

因此，正确地认识原始数据是最重要的基础之一。尤其是我们每天都和各种各样的数据打交道，可能往往忽略了去研究和认识数据以及它们之间的细微差异，甚至导致错误地应用数据。

1 数据的类型

数据也就是变量值，最常见的2大类是：分类数据和数值数据。

1.1 分类数据

变量值一般是定性的，表现为互不相容的列表或属性。它又分为有序数据、无序数据。

1.1.1 有序数据

指各数据之间有逻辑顺序或存在着程度上差别，又称为等级变量。如：

用户购买流程（浏览、点击、下单、支付）；

学历（小学、初中、高中、大学）；

收入水平（低收入、中收入、高收入）。

1.1.2 无序数据

只各数据之间无程度和顺序的差别。如：

性别（男、女）；

职业（工人、农民、商人、老师、军人）；

开发语言（PHP、C、Java、Python）。

1.2 数值数据

数据一般是可以数数或者测量的，它也可以分类离散型和连续型的数值。

1.2.1 离散型数据

通俗地说是数据只能用自然数或整数单位计算，只能取到的是某些特定的值，一般用计数的方法取得，又叫计数型。如：

每天衣服的销量（10、30、12、34）；

每月某园区企业数量（100、500、1000）。

1.2.2 连续型数据

通俗地说在一定区间可以任意取值，一般是连续不断的，只能用测量或者计量的方法取得，又叫计量型。如：

某班级男生身高（可能在160-190之间都有）

旅客等车时长（可能从1分钟-1小时之间的都有）

数值数据变化范围可能极大，因此往往在实际使用时会进行一定的映射转化，变为一种更容易观察的数据范围，这种变化一般有对数变化、指数变化等。不知您能想到什么样的数据场景？

2 数据结构

如何把各种类型的数据组织并记录下来，需要有约定成俗地数据结构。回想一下我们使用Excel制作图表，所使用的数据一般就记录在Excel表格中，这也是最常见的记录数据的结构，即行数据。在数据可视化中，我们往往记录数据的结构不仅仅这一种。

2.1 单一数据

一般就一个变量值的数据，即一个变量对应一个变量值。

如：点击率：10%、完成进度：20%等。

2.2 行数据

即以行的形式记录变量值，每一行就是一个变量值。往往和列配合，一列为一个变量，也就是系列，一般至少2列（列表一般称为变量名）。这也是我们使用得最多的数据结构，基本可以完成大部分的数据分析需求。

2.2.1  两个变量

一般包含1个分类数据和1个数值数据，多用来表示分类对比、趋势变化、流程变化等。如：

示例：某店铺在1月24日各商品的销量记录。

其中，商品数据是分类数据（无序分类数据），销量数据是数值数据（离散型数值），数据反映了各种商品的销量比较。

示例：某电商产品页转化数据。

其中，用户行为是分类数据（有序分类数据），用户数数据是数值数据（离散型数值），数据反映了用户购买流程的转化率变化情况。

也可能2个都是数值数据，多用来表示分布，如：

示例：某班级男生的身高、体重分布数据。

其中，身高是数值数据（连续型），体重也是数值数据（连续型），数据可以返回体重/身高的占比，配合肥胖指数可以直观看到该班级男生健康分布情况。

2.2.2 三个变量

一般1个分类数据和2个数值数据，2个数值变量可做对比。如：

示例：某电商商品购买行为，男生与女生的转化情况的数据记录。

其中，用户行为为分类数据（有序），男性用户数和女性用户数均为数值数据（离散型），可以对比反应2种性别用户的转化率情况。

也可能3个都是数值数据，多用来在分布的基础上，再进行比较。如：

示例：不同身高体重的运动员跳远成绩的数据记录。

其中，身高/体重/跳远距离都是数值数据（且还都是连续型），我们可以用身高/体重做点分布，用跳远距离映射点的大小，从而观察到跳远与身高/体重有什么规律。

2.2.3 四个及以上变量

一般1个分类数据和3个数值数据，多用来表示数值变量之间的对比。如：

示例：接着上一个示例，我们再加入性别，继续记录。

其中，性别是分类数据（无序分类），身高/体重/跳远距离都是数值数据（且还都是连续型），我们可以用身高/体重做点分布，用跳远距离映射点的大小，用2种不同颜色区分男女，从而观察到跳远与性别/身高/体重有什么规律。

总之，行数据可以满足绝大多数的数据记录需求，认真理解各个变量的分类，对数据分析的目的能够更加清晰，应用的图表也就更容易正确。

3 行结构数据

对于某些特定的数据，一般形成了固定化、规范化的数据记录结构，借助行数据进行记录，但变量名一般是固定的、不可修改的。这种数据一般也指定了所使用的图表类型。

3.1 股票日K数据

3.2 四分位数据

3.3 区间数据

根据实际情况，我们也可以规范自定义的行结构数据，主要是定义好变量名，获取数据，实现我们自己的业务需求。

4 树形数据

除行数据外，树形结构的数据也很常用，顾名思义就像树枝一样，不断分出枝干，经常用在表示上下层级的可视化中。树形结构的数据一般使用json数组格式保存在变量或json文件中。Json数组格式一般形式是以[{},{}]包裹键值对数据，其中设置一个键用于设置子级数据。如：

[
	{
		"name": "电视",
		"value": 382,
		"children": [
			{
				"name": "三星",
				"value": 212
			},
			{
				"name": "创维",
				"value": 39,
				"children": [
					{
						"name": "X系列",
						"value": 19
					},
					{
						"name": "Y系列",
						"value": 19
					}
				]
			},
			{
				"name": "夏普",
				"value": 131,
				"children": [
					{
						"name": "L1系列",
						"value": 100
					},
					{
						"name": "L2系列",
						"value": 31
					}
				]
			}
		]
	},
	{
		"name": "冰箱",
		"value": 235,
		"children": [
			{

			},
			{
				"name": "",
				"value": 000,
				"children": []
			},
			{

			}
		]
	}
]

其中，像name: xxx称为键值对，可以根据自己业务需求设置更多数据的键值对；children键（也可以你自己规定枝干的键）表示枝干数据、下一级数据，如果没有下一级可以不记录该健。

我们也可以用行数据来表示树形数据，大家可以想一想怎样做？

5 GeoJSON数据

指一种特殊的、规范固定的json数据，用于表示地图的边界数据。

因为只有一个根节点，所以最外面不需要[]括起来。

GeoJSON特征合集：

{ "type": "FeatureCollection",
  "features": [
    { "type": "Feature",
      "geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
      "properties": {"prop0": "value0"}
      },
    { "type": "Feature",
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
          ]
        },
      "properties": {
        "prop0": "value0",
        "prop1": 0.0
        }
      },
    { "type": "Feature",
       "geometry": {
         "type": "Polygon",
         "coordinates": [
           [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
             [100.0, 1.0], [100.0, 0.0] ]
           ]
       },
       "properties": {
         "prop0": "value0",
         "prop1": {"this": "that"}
         }
       }
     ]
   }

我们不详细讲各个键值对的含义，一般自己写GeoJSON也几乎不可能，在应用到时能知道这个数据结构即可。详细了解可以参看：https://www.oschina.net/translate/geojson-spec

6 关系数据

指一种特殊的、一定规范化的json树形数据，表达各个数据点之间的关系，一般会通过多个json数组来一起完成。比如说graph图需要data数据和link关系数据：

（1）Data数据反映各个数据点

[{ name: '1', x: 10, y: 10, value: 10 }, { name: '2', x: 100, y: 100, value: 20, symbolSize: 20, itemStyle: { color: 'red' } }]

（2）link关系节点数据

[{ source: 'n1', target: 'n2' }, { source: 'n2', target: 'n3' }]

合理规划json数组，可支持更多复杂业务的可视化需求，所以多了解json数组数据结构，对理解复杂图表的数据需求大有好处，建议能仔细揣摩或编写一些简单的json数据尝试一下。

以上是总结的主要数据记录结构，在实际使用时，会有更多类型的数据结构要求，我们需要培养认识数据的习惯，深刻理解数据结构是更好应用可视化图表的基础。

pmlab普通用户

收藏 海报分享