axure9预览显示不出来(axure预览显示不出来)
Axure高保真教程：通过输入框动态维护可视化图表
与静态图相比，动态图更能够吸引他人注意，更好地呈现所需要表达的内容。本文介绍了动态图表在数据可视化中的作用，并以柱状图为例，分享了通过输入框控制调用外部的js图表的制作教程，希望对你有所帮助。
与静态图表相比，动态图表更能吸引观众的眼球并提供更好的视觉效果。动态元素可以吸引观众的注意力，使数据更生动、更具交互性。
这有助于提高信息传达的效果，并能够引起观众的兴趣和参与。所以今天作者就教大家，如果通过输入框元件，动态维护可视化图表里的数据，实现图表跟随数据变化而变化的效果。
下面我们会以柱状图为案例：
一、效果展示可以在输入框里修改项目名或数据，修改后自动生成对应的柱状图。可以在输入框里增加或删除数据，自动生成对应的柱状图。可以通过复制粘贴的方式，批量添加新的数据，自动生成对应的柱状图。原型预览地址：/d/file/gt/2023-09/hmu0sjxbycv 代码的拆解
以echarts柱状图为例，以下是控制图表的基础代码：
可以看到xAxis里的data是控制柱状图的项目，格式为’1月’, ‘2月’, ‘3月’, ‘4月’, ‘5月’, ‘6月’，yAxis里的data是控制柱状图数值，格式为1234, 2468, 3579, 5678, 6666, 3333 。
3. 输入框里文本的变换我们在看一下输入框里的文本，如下图所示：
所以我们就要将冒号左变的项目值的格式转变成’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 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送至邮件举报，一经查实，本站将立刻删除。转载务必注明出处：http://www.hixs.net/article/20240305/169625548089421.html
