Axure教程——直方图（中继器）

原创纤纤露 2023-05-31 15:22:45 评论(0) 阅读(160)

本文将教大家如何用AXURE8.0的中继器制作动态直方图，如果你想了解如何使用AXURE中的中继器来创建这种图形，建议你可以仔细阅读本文。

一、效果介绍
如图：
![](https://img.huzhan.com/blog/20230531/20231685517513898.png)

预览及下载地址：https://yjkepz.axshare.com

二、制作方法
（1）制作刻度表
设计5个刻度，每个刻度20递增，如图：
![](https://img.huzhan.com/blog/20230531/20231685517526325.png)

（2）中继器设计
在刻度表上拖入一个中继器，对中继器数值进行设置；
中继器一共两列，d为横坐标，y为直方图的数值
![](https://img.huzhan.com/blog/20230531/20231685517537460.jpg)

（3）中继器内部设计

拖入两个矩形，其中一个矩形命名为1，大小为80×1，颜色设置为：#0000FF，直方图的间隔，鼠标悬浮时颜色变为#0000FF,透明度为50，其放置的y坐标小于刻度表总高度；
另一矩形命名为2，用于显示横坐标数据，字体颜色为#1E1E1E：，其放置如图：
![](https://img.huzhan.com/blog/20230531/20231685517551930.jpg)
整体设计完成，如图：
![](https://img.huzhan.com/blog/20230531/20231685517563813.png)

三、交互设置
主要时针对中继器的加载时进行交互设置,

当中继器加载时，对矩形1的赋值（中继器的y值），如图：
![](https://img.huzhan.com/blog/20230531/20231685517575104.png)

并对矩形1大小尺寸进行设置；如图：
![](https://img.huzhan.com/blog/20230531/20231685517591320.png)

对矩形2赋值（中继器的d值），如图：
![](https://img.huzhan.com/blog/20230531/20231685517599567.png)

最终的设置，如图：
![](https://img.huzhan.com/blog/20230531/20231685517611923.png)

本次制作完成了。

关注下面的标签，发现更多相似文章本文TAG标签：

Axure教程——直方图（中继器）

已有 0 条评论

Ta的最新文章

标签大全

阅读目录