axure在线版axure最新版

投稿用户 • 2022年12月13日 pm10:28 • 副业项目 • 阅读 107

在系统分析中，可视化视图是一个相对重要的模块，所以，你知道如何Axure可以添加和删除数据的动态饼图吗？在本文中，作者展示了流程。让我们看看。

axure在线版axure最新版

视觉视图是系统分析中一个非常重要的环节。今天，作者将教你Axure中如何用中继器表格结合echarts制作可以动态添加和删除数据饼图原型模板。生产效果如下图所示：

自动生成饼图：通过修改中继器表中的数据，自动生成相应的饼图；
输入饼图可查看相应的详细数据；
表格中的数据可以添加、修改或删除，饼图可以自动调整。

axure在线版axure最新版

原型地址：https://yrwtjv.axshare.com/#g=1

制作教程

1. 表格的制作

1）副业项目网制作材料

生产材料包括表头、中继器和矩形。

① 表头

表头由四个矩形组成，如下图所示。

② 中继器

中继器内部元件包括矩形、输入框、三个图标按钮(上插行、下插行、删除)，如下图所示。

中继器表中有三列：

no根据1234566，列是计算上下插入行的后续逻辑……顺序填写。

text列是饼图的项目文字，data列为项目数据。

axure在线版axure最新版

③ 矩形

我们通过了这个矩形js调用echarts饼图，让饼图出现在矩形内部，具体代码可以在echarts找到后，我们需要做的是通过交互，用中继器中的数据取代下面红色框中的内容。具体如何操作，之前文章中的中继器echarts可视化图表中有详细的介绍，您可以先参考本文，完成中继器饼图的制作。

副业分享 axure在线版axure最新版

2. 交互制作

1)中继器载入时的交互

当中继器载入时，我们必须对no为后续插入行的交互准备排序列。

2)每次加载中继器时的交互

每次加载中继器时，我们需要将中继器表中的数据设置在中继器的内部元件上。我们将使用设置文本的交互no将列值设置为中继器中的第一个矩形（序号）text列值设置在第一个输入框中(项目名称)data列值设置在第二个输入框中(项目数据)。

axure在线版axure最新版

3)输入框失去焦点时

当项目名称输入框和数据输入框失去焦点时，这意味着输入已经完成。这意味着我们需要通过更新行的交互更新当前行的值。如果项目名称输入框失去焦点，我们将更新当前行text列值为输入框中的值；如果数据输入框失去焦点，则更新当前行data列值为输入框中的值。

完成后，我们在触发饼图中调用触发事件echarts重新加载代码，得到新的饼图。

4)鼠标单击上副业项目资源面插入行按钮的交互

当鼠标单击上面插入行按钮时，我们应该在行的最后一行插入一行空行。在我们使用添加行交互之前，我们应该使用更新行的交互来更新序列号。因为我们在上面插入，我们应该添加当前行和下一行的序列号。例如，当前行是第三行。如果在上面插入一行，原来的第三行将成为第四行，原来的第四行变成了第五行……因此，更新的条件是目标no列值大于或等于当前行no列的值。

更新后，我们用添加行的操作，添加空行，no列值为，当前行值减1，因为我们先做更新行交互，所以原来是3行，序号变成4，所以我们插入4-1等于3，所以序号为4-1=3.

5)鼠标单击下面插入行按钮的交互

当鼠标单击下面插入行按钮时，交互逻辑与上面基本相同，但我们需要更新当前下行的序列号。例如，如果我想在3下面插入一行，原来的第四行将成为第五行，原来的第五行将成为第六行……因此，更新的条件是目标no列值大于当前行no列值，这里的条件只是少了一个等于。

然后我们用添加行的操作，添加空行，no列值为，当前行值加值加一，比如在第三行下面加一行，那么他的序号是3 1=4。

6)鼠标单击删除按钮的交互

当鼠标点击删除行按钮时，我们可以使用删除行的交互来删除当前行。然而，为了连续的序列号，我们可以首先使用更新行的交互。例如，如果我想删除第三行，原来的第四行将成为第三行，原来的第五行将成为第四行……因此，更新的条件是目标no列值大于当前行no列值，更新序号列，减少符合条件的序号。

然后我们删除当前行。删除后，由于数据发生变化，我们使用触发事件并在饼图中调用echarts重新加载代码，得到新的饼图。

axure在线版axure最新版

这样，我们就完成了动态饼图的原型模板，可以添加和删除数据，后续使用也非常方便。初始数据填写在中继器表中后，交互效果可以自动生成。

以上是本教程的全部内容。感兴趣的同学可以试试。谢谢你的阅读。下次见。

本文由 @AI产品人每个人都是产品经理，未经许可不得转载

题图来自 unsplash，基于 CC0 协议

本文的观点仅代表作者本人，人人产品经理平台只提供信息存储空间服务。

今天的文章就分享到这里，如果你也网赚副业项目感兴趣，可以添加维信：beng6655 备注：副业！

本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 526323532@qq.com 举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.haoxue2.com/20388.html

axure在线版axure最新版

制作教程

1. 表格的制作

2. 交互制作

相关推荐