教程分享 | 如何通过一个网站快速制作任意角度的变种柱状图？
这篇文章我将分享一个神奇的网站，通过这个网站你可以快速的制作任意角度的变种柱状图。
一 这个网站到底是谁？
这个网站叫做Charticulator，它是微软研究院的一个数据可视化产品，无需代码，无需设计功底，直接通过拖拽数据的方式，就可以快速生成定制化的可视化图表。
↑ Charticulator网站首页（https://charticulator.com/）
该网站和RAWGraphs很类似，但是它的灵活性、创新性、自定义性，我认为要远远的大于RAWGraphs。你不知道RAWGraphs是啥？我之后会给大家介绍到。
二 上传数据到Charticulator网站
首先，我们准备任意一份柱状图相关的数据，另存为一份CSV格式，只保留2列数据列就行。
接着我们打开Charticulator网站，将我们的数据，通过拖拽或选择文件的形式上传到这个网站。
三 Charticulator 网站操作步骤
数据上传完成后，会出现下图中的这个操作界面，主要由数据区、视图区、功能区、图层区、属性区、图表生成区 6个区构成，接下来的步骤操作会在这6个区中来回切换，大家可将这张图保存下来，跟着操作时对应着看。
↑ Charticulator的操作界面
和用AI操作的思路一样，我们首先先创建一个基础的柱状图。
选择功能区中的【矩形形状】（第一个图标），将形状拖拽到视图区中，然后将数据区中的【次数】列拖拽到属性区中柱子的【Height】选项（或者拖拽到视图区中矩形的【Height】），这样基础的柱状图就生成了。
基本的柱状图生成后，那我们该如何生成360°的变种柱状图呢？
其实我们只需要用到功能区中的一个功能就能实现。
我们选择功能区中的【极坐标】，也就是右上方倒数第二个图标，拖拽到图表生成区，这时我们会发现360°的变种柱状图，立马就生成了。你还可以通过鼠标调整内圆的大小。
是不是感觉很不可思议！
接着我们在每根柱子的上方加入文字！
选择功能区中的【文字工具（T）】(第四个图标）并拖拽到视图区中柱子的上方，并将数据区中的【微博用户名】列，拖拽到刚刚生成的【文字（Text）】中。
这时我们便发现文字很快速的就出现在了每根柱子的上方，因为需要文字竖排并和和柱子的角度保持一致，我们可在视图区中旋转文字，那么图表生成区中的所有文字也相对应的同步进行了旋转。
柱子和文字都生成后，我们可以直接在这个网站上根据数值赋予柱子颜色。
在图层区中选中【Shape1】,将数据区中的【次数】列拖拽到属性区中的【Fill】，会发现柱子立马就生成了一个黑色的渐变色，如果要对配色进行调整，可点击右侧【链接🔗】按钮对配色进行调整，这里有两种方案，一种是选择系统默认自带的配色，另一种可点击【Custom】上传颜色代码来自定义颜色。
我粘贴了5个渐变色上去，来自定义柱子的颜色，大家喜欢这个红色渐变的话，照着敲一下就好。
到这一步，在网站中生成的360°的变种柱状图的大框架，基本上已经完成了。
剩下的细节元素的添加调整，在这个网站上进行并不是很友好，我们可以导出SVG，移步到AI中加工。
点击左上方的【导出图表】（第四个图标），选择导出【SVG】格式。
四 AI中添加细节
我们用AI打开导出的svg文件。
将svg文件，复制粘贴到一个空白画板上，点击工具栏中的【直接选择工具】或者按键盘快捷键【A】将标题选中删除，在选择【编组选择工具】选中其中的一个文字，点击两下，这时所有的文字就全部选中了，字体选择可自定义，文字大小调整为22pt。
同时还可在【字符】选项中将字符间距调整为【视觉】，字距调整为【-25】（💡将文字在字符选项中调整为视觉，会让文字在视觉的观感上更紧凑，同时也可压缩字体）。
接下来举一反三，加入细节元素的操作和上篇介绍的用AI添加细节的步骤一样，这里就不一一介绍了！
最后加入【标题】、【注】、【图例】和其他元素，再根据版面安排调整下间距，那么这张结合工具制作完成的360°变种柱状图就完成了。
五 总结
charticulator非常的灵活，只需鼠标的拖拽，你就可以创建不只是360°、180°、90°的柱状图变种，任何的角度你都可以创建。
甚至你还还可以通过功能区的【自定义曲线】（右侧最后一个图标）将柱状图变种成曲线波浪图形，在这个网站上可以创新的形式非常的多，大家可在官网的Gallery、Getting Started中进行学习。
还是我在上篇文章中说的方法论理念：不要局限于工具、软件本身，任何的工具、软件都是为你的作品服务的!
只要是能够提升效率，完成作品，我们就可以在多种工具、软件、网站中进行跨界的结合使用！
比如，基于charticulator网站，我们还可以这么做：
