5分钟玩转Axure之快速创建Chart图表

图表的作用

图表是我们在产品中不可或缺的一部分；它主要承担着直观表现数据和客观分析数据的作用。很多决策分析会依靠图表进行输出，分析图表在不同模式、场景和时间的变换下，所产生各不相同的联系及趋势。

Axure创建图表的三种方式

1. 使用绘画钢笔直接绘制
   
   这种方法是比较适合做静态的图表，没有交互或者交互比较简单，只是为了简单的展示而存在。
   主要是先建立坐标轴，然后点击插入，点击绘画即可绘画出图形，最后点击Esc则完成图形的绘制。

2. 使用Axhub Charts元件库快捷创建
这种方法是比较推荐的，首先需要下载该元件库并导入该元件库（会提供元件库的资源下载）。直接拖出一个想要的图表（这里以折线图讲解）。

你会看到一个文件夹，文件夹中有axhub-line-chart、axhub-line-data、axhub-line-config。其中里面的data就是你要配置的数据，而config就是对图表的属性进行设置。（每一种图表的文件夹都是一样的）
axhub-line-data、axhub-line-config是中继器，中继器的数据配置很简单，不会的同学请阅读我前面的文章（5分钟玩转Axure之中继器）


不懂怎么配置的，或者一些特殊的配置无法实现的。可以查看该元件库的使用说明：

可以快速实现图表的建立，而且是带基本交互的图表。
3. 使用导入html代码的方式（需要有一点程序基础，可能会更方便）
这种方法就是我们去拷贝某种图表实现的代码，根据我们想要的效果，去修改代码的配置，然后在我们的页面中引用该html文件即可。其实这种方法和第二种方法有异曲同工之处，只是第二种方法是别人实现了代码，将代码放在服务器让你去访问从而进行展示的。如果自己搭建了服务器，那自己也可以建立属于自己的图表原件库。
以antv为例，其它的类似eCharts等等是操作都是一样的。首先选择一个我们想要实现的图表；复制其的html代码保存在电脑中，并设置为.html格式。



在页面中拖入一个内联框架，并设置链接一个外部的url或文件点击输入文件名。最好将文件放入你的原型发布生成文件夹的下面。

总结

图表是在绘制原型时常常用到的。往往很多新手会消耗很多时间绘制图表，最后结果却并不理想，绘制的不美观、没有交互、消耗大量的精力事倍功半。这是因为方法不对，凡事可以去想最佳解决方案，在之前要去发现事物的本质是什么，这也是我们做产品经理最核心的方法。