当前位置：首页 > news >正文

【Axure教程】增删改饼图

news 来源：原创 2025/5/16 14:23:41

今天教大家制作增删改饼图的原型模版，该模版是用Axure原生元件制作的，所以不需要联网或者调用外部接口，使用也很方便，默认数据在中继器表格里填写，默认支持20个不同颜色的扇形，后续可根据实际需要自己增加扇形，预览时即可自动生成交互效果，具体效果可以打开下方原型地址体验

【原型效果】

修改数据效果——在表格里修改数据后，会自动生成对应的饼图

添加数据效果——可以在表格对应行上方或下方添加新行，在新行里添加数据后，会自动生成对应的饼图，案例中提供20种不同颜色的扇形，后续有需要也可以自行增加扇形。

删除数据效果——点击删除按钮，可以删除对应行的数据，删除后会重新生成对应的饼图

【原型预览含下载地址】

https://axhub.im/ax11/9a27399d9b2d17a5/?g=1&p=能增删改的饼图

【制作教程】

一、材料准备

主要包括左侧表格和右侧饼图两部分

1.1左侧表格

表格表头我们用矩形制作，如下图所示摆放：

表格内容我们用中继器来制作，包括矩形、按钮、输入框。底部矩形要和表头矩形同宽；第一列对应饼图的颜色，我们要用多个颜色矩形，放在一个动态面板的不同状态页里，案例中是20中颜色。如下图所示摆放

中继器表格里需要新增3列，no列对应序号，默认按12345……填写；text列对应项目文本；data列对应项目数据。

1.2右侧饼图

饼图也是要用中继器来制作，和前面一样，我们需要20种颜色的半圆，分为左半圆和右半圆，左右半圆分别放在两个动态面板里，有多少个颜色对应多少个面板状态，案例中是20个，因为后续旋转需要再圆的中心，所以我们要增加透明的圆，然后将动态面板和透明圆组合，然后再次转为动态面板，如果是右侧半圆我们就放在左侧面板，默认是看不到他的，后续通过占比和交互，将他显示对应的角度；左侧半圆也是同样操作。

中继器表格里需要新增2列，data列对应该扇形的项目数据，gengxin列默认为空，仅用于逻辑交互。

1.3其他材料

我们在制作的过程中，还需要一些默认隐藏的文本标签和按钮，用来实现交互逻辑。

二、交互制作

2.1饼图的生成

在中继器每项加载时，我们首先要根据每个项目数据、项目数总和来控制半圆的显示，例如a项目数值是25，所有项目总和是100，那他的占比就是25/100=25%，相当于要占比1/4个圆，1/2个半圆，所以我们就要将半圆旋转90，就是显示1/4个圆了，所以我们用旋转的交互，将左侧动态面板里的组合旋转到对应的位置，这样就可以显示对应的扇形面积了。

这里还需要说明一点，上面的扇形最大值显示的就是半个圆，就是说数据占总数据最大是50%，超过了50%，我们就要理由右侧圆了。数据占比大于50%，例如项目b的数值是75，项目总数是100，按他的占比是75/100=75%，相当于要显示4分之3个圆。所以我们想把左侧半圆组合全部显示，就是旋转180度，然后右半圆旋转90度，显示剩下的50%即可。

这里是第一个扇形的情况，然后后面的扇形也是类似，只不过旋转的交互，要加上之前旋转的交互，例如第一个旋转了25度，那第二个就要从25度后面开始旋转，所以我们要记录每行旋转的角度，然后再次用旋转的交互旋转该角度。然后用设置面板状态，将半圆的动态面板设置到和序号一样的状态页，这样就会出现对应颜色的扇形。因为中继器第二行的数据会在第一行下面，所以我们要用移动的交互，将他移动到一样的位置，例如第二行就要减一个圆的高度，第三行就要减2个圆的高度。

这样饼图就可以根据中继器表格里的数据自动生成了。

这里最大值的数据是要自己填写的，我们也可以自动统计，我们可以设一个开关，如果开关是开，就在每行数据加载的时候累计，这样加到最后一行就可以得出总值了，如果开关为关，再执行上面生成饼图的交互。

这样就可以自动统计总和了。

2.2左侧表格的交互

在中继器每项加载时，我们用设置文本的交互将文本设置到对应的元件里，用设置动态面板的交互，设置颜色动态面板显示每行对应的颜色。

然后我们还要用这个中继器的数据控制饼图的数据。如果是刚开始加载，我们就用删除行的交互，删除右侧扇形图中继器的所有数据，然后每项加载时，再用添加行的交互将该中继器表格的数据传过去，这要就可以通过该表格的数据控制饼图。

控制饼图之后，我们先设置开关值为开，让他执行上面计算总数的交互，等待计算总和完成后，我们再奢姿开关值为关，并更新gengxin列的值，这样饼图中继器就会重新加载生成饼图。

这样就可以通过左侧表格的数据动态控制右侧的饼图。

2.3表格内数据的增删改

输入框失去焦点时，我们用更新行的交互，更新当前中继器对应列的值为输入框里的文本值即可。例如更新的是项目名的输入框，我们就更新text列，更新的是数据的输入框，我们就更新data列。

删除按钮单击时，我们首先要更新序号，例如删除的是第三行，原来第四行的序号就要变成3，原来第五行的序号就要变成4……总结就是比删除的行的序号要大的行的需要都要减一。然后再用删除行的交互删除当前行。

鼠标点击下方添加行按钮时，我们同样也是，要先更新序号，例如在第三行下方添加，原来第四行的序号就要变成5，原来第五行的序号就要变成6……总结就是比添加的行的序号要大的行的需要都要加一。然后用添加行的交互，添加一行序号为当前行的序号+1的空行。

鼠标点击在上方添加行按钮也是同理，在上方添加的话，更新行的条件变成当前行也要+1，例如在第三行上方添加行，那第三行也要变成第四行，添加新的行的序号就是第三行。

另外，我们在中继器载入时，要用排序的交互，中继器表格按no列来排序，这样插入的数据才会出现在对应的位置。

这样我们就完成了增删改饼图的效果，如果需要增加扇形数量也很简单，在动态面板里增加不同颜色的半圆和对应的矩形即可，不过20个项目在一个饼图里已经算很多了，再多的数据也不建议使用饼图。

恭喜你已经学习了用Axure原生元件制作增删改饼图的教程，后续使用时，数据在中继器表格里维护，既可自动生成饼图，是不是很方便呢？

那以上就是本期的全部内容了，感谢您的阅读，我们下期见~

【制作教程】

一、材料准备

1.1左侧表格

相关文章：