Axure9原型设计:能增删改数据的动态饼图(2)

boyanx2周前技术教程10

在本篇中,我们将延续上篇的设计思路,进一步探索如何在 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协议

该文观点仅代表作者本人,人人都是产品经理平台仅提供信息存储空间服务

标签: js输入框

相关文章

如何用JavaScript判断输入值是数字还是字母?

在日常开发中,我们有时候需要判断用户输入的是数字还是字母。本文将介绍如何用JavaScript实现这一功能。检查输入值是否是数字或字母要判断输入值是数字还是字母,我们可以通过JavaScript获取输...

js下拉列表表单控件的自动填写思路

我们熟悉的标准HTML输入控件包括input,select,textarea等;比如通过改变input的value属性值,就可输入内容到文本输入框中。有些网页表单为了实现特殊的效果和功能,可以不使用这...

Cleave.js:输入内容格式化工具

我有 Cleave.js,你怎么输入我都无所谓。Cleave.js 是一款非常简单的输入框内容格式化工具,可以自动帮助你格式化输入的文本内容。Cleave.js 遵循 Apache 2.0 开源授权协...

如何在JavaScript中限制输入框的字符长度?

在 JavaScript 语言里,有多种方式可以能够有效地对输入文本框的长度进行精准的断言限制。下面为您详细介绍常见且实用的实现方法。其中一种方式是过 JavaScript 的内置函数和属性,如 ma...

如何在JavaScript中实现数字输入框的范围限制?

在 JavaScript 语言中,实现数字输入框的范围限制可以通过多种方式实现,最常见的方式是利用 JavaScript 的事件监听机制,和通过 JavaScript 的条件判断语句来实现范围限制。以...

Axure高保真教程:通过文本框维护下拉列表选项

常见的用户界面元素之一是下拉列表(Dropdown List),提供一组可选项供用户选择。该元素通常显示为展开的列表形式,用户可以通过单击或选择列表中的选项。对于下拉列表的选项,一般由系统代码组成,因...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。