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

Chart图表

    • 图表的作用
    • Axure创建图表的三种方式
    • 总结

图表的作用

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

Axure创建图表的三种方式

  1. 使用绘画钢笔直接绘制
    5分钟玩转Axure之快速创建Chart图表_第1张图片
    这种方法是比较适合做静态的图表,没有交互或者交互比较简单,只是为了简单的展示而存在。
    主要是先建立坐标轴,然后点击插入,点击绘画即可绘画出图形,最后点击Esc则完成图形的绘制。

5分钟玩转Axure之快速创建Chart图表_第2张图片
5分钟玩转Axure之快速创建Chart图表_第3张图片
2. 使用Axhub Charts元件库快捷创建
这种方法是比较推荐的,首先需要下载该元件库并导入该元件库(会提供元件库的资源下载)。直接拖出一个想要的图表(这里以折线图讲解)。
5分钟玩转Axure之快速创建Chart图表_第4张图片
你会看到一个文件夹,文件夹中有axhub-line-chart、axhub-line-data、axhub-line-config。其中里面的data就是你要配置的数据,而config就是对图表的属性进行设置。(每一种图表的文件夹都是一样的)
axhub-line-data、axhub-line-config是中继器,中继器的数据配置很简单,不会的同学请阅读我前面的文章(5分钟玩转Axure之中继器)
5分钟玩转Axure之快速创建Chart图表_第5张图片
5分钟玩转Axure之快速创建Chart图表_第6张图片
不懂怎么配置的,或者一些特殊的配置无法实现的。可以查看该元件库的使用说明:
5分钟玩转Axure之快速创建Chart图表_第7张图片
可以快速实现图表的建立,而且是带基本交互的图表。5分钟玩转Axure之快速创建Chart图表_第8张图片
3. 使用导入html代码的方式(需要有一点程序基础,可能会更方便)
这种方法就是我们去拷贝某种图表实现的代码,根据我们想要的效果,去修改代码的配置,然后在我们的页面中引用该html文件即可。其实这种方法和第二种方法有异曲同工之处,只是第二种方法是别人实现了代码,将代码放在服务器让你去访问从而进行展示的。如果自己搭建了服务器,那自己也可以建立属于自己的图表原件库。
以antv为例,其它的类似eCharts等等是操作都是一样的。首先选择一个我们想要实现的图表;复制其的html代码保存在电脑中,并设置为.html格式。
5分钟玩转Axure之快速创建Chart图表_第9张图片
5分钟玩转Axure之快速创建Chart图表_第10张图片
在这里插入图片描述
在页面中拖入一个内联框架,并设置链接一个外部的url或文件点击输入文件名。最好将文件放入你的原型发布生成文件夹的下面。
5分钟玩转Axure之快速创建Chart图表_第11张图片
5分钟玩转Axure之快速创建Chart图表_第12张图片

总结

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

你可能感兴趣的:(5分钟玩转Axure,产品经理,产品设计)