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

首页 > 科技

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

来源：音乐大烩菜 发布时间：2023-06-10 00:10

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

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

这有助于提高信息传达的效果，并能够引起观众的兴趣和参与。所以今天作者就教大家，如果通过输入框元件，动态维护可视化图表里的数据，实现图表跟随数据变化而变化的效果。

下面我们会以柱状图为案例：

一、效果展示

  1. 可以在输入框里修改项目名或数据，修改后自动生成对应的柱状图。
  2. 可以在输入框里增加或删除数据，自动生成对应的柱状图。
  3. 可以通过复制粘贴的方式，批量添加新的数据，自动生成对应的柱状图。

原型预览地址：https://9ancyh.axshare.com/#g=1

二、制作教程

像案例中的柱状图，我们主要有两种方法制作：一种是用Axure原生元件制作的，另外一种是通过调用外部js图表来制作的。

前者的好处是通过原生元件制作，无需联网，而且后续交互都可以自由添加，缺点是首次制作时间较长；

后者的好处是，通过调用代码来实现，基本复制粘贴就可以搞定；缺点是后续如果要制作交互会比较麻烦，需要联网或者js本地化，自身也需要懂一点点代码。

那今天我就教大家用输入框控制调用外部的js图表，用Axure原生元件制作的以前的教程也有分享过，有需要的同学可以查看历史文章。

1、Axure调用echarts图表的原理讲解

我们在Axure里面调用echarts的基础图表，只需在echarts里面找到你需要的图表，这里是基础的图表，那些什么3D的这里分歧用。

然后点击下载示例按钮，就可以下载这个图表的html代码。

如下图所示：

我们也可以在红色框那里填写好具体的数据或样式，调整好之后在下载就会得到html文件。那这个文件怎么应用在axure里面呢？

这里有很多种方法，之前在调用echarts图表的教程里也有详细介绍，这里就简单的说明一下：

如果前两种的话，代码在文件里面，就很难实现输入框控制图表数据了；如果用第三种方法，代码在axure里面，就可以通过修改代码里数据的值，从而控制生成对应的图表。

2. 代码的拆解

以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

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

上一篇：我的 AI - AI... 下一篇：了解春天的句...
猜你喜欢
热门阅读
同类推荐

本站内容收集于网络，如有侵权，请联系我们处理

今日必看 | 联系我們 | sitemap | 繁体中文