【每日教程】用中继器做组合柱状图

一、功能介绍

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；

微信公众号：Axure高保真原型，分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容

本文由微信公众号：Axure高保真原型 授权发布，未经许可，禁止转载