上周我们发布了稿件后，在后台收到了许多关于如何制图的问题。所以今天我们请到了负责该稿件可视化的小编同学，来分享一下图表制作的过程和注意事项。

分享人：惠一蘅

时间：2020年5月27日

工具：

Flourish（https://app.flourish.studio/projects）

Adobeillustrator（用于加工）

样图：

目录：

一、图表特征

二、具体步骤

三、关于本次个案的一句说明

一、图表特征

1、适用体量较小的数据

2、适合表现纯文字形式的“数据”

3、用于表现数据间的层级关系

二、具体步骤

Step1.数据处理

原始数据形式：

处理过后的形式：

也就是说，数量不能只用一个数字表示，有多少数量就要写多少行出来。也是经历了许多次奇怪的失败才发现（捂脸

Step2.导入Flourish

导入后的初始效果如下：

注意蓝框里的参数哦。

这个图明显不对，问题出在层级的次序反了，这时候就要调一下上图蓝框中的参数。

修改前

修改后

字母A、B、C表示每个column的序号，其顺序决定读取数据的顺序，所以会影响图表的样式。

这次数据最终的size由计数量决定，因此【Size by】那里就不需要另外填写了。

修改后的样子就对了：

Step 3.初步调整

1、我们这次的数据有三级，所以首先将【Visual levels】调到3，这样我们的数据就显示全了。

2、【Maximun label size】和【Label font weight】可调节图上文字的大小和粗细，这样数据可以显示完整一些。

3、

【Outer radius】调节整个图的大小，以防有些图例、柱子太长会溢出屏幕。

【Bar length】调节柱子长度，如果数据大小比较相近，可以通过调节该参数拉大差异。

【Rotation】调节图的旋转角度。

【Bar width】在调整柱子宽度的同时，也会直接改变图的整体形态，比如会让图从上面的圆形，变成下面的扇形。

我们这次图的雏形

其余未提及的参数，也可以按照自己的喜好调整～

Step 4.保存svg格式，导入Ai调整细节，包括配色、字体、补全文字、包装。

经Ai一番常规操作，最终变成了下面这个鸭子。

三、关于本次个案的一句说明

因为不是每条招聘信息都写到了具体二级学科，所以我们这次的数据中，下一级的总数不等于上一级的数量。在图中，这一点表现为有些柱子上只有数量而没有文字。如下图。

感谢阅读～(ˊˋ)

撰稿：惠一蘅

美编：杨雅涵