AxureRP教程–统计图表效果

这个示例要讲的是用AxureRP来实现统计图表的制作,这个效果一般只有在需要有自动生成统计图表的地方才会用到,功能就是提供了类似SwiffChart那样,在一个表格里面录入原始数据后,能自动生成柱状图的效果。这个效果比较花哨,设计起来也相当复杂,不建议大家在平时的原型设计里面去专门设计这样的功能,类似用到这样功能的地方可以做出说明,要求能自动生成图表即可,这样还可以多说明几种图表,如饼图,线图等。

示例是从别人制作的原型演示示例里面摘出来的,这里以介绍说明为主,告诉大家这个功能是如何实现,推荐已经对AxureRP比较了解的朋友来学习这个实例。统计图表功能有两个难点,一个是多维的表格设计,每个表格都需要考虑其单元格内容的编辑控制,维数越多越复杂;第二个是柱状图的显示,维数多了之后需要用不同颜色的柱状图来加以区分,还要根据表格所填的数字来显示不同的长度,因此也是维数越多越复杂。

首先是表格的设计,例子是四行六列的表格,去掉坐标轴所需的头,则为三行五列,因此需要设计十五个单元格。控制鼠标单击可输入的效果在前面的《AxureRP教程–相册效果》里有介绍,即用动态面板来约束,一个状态为不可编辑的矩形控件和文本块组件,一个状态为一个单行文本框,输入结束后需要将单行文本框的值传递给文本块组件。这里有一个技巧,就是所有的单元格设置其实都是一样的,因此可以在设计好一个单元格之后进行复制,唯一需要注意的问题就是要做好命名区分,因为后面的柱状图显示是要分别取值的。

其次就是柱状图显示的控制,因为是三行五列,所以X轴需要有五个点,Y轴是三个点,需要有三种颜色的图来区分显示。这里以列为单位,一列下有三个单元格,每个单元格代表一个数字。不同颜色的柱状图以动态面板来实现,这个数字就是不同的动态面板的位移量,例子中的位移量是1:10的比例。这样就实现了每个单元格的数值对应控制一种颜色的柱状图显示,所以前面的命名区分是比较重要的。每一列的控制都类似,柱状图的动态面板默认都是隐藏,图表面板默认也是隐藏的,因为需要先看到表格来填写原始数据。例子中是用了一组单选按钮的OnFocus事件来控制柱状图显示的,先判断当前是否需要移动,并且移动的距离是否已经和表格所填的数字相等,如果没有则位移10个单位,如果已经够了,则停止位移,这样控制的好处是有缓慢位移的效果,不需要再在动态面板里面去设置每隔多长时间去位移了。

效果如上所示,这个例子里面有一种新的思路,就是通过单选按钮间不停的变换焦点来达到动态面板的延时移动的目的,这个功能在《AxureRP教程–焦点应用》里有说明,因此只要愿意去想,还是能有很多好的实现方式的。

大家可以学习一下源文件,建议在看的时候将动态面板查看视图打开,否则会看的比较吃力的,直接点相应的动态面板状态,就能定位到相应页面去了,有问题可以交流。

 

点此查看演示

点此下载源文件



无觅相关文章插件,快速提升流量

“AxureRP教程–统计图表效果”有1条评论

沉默 | 2011-09-28 11:38 |
commenter

好好好,非常的好,正好能用上……非常感谢啊 😛