快好知 kuaihz订阅观点

 

Axure教程:堆叠柱状图

上一期教会大家如何用axure做一个简单的柱状图,本文将教大家如何用AXURE做堆叠柱状图。

效果如下:

一、功能介绍

所有图表不需要联外网,数据也不是写死的,只需在中继器或表格中填写数据即可自动生成图表,操作简单。

大小、颜色、样式、交互可以自由变换。

鼠标移入时能显示具体数据。

二、制作方法

(1)先做出普通的柱形图原件,具体制作方法参考我上一篇文章——Axure 教程:怎么做超漂亮的柱状

(2)中继器内材料:矩形1,复制多个柱形图里面的矩形,填充自己喜欢的颜色,放置于原来矩形一致的地方。

(3)中继器内表格设定

x是横坐标的值,no是各种产品的值

(4)在中继器外建一个文本框(命名为最大值)并隐藏,只用于逻辑处理。文本框的值填写no里面最大的总值,该案例为980。逻辑是找到最高的总值,让比它底的值调低高度。具体公式[[LVAR2.height*(Item.no/LVAR1)]]。

LVAR2.height指矩形的高度,LVAR1指no的最大值,Item.no指no的当前值。

(5)具体交互思路

中继器加载时,我们设置每个颜色柱状的尺寸,具体设计方法请看上一遍文章。然后我们让矩形2放在矩形1的上面,矩形3放在矩形2上面,以此类推。

(6)做一个标签,如下图所示,默认隐藏。

思路,鼠标移入矩形的时候,显示标签,标签跟随鼠标移动,让Item.no的值=文本标签2,Item.x的值=文本标签1,以此类推。

鼠标移出的时候,隐藏标签即可。

最后,制作完成后,以后使用方便,仅需简单填写中继器的内容,即可拥有完美的效果,所以强烈推荐给各位使用。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:Axure教程:堆叠柱状图  柱状  柱状词条  堆叠  堆叠词条  教程  教程词条  Axure  Axure词条  
原型

 Axure教程:规格的实现

笔者在本文中介绍了如何用Axure实现规格效果的操作步骤,以及实现过程中的一些心得体会,与大家分享。这篇文章是继《Axure教程:数量加减的实现》之后的下一篇拆...(展开)

原型

 Axure教程|购物车商品增减删...

看了前面几位大神发的中继器的九宫格啥的,我只能说:请收下我的膝盖!中继器我也就初级水平,就不献丑了,还是给大家分享点我这水平能够做到的东西,希望大家表喷我,多给...(展开)

原型

 如何利用axure制作简易版的推...

我出的这一版非常简单,就是让大家熟悉推箱子游戏做出来的原理,当然你可以花时间优化一下,比如加个方格子,多设置几个障碍物,多加几个箱子等等。熟悉基本原理,拓展性的...(展开)