要说现在UI众多子领域中哪个最火，数据可视化绝对要占一席之地。不管是大数据、云计算还是金融、健身等，相关行业的产品都需要大量的数据展示类页面，所以各类图表就成了页面设计中必不可少的元素。以往各位小伙伴设计这些图表时需要整理数据、确定配色，然后拿钢笔一笔一笔画出来，浪费了大量的时间和精力。今天UI设计培训像素妹儿给各位小伙伴推荐一款专业的Sketch图表绘制组件库，以后再遇到这类问题分分钟轻松搞定！

那有没有好的方法解决这个问题呢？

这款名为Charts for Sketch的组件库由Ruslan Latypov 和 Anton Mishin 所创建，用来全面而便捷地在 Sketch 中定制图表和表单，它具有以下特点：

类型丰富

Charts包含了折线图、柱状图、直方图、散点图等多种图表样式，每个样式里面又细分为不同类型，例如单单一个折线图下面就有九种不同风格，完全可以满足小伙伴日常工作需求；

兼容PC和移动端

Charts提供PC端和移动端两种类型尺寸的图表，所以不管你是做网页设计还是移动端设计，Charts都可以很好地胜任；

定制化程度高

Charts充分利用sketch的symbol功能，支持自定义调整图表，每一个图表的颜色都可以根据用户需要自行修改，保证你所做的图表是独一无二的存在。

当然最最重要的还是它完全免费，你不需要任何代价就可以轻松使用该款组件库。

简单介绍完下面像素妹儿教大家如何使用这款插件。

首先我们需要在Sketch中引入该组件库，打开Sketch软件，点击屏幕菜单栏左上角Sketch选项进入首选项；

在首选项中选择组件库选项，点击弹窗左下角“添加组件库”按钮；

然后在弹出的资源管理器中找到Charts的三个文件，点击打开；

再次回到首选项会发现组件库多出了三个文件，证明Charts已经安装成功。

接下来我们以一个小案例来演示一下如何使用该组件：

首先我们打开一张APP页面，这是一款金融类产品的账单页面，我们需要在页面中创建一个图表，告诉用户消费的大致情况。

我们点击左上角的置入，选择组件里面的Charts [Standart]组件，然后依次选择Mobile Mobile / Charts [Grid and Legend] / Donut Charts / Pie Chart，将选中的饼状图移动到页面中合适的位置；

调整图表位置后的效果如下：

接下来我们修改图表的图例，找到sketch右侧的组件面板，依次在空白的文案输入框内输入饮食、出行、通信、缴费，然后点击页面空白处；

可以发现图表下面的说明文字已经变为了我们输入的文字。

如果各位小伙伴对图表的颜色不满意，我们同样也可以在组件面板进行更改。

首先选中我们的图表，在组件面板中找到Shape选项，点击第一个选项，在展开的选项中将鼠标移动至我们选中的Charts [Standart]文档，接着会展开该文档下的诸多颜色设置，我们将鼠标移动至“Accent”后会展开5个色系，每个色系中包含四种颜色，选择你中意的颜色点击，然后就会发现图表中该模块就会变成你选中的颜色了。

我们选择橘红色里面的第一个，会发现图表中第一个紫色已经改为了橘红色。

如果文件内置的颜色依然无法满足你的需求，小伙伴们也可以将图表从组件分离，这样的话就可以在填充中设置你想要的任何颜色了。

需要强调的一点是，各位小伙伴在将Charts导入Sketch组件库之前最好将文件保存在你平时储存重要文件的地方，不然当你移动或删除Charts文件时就无法正常使用了。

像素妹儿已经将组件文件进行分享，有需要的小伙伴可以点击文章下方的原文链接进行下载哦～