Axure教程:组合柱状图

产品老司机手把手教写文档,10天线上课程,零基础掌握产品经理必备7大文档撰写法。了解一下>

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

效果如下:

一、功能介绍

  1. 所有图表不需要联外网,数据也不是写死的,只需在中继器或表格中填写数据即可自动生成图表,操作简单。
  2. 大小、颜色、样式、交互可以自由变换。
  3. 鼠标移入时能显示具体数据。

二、制作方法

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

(2)中继器内材料:矩形n个,组合需要多少个就复制多少个柱形图,填充自己喜欢的颜色。放置如下图所示。

(3)中继器内表格设定

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

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

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

(5)设置尺寸,和前文Axure 教程:怎么做超漂亮的柱状图一致。

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

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

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

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

 

本文由 @梓贤Vigo 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
评论
欢迎留言讨论~!
  1. 演示地址:https://www.pmdaniu.com/storage/108943/0bb7d4aaa13dcbb1a6af5b84398c236f-69620/start.html#g=1&p=%E6%9F%B1%E7%8A%B6%E5%9B%BE
    官方下载地址:https://www.axureshop.com/a/1114192.html
    优惠下载地址:https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.12d01debPBVM8n&ft=t&id=607654275623
    微信下载交流:522073109

    回复
圈子
关注微信公众号
大家都在问