赞
踩
图表是我们在产品中不可或缺的一部分;它主要承担着直观表现数据和客观分析数据的作用。很多决策分析会依靠图表进行输出,分析图表在不同模式、场景和时间的变换下,所产生各不相同的联系及趋势。
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或文件点击输入文件名。最好将文件放入你的原型发布生成文件夹的下面。
图表是在绘制原型时常常用到的。往往很多新手会消耗很多时间绘制图表,最后结果却并不理想,绘制的不美观、没有交互、消耗大量的精力事倍功半。这是因为方法不对,凡事可以去想最佳解决方案,在之前要去发现事物的本质是什么,这也是我们做产品经理最核心的方法。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。