.

数据图表绑定数据库功能教程

老赵发表于:2021年03月08日 14:11:05更新于:2021年10月09日 16:27:11


数据库数据收集提示:

体验版数据库的数据收集最多可免费100条,不可下载(如何获取收集更多的数据权限?


数据图表功能更新:数据图表绑定数据库功能

      一直以来数据图表组件只能支持静态数据的展示,现在数据图表组件功能更新,支持配合数据库来一起使用了,我们可以使用数据库来在播放器中对数据图表的数据进行修改。

       数据库相关教程:http://support.epub360.com/hc/kb/article/1108078/

 

所用组件:

数据图表、数据库、全局变量、输入框、文字按钮等。

 

演示案例网址:

https://wmd5we.epub360.com.cn/v2/manage/book/yt3y0c/

 

数据图表绑定数据库教程详解:

一:在后台数据库中新建数据表。

①将数据表命名为“数据图表功能演示”。并在其中添加字段:

“类别”(字符串类型)、“1999年”(整数型)、“2000年”(整数型)、“2001年”(整数型)。

②在数据表中添加数据。

00160c825f4808555e8304c1804585f

③在数据表中,新建的第一个字段“类别”代表着数据图表中的“列”,新建的其他字段代表着数据图表中的“行”,如图中所示。

00160c825f4c8200a1ad5e7e04f7bb6 

④呈现在数据图表中的效果:

00160c825f48ddb40c8b70bd01197a6

 

二:在编辑器中添加数据图表,并绑定数据库。

①在顶部菜单栏中,找到高级组件-数据图表,点击添加到编辑器中。

00160c825f4a04f3eb4fdf95ec176be

②将刚才做好的数据表也添加到编辑器中。如果页面中没有显示刚才新添加的数据表,则点击刷新键进行刷新,之后再添加。

00160c825f4a47b062c923ff0f8f01b

③将数据表绑定给数据图表。其中,“列0”绑定的是刚才的“类别”字段,即表格中的横轴,此外的列则依次绑定其他的字段。之后点击数据图表的刷新键进行刷新。

00160c825f4b014745f9e1d33162c17

 

三:点击编辑键或双击数据图表组件,调整数据图表的样式。

 

具体调节图表样式的方法可以查看教程:

数据图表组件【专业版及其以上版本可用】

http://support.epub360.com/hc/kb/article/1323722/

 00160c825f4b18c2810cb8d8395d976 

 

四:如何修改数据。

由于数据图表组件中的数据是通过数据库传递过来的,所以想要修改数据图表的数据,只能去数据库中修改。

00160c825f4da4135414af334f48bf8

 

五:如何利用数据库实时修改数据图表中的数据

比如我们需要修改数据图表中1999年娱乐一项的支出,我们就需要在编辑器中新建一个输入框和按钮。当点击按钮时,进行数据库操作-修改数据。通过提前拿到的想要修改的数据的数据id,进行数据修改。

00160c825f4de183bb347d39062f699

 

 

 

六:刷新数据

目前数据图表还不支持在播放器中实时刷新,在编辑器中,我们可以通过点击数据图表的刷新键进行刷新,在播放器中,我们暂时可以通过跳转页面的方式进行刷新。方法如下:

①将刚才的数据图表、输入框和按钮复制一份到下一页面,然后在当前页修改数据成功时触发跳转下一页面。

②将下一页的数据图表的进入动画关掉,在切换到下一页时触发跳转页面,跳转回当前页。

00160c825f4e89b957d38753b2c1441

 

③几个跳转页面的跳转方式都设置为无,此时点击修改数据按钮,即可发现数据图表中的数据会呈现实时刷新的样子。


--------- 不了解设计的程序员不是好客服 ---------------