与静态图片相比，动态图片更能吸引别人的注意力，更好地呈现需要表达的内容。 本文介绍了动态图表在数据可视化中的作用，并以柱状图为例分享了一个通过输入框控件制作外部js图表的教程。 希望对您有所帮助。

与静态图表相比，动态图表更能吸引观众的眼球，提供更好的视觉效果。 动态元素可以吸引观众的注意力，让数据更加生动、互动。

这有助于提高信息的有效性并引起受众的兴趣和参与。 那么昨晚笔者教大家如果通过输入框设备动态维护可视化图表中的数据，就实现了图表随着数据变化而变化的疗效。

下面我们以直方图为例：

1.效果展示可以更改输入框中的项目名称或数据，更改后手动生成对应的直方图。 您可以减少或删除输入框中的数据，并手动生成相应的直方图。 您可以通过复制粘贴的方式批量添加新数据，并手动生成相应的柱状图。

原型预览地址：#g=1

2. 制作教程

像案例中的直方图，我们主要有两种制作方式：一种是使用Axure原生设备制作，另一种是调用外部js图表制作。

后者的用处在于，它是由原生设备产生的，无需联网，后续交互可以自由添加。 缺点是第一次生产时间较长；

前者的用处在于可以通过调用代码来实现intellij idea替换所有文本，基本上通过复制粘贴即可完成； 缺点是以后如果要做交互的话会比较麻烦，需要网络或者js本地化，还需要懂一点代码。

那明天我就教大家用输入框来控制和调用外部js图表。 之前用Axure原生设备做的教程也已经分享了。 有需要的朋友可以查看历史文章。

1.Axure调用图原理讲解

我们在Axure上调用的基本图表，只要在上面找到你需要的图表就可以了intellij idea替换所有文本，这里是基本图表，哪些3D的在这里不适用。

然后点击下载示例按钮下载该图表的html代码。

如右图所示：

我们也可以在白框中填写具体的数据或者样式，调整后下载后就得到html文件了。 那么这个文件如何应用到axure上呢？

这里的方法有很多，之前调用图的教程中也详细介绍过。 这里有一个简单的解释：

如果采用前两种方式，代码都在文件上，很难实现输入框控制图表数据； 如果使用第三种方法，代码在axure上，通过改变代码中数据的值就可以生成对应的图表。 。

2. 代码的反汇编

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

可以看到xAxis中的数据是控制直方图的项，格式为'', '', 'March', 'April', 'May', 'June', yAxis中的数据是控制直方图值，格式为1234,2468,3579,5678,6666,3333。

3.输入框中文字的变换

我们正在查看输入框中的文字，如右图：

所以我们要把左边破折号的item值的格式转换为'','','March','April','May','June'; 引号右边的数据格式转换为1234, 2468, 3579, 5678, 6666, 3333

在这里我们将处理文本。 首先，我们需要将第一行设置为如右图所示：

这里我们主要用到两个函数，函数和切片函数。 通过该函数，我们可以找到第一行的换行位置，然后使用切片函数将其提取出来并分别设置为两个文本。

之后我们对提取出来的文本:1234进行处理。这里我们同样使用了切片函数，可以找到引号的位置，然后使用切片函数提取引号之前的item值和之后的数据逗号。 价值。

之后，我们创建两个新文本来分别保存两个值。 默认情况下文本为空，文本降低到原始值并降低到新值。 这里注意：item值的格式‘text’需要用引号冒号括起来，并用引号冒号分隔； 数据值的格式只需要用英文冒号分隔即可。

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

3. 何时执行交互

最后，我们什么时候触发这种交互？ 通常当我们失去输入框的焦点时，通常默认图表中都会有基础数据，所以我们会在加载时开始执行。

我们需要先将xy的记录文本设置为空，因为这是在开始之前，并且值是在其原始文本的基础上添加的。 如果不清除，当之前改变值时，上面不会被重置，导致数据越来越多。

后来我们考虑到有的人可以打中文破折号，有的人可以打英文逗号，所以我们用一个函数将英文逗号统一转换为中文破折号。

然后我们触发里面的文本转换。

如果后面数据发生改变，我们也需要触发这个交互。 我们以输入框失去焦点的时候作为完成改变的依据。 这里不需要重写事件，因为上面加载的时候已经写好了。 我们只需要使用触发交互来触发输入框加载即可。

这样，我们就完成了通过输入框动态维护可视化图表的原型模板。 上次使用时，我们只需要复制粘贴并更改输入框中的选项文本，即可手动生成柱状图的疗效。 不是很好吗？ 方便性怎么样？

其实以后你还可以根据自己的需要减少一些常见的图表，比如条形图、饼图、环形图等，都是同样的方法。

以上就是本教程的全部内容。 有兴趣的朋友可以尝试一下。 感谢您的阅读。 上一期见。

如有侵权请联系删除！