pmlab 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日各商品的销量记录。
| 商品 | 销量 |
|---|---|
| 羽绒服 | 21 |
| 夹克 | 12 |
| 棉衣 | 102 |
| 毛裤 | 26 |
其中，商品数据是分类数据（无序分类数据），销量数据是数值数据（离散型数值），数据反映了各种商品的销量比较。
示例：某电商产品页转化数据。
| 用户行为 | 用户数 |
|---|---|
| 浏览 | 2100 |
| 下单 | 500 |
| 支付 | 430 |
| 评价 | 20 |
其中，用户行为是分类数据（有序分类数据），用户数数据是数值数据（离散型数值），数据反映了用户购买流程的转化率变化情况。
也可能2个都是数值数据，多用来表示分布，如：
示例：某班级男生的身高、体重分布数据。
| 身高（cm） | 体重（kg） |
|---|---|
| 160 | 66 |
| 161 | 50 |
| 165 | 55 |
| 162 | 58 |
其中，身高是数值数据（连续型），体重也是数值数据（连续型），数据可以返回体重/身高的占比，配合肥胖指数可以直观看到该班级男生健康分布情况。
2.2.2 三个变量
一般1个分类数据和2个数值数据，2个数值变量可做对比。如：
示例：某电商商品购买行为，男生与女生的转化情况的数据记录。
| 用户行为 | 男性用户数 | 女性用户数 |
|---|---|---|
| 浏览 | 2100 | 2000 |
| 下单 | 500 | 1300 |
| 支付 | 430 | 1250 |
| 评价 | 20 | 12 |
其中，用户行为为分类数据（有序），男性用户数和女性用户数均为数值数据（离散型），可以对比反应2种性别用户的转化率情况。
也可能3个都是数值数据，多用来在分布的基础上，再进行比较。如：
示例：不同身高体重的运动员跳远成绩的数据记录。
| 身高（cm） | 体重（kg） | 跳远（cm） |
|---|---|---|
| 160 | 66 | 302 |
| 161 | 50 | 410 |
| 165 | 55 | 390 |
| 162 | 58 | 450 |
其中，身高/体重/跳远距离都是数值数据（且还都是连续型），我们可以用身高/体重做点分布，用跳远距离映射点的大小，从而观察到跳远与身高/体重有什么规律。
2.2.3 四个及以上变量
一般1个分类数据和3个数值数据，多用来表示数值变量之间的对比。如：
示例：接着上一个示例，我们再加入性别，继续记录。
| 性别 | 身高（cm） | 体重（kg） | 跳远（cm） |
|---|---|---|---|
| 男 | 160 | 66 | 302 |
| 男 | 161 | 50 | 410 |
| 女 | 165 | 55 | 390 |
| 女 | 162 | 58 | 450 |
其中，性别是分类数据（无序分类），身高/体重/跳远距离都是数值数据（且还都是连续型），我们可以用身高/体重做点分布，用跳远距离映射点的大小，用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数据尝试一下。
以上是总结的主要数据记录结构，在实际使用时，会有更多类型的数据结构要求，我们需要培养认识数据的习惯，深刻理解数据结构是更好应用可视化图表的基础。
