0

0

交互图表如何设置轮播_交互图表自动轮播展示配置【方法】

雪夜

雪夜

发布时间:2026-02-11 13:39:11

|

475人浏览过

|

来源于php中文网

原创

需通过特定接口或配置启用轮播功能:一、调用openautotooltip方法;二、在可视化平台开启“是否轮播”开关;三、使用轮播列表组件;四、用JavaScript自定义轮播逻辑。

交互图表如何设置轮播_交互图表自动轮播展示配置【方法】

如果您希望交互图表在展示时自动轮播数据点提示或图表内容,而非依赖用户手动悬停或点击触发,则需通过特定接口或配置项启用轮播功能。以下是实现交互图表自动轮播展示的多种方法:

一、调用图表对象的 openautotooltip 方法

该方法适用于 FineReport 等支持 JS 接口的报表工具,用于开启数据点提示的自动轮播,仅作用于非扩展类图表且不支持移动端。

1、在图表加载完成后的 JS 事件中(如「图表加载后」事件)获取图表对象:chart = this.options.chart

2、调用 openautotooltip 方法并传入轮播间隔参数:chart.openautotooltip(2000),表示每 2 秒切换一次提示。

3、如需指定轮播的数据点集合,可构造 initpoints 数组并传入:chart.openautotooltip(2000, [point1, point2])

4、绑定控制器以支持动态启停:const controller = chart.openautotooltip(2000); controller.stop();

二、在可视化平台配置“是否轮播”开关

部分低代码平台(如简道云、FVS 看板等)提供图形化配置入口,通过开启全局轮播开关控制交互图表内容的自动滚动或翻页。

1、进入图表编辑界面,定位至「功能设置」或「高级设置」区域。

2、找到「是否轮播」选项,将其切换为开启状态

3、选择轮播形式:若为表格类图表,可选「滚动」或「翻页」;若为指标图或玫瑰图,仅支持「滚动」模式。

4、设置轮播间隔时间:输入 1~60 之间的整数(单位:秒),例如填写 1 表示每秒轮播一次。

5、保存配置并预览,确认轮播效果已生效。

响应式黑色展台设计整站模板1.4.2
响应式黑色展台设计整站模板1.4.2

响应式黑色展台设计整站模板,自带内核安装即用,图片文本实现可视化,方便修改,支持多种内容模型及自定义功能,可根据需要自行添加。模板特点: 1、安装即用,自带人人站CMS内核及企业站展示功能(产品,新闻,案例展示等),并可根据需要增加表单 搜索等功能(自带模板) 2、支持响应式 3、前端banner轮播图文本均已进行可视化配置 4、伪静态页面生成 5、支持内容模型、多语言、自定义表单、筛选、多条件搜

下载

三、使用轮播列表组件替代原生交互图表

当原生图表不支持轮播或需更强定制能力时,可采用专为轮播设计的「轮播列表」组件,其本质是具备动画能力的增强型表格组件。

1、从组件库中拖入「轮播列表」组件至画布。

2、绑定数据集,确保字段与组件列配置一一对应。

3、在「全局」配置中,勾选「是否轮播」,并设置「轮播间隔」和「动画模式」(全部滚动 / 逐条滚动)。

4、启用「单页不轮播」可避免数据不足一页时出现空转;启用「空值隐藏行」可提升展示整洁度。

5、配置「溢出文本滚动」以支持长文本自动滑动显示,滚动时间为 3~10 秒可读性较佳

四、通过前端 JavaScript 实现自定义轮播逻辑

适用于 H5 可视化大屏等需完全自主控制轮播节奏与样式的场景,通过定时器驱动图表状态切换。

1、为图表容器添加唯一 ID,例如:

2、定义轮播数据数组,包含各状态所需参数(如 seriesIndex、dataIndex、tooltipShow 等):const carouselSteps = [{series: 0, data: 2}, {series: 1, data: 0}, ...];

3、使用 setInterval 启动轮播循环,每次执行时调用图表 API 触发高亮或提示:chartInstance.dispatchAction({type: 'showTip', seriesIndex: step.series, dataIndex: step.data});

4、绑定鼠标移入/移出事件暂停与恢复轮播:element.addEventListener('mouseenter', () => clearInterval(timer));

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

541

2023.09.20

硬盘接口类型介绍
硬盘接口类型介绍

硬盘接口类型有IDE、SATA、SCSI、Fibre Channel、USB、eSATA、mSATA、PCIe等等。详细介绍:1、IDE接口是一种并行接口,主要用于连接硬盘和光驱等设备,它主要有两种类型:ATA和ATAPI,IDE接口已经逐渐被SATA接口;2、SATA接口是一种串行接口,相较于IDE接口,它具有更高的传输速度、更低的功耗和更小的体积;3、SCSI接口等等。

1393

2023.10.19

PHP接口编写教程
PHP接口编写教程

本专题整合了PHP接口编写教程,阅读专题下面的文章了解更多详细内容。

318

2025.10.17

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2208

2025.12.29

java接口相关教程
java接口相关教程

本专题整合了java接口相关内容,阅读专题下面的文章了解更多详细内容。

36

2026.01.19

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

520

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

350

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

488

2023.08.03

2026春节习俗大全
2026春节习俗大全

本专题整合了2026春节习俗大全,阅读专题下面的文章了解更多详细内容。

68

2026.02.11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
R 教程
R 教程

共45课时 | 6.5万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.3万人学习

ASP 教程
ASP 教程

共34课时 | 4.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号