Axure9原型设计:能增删改数据的动态饼图(2)
haoteby 2025-06-28 14:03 3 浏览
在本篇中，我们将延续上篇的设计思路，进一步探索如何在 Axure9 中实现“可增删改数据”的动态饼图效果。
最近无聊，在网上闲逛，看到一篇教程《能增删改数据的动态饼图》，故仿照实践。
因信息量较大，分三篇完成，如下：
在上一章内容之上继续，步骤如下：
1.设置中继器
* 在Axure中拖入一个中继器元件
* 给中继器元件设置名称为”chartDataSource”
2.设置中继器默认数据
* 点击中继器”chartDataSource”
* 点击“样式”，在“数据”栏填写示例数据（注意表格的列名）
3.将中继器制作成表格
* 双击中继器，进入中继器内部
* 删除原有矩形，添加一个文本标签、二个文本框，分别命名lblNo、txtBrands、txtSales
* 给中继器添加交互事件“每项加载”
* 添加动作“设置文本”
* 分别给中继器内部的三个元件设置对应的文本与中继器数据表格列对应
这个时候，给元件命名的好处就体现出来了，在做复杂交互的时候，更方便定位元件，出错也方便查找原因。
设置完，效果如图：
4.输出中继器表格数据
* 添加一个文本标签，命名lblShowData，用于显示中继器数据，同于作为饼图的外部数据源
* 回到中继器“每项加载”事件，给lblShowData设置文本，代码如下（注意空格）：
[[Target.text]]
{ value: [[Item.Sales]], name: ‘[[Item.Brands]]’ },
中继器的数据是一行一行加载的，通过[[Target.text]]可以将数据拼接起来，相当于“+=”
到这一步，我们可以把中继器表格的数据输出到文本标签“lblShowData”，效果如下
5.更改饼图的数据源
* 点击矩形“chartContainer”，修改JavaScript代码
* 添加局部变量dataSource，用来保存文本标签“lblShowData”的文字
* 将局部变量替换掉原本的文字数据源
这时如果预览，饼图没有正常显示，需要给饼图执行JavaScript代码前等待一小会
* 点击矩形“chartContainer”，在事件“载入时”添加动作“等待”，就是载入时先等上500毫秒再执行JavaScript代码
6.预览查看整体效果
—end
至此使用中继器来代替eCharts图表数据源完毕。
感谢
https://www.woshipm.com/rp/5687731.html
https://www.woshipm.com/rp/5054935.html
本文由 @头发渐少脾气渐涨 原创发布于人人都是产品经理。未经作者许可，禁止转载
题图来自Unsplash，基于CC0协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务
相关推荐
- 谷歌开源大模型评测框架正式发布，AI模型评测难题迎刃而解
-
近日科技巨头谷歌正式推出其开源大模型评测框架LMEval，这一创新工具为全球AI开发者和企业提供了标准化的模型评估解决方案。LMEval的发布不仅标志着AI模型评测迈入透明化时代，更通过多项核心技术...
- Android 开发中文引导-动画和图形概述
-
安卓系统提供了各种强大的API，用来将动画应用于界面元素和自定义2D和3D图形的绘制当中。下面的小节大概的描述了可用的API和系统功能并帮助你决定那个方案最适合你的需要。动画安卓框架提供了两种动画系统...
- Qt5 C++入门教程-第12章 绘图(QPainter)
-
QPainter类在Qt5中进行绘图时起着重要作用。绘图操作是通过QPainter类在响应paintEvent方法时完成的。线条在第一个示例中，我们在窗口的客户区绘制了一些线条。line...
- 文创测评︱《如意琳琅图籍》:本土原创解谜书的胜利?
-
设想这样一个场景，你打开一本书，就化身为乾隆三十六年紫禁城中的画画人周本，有一天你在故纸堆中找到一本神秘的《如意琳琅图籍》，踏上寻宝旅程，历经各种离奇复杂的故事……这是故宫与奥秘之家联手打造的创意解谜...
- gif动图制作攻略!快快收藏（求gif制作的动图）
-
有事没事斗图玩是当下人们乐此不疲的事情，手里的gif动图也渐渐成为了人们抬杠互怼的一大资本。好有趣，好炫酷，gif是怎么做出来的？我也想做。什么？你不会？没关系，我来教你！首先介绍一下制作gif动图需...
- eduis未能初始化界面 无法启动 问题解决办法
-
1.如果edius安装后启动后出现failedtoinitializeskin中文提示无法初始化界面的错误。这说明你的电脑安装了双显卡，而edius所使用的是图形显卡。可以选择edius图标右键...
- Flash Player模拟器更新:Rufffle（flash模拟器安卓下载高版本）
-
Ruffle是一个适用于WindowsPC的FlashPlayer模拟器，用Rust编写。Ruffle作为一个独立的应用程序在所有现代操作系统上原生运行，并通过使用WebAssembly在所有现代...
- 支持终身免费4G流量，星星充电7kW星际智能交流充电桩拆解
-
前言近期星星充电推出了一款星际智能交流充电桩，在正面设有灯条，可根据灯条颜色和显示直观了解充电状态，并设有屏幕显示充电状态和ui表情。充电桩支持220V/7kW充电功率，适配主流新能源车型。并支持终身...
- 乐动随心之fancy pop（乐动随心壶多少钱一个）
-
跳动飞扬的音符像是连通人与人之间心电感应的通关密码，融化陌生，拉近彼此。此次我们邀请到宅男女神江语晨，化身音乐精灵。在歌手、演员身份间游刃自如的她，为我们生动诠释了三种不同的音乐时尚风格，娴静可爱，灵...
- Asus Zenflash 手机也能玩引闪，从此相机是路人
-
在讲解Zenflash之前，不得不提索爱的K750c，这个机器采用了氙气闪光灯，让手机的拍摄上了档次，可玩性更高，不过，说实话，当时手机的摄像头像素低，成像一般，没有掀起太大的波澜，可现在，手机的Cm...
- Axure有哪些鲜为人知的使用技巧?（axure的使用教程）
-
阿拓带你飞：不管是想入门产品经理还是已经是PM的人对AXURE都很关注，它是制作产品原型的重要工具，但是有多少人了解AXURE的使用技巧？本文是来自“知乎问答”整理的回答，一起来看看那些不常用的使用技...
- 挑战黑夜 华硕ZenFlash氙气闪光灯评测
-
【机锋配件】说到摄影，相信许多朋友都非常喜欢，不管是外出游玩拍拍风景，还是和朋友之间聚会，都会掏出手机拍两张，在餐前拍照晒朋友圈更是成为了许多用户的日常爱好，就算不是专业的摄影爱好者，大家也都有一颗热...
- WPS 演示倒计时 3 步设置!从数字动画到进度条全场景教程
-
做PPT时想添加倒计时却找不到入口？WPS演示自带的"动画+计时"功能就能轻松实现——无论是课堂互动的30秒答题倒计时、商务汇报的5分钟限时讲解，还是活动暖场的动...
- flash动画an制作MG动画元素如何调节透明度，小白...
-
如何在flash动画软件里面调节mg动画元素的透明？因为flash动画软件现在已经升级为flash动画软件，所以直接用新版flash动画软件开工，基本功能都差不多，只是flash增加很多智能化、人性...