Axure高保真教程：通过输入框动态维护可视化图表

原型预览地址：/d/file/gt/2023-09/hmu0sjxbycv 代码的拆解

以echarts柱状图为例，以下是控制图表的基础代码：

可以看到xAxis里的data是控制柱状图的项目，格式为’1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’，yAxis里的data是控制柱状图数值，格式为1234, 2468, 3579, 5678, 6666, 3333 。

我们在看一下输入框里的文本，如下图所示：

所以我们就要将冒号左变的项目值的格式转变成’1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’；冒号右边的的数据格式转变成1234, 2468, 3579, 5678, 6666, 3333

这里我们就要对文本进行处理。首先我们要取第一行出来变成如下图的形式：

这里我们主要用到两个函数，indexof函数和slice函数。我们通过indexof函数，可以找到第一行的换行的位置，然后用slice函数可以将他提取出来，分别设置到两个文本里。

然后我们就要对提取出来的文本1月：1234进行处理了，这里我们也是用indexof和slice函数，indexof函数可以找到冒号的位置，然后用slice函数分别提取处冒号前的项目值，以及冒号后的数据值。

然后我们新建两个文本分别保存两个值，文本默认为空，增加文本为它原来的值增加上新的值。这里需要注意：项目值的格式’text’,需要用引文引号包围，并且用引文逗号分隔； 数据值的格式只需要用英文逗号分隔即可。

这样处理完第一行之后，我们接着处理第二行、第三行数据，这里我们只需要做一个循环即可，判断它里面的还有没有内容行，如果有内容，我们就继续上面的循环；如果没有内容了，我们就可以可以结束循环，触发调用js图表，这样就可以调用图表了。

最后，我们什么时候触发这个交互呢？一般我们在输入框失去焦点的时候，但是一般默认图表里会有基础数据，所以我们在载入时就要开始执行了。

我们要先将xy的记录文本先设置为空，因为这是开始前，后面都是在他们原来文本的基础上增加值。如果不清空，在后面修改值的时候，前面的就不会重置，变成越来越多数据了。

然后我们考虑到有些人会打英文冒号，有些人会打中文冒号，所以我们用replace函数统一将中文冒号转为英文冒号。

然后我们触发上面文本转换即可。

然后如果修改了数据，我们也要触发这个交互。我们以输入框失去焦点时，作为修改完成的依据，这里不需要重新写一遍事件，因为前面载入时已经写好了，我们只需要用触发交互，触发输入框载入时即可。

这样我们就制作完成了通过输入框动态维护可视化图表的原型模板了，下次使用时，只需要复制粘贴，修改输入框里的选项文字，即可自动生成柱状图的效果了，是不是很方便呢？

当然，后续你们也可以根据需要，增加一些常用图表，例如条形图、饼图、环形图等，都是一样的方法哦。

那以上就是本期教程的全部内容，感兴趣的同学们可以动手试试哦，感谢您的阅读，我们下期见。

本文由 @AI产品人 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 Unsplash，基于 CC0 协议

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