JS设置图表点击超链

楼主
合作v:conger-blaine

1.背景及说明

1.1 背景

帆软设计器可通过特效-交互属性添加图表超链,但是只能在图表区域进行点击,当想要在标签、坐标轴标签实现点击跳转时,设计器无法直接实现该功能

1.2 说明

本文仅作思路参考,可能有更好的方法去实现,大佬们勿喷

2.实现思路

1.在页面中找到对应元素绑定js点击事件

2.在自定义标签中使用a标签拼接

3.实现

3.1分析页面后,给对应元素绑定点击事件

预览图

tstmp_20230914085203.gif

审查页面元素,分析标签为一个个的path标签,找到对应标签后绑定点击事件即可

JS代码加到图表初始化事件

setTimeout(function() {
	$('div[id^="chartABC"] .seriesTextRenderGroup g:first path:even').on('click', function() {
		FR.Msg.alert("我是弹窗", "我是弹窗内容")
	});
}, 1500)

3.2轴标签点击跳转

预览图

动画1.gif

function(){ 
$("div[id^='chart0000000'] div:first").css('pointer-events','')
var urlString = this.toString(); 
return `${urlString}`;

}

 

 

分享扩散:
参与人数 +1 F豆 +300 理由
Z4u3z1 + 300 骚年,我看好你哦

查看全部评分

沙发
发表于 2023-9-14 16:16:25
板凳
发表于 2023-9-14 16:19:05
地板
发表于 2023-9-18 17:37:05
5楼
发表于 2023-9-28 14:25:26
收藏了
6楼
发表于 2023-9-28 15:07:52
7楼
发表于 2023-10-3 17:46:23
66666
8楼
发表于 2023-11-9 15:40:33
怎么把标签名传参至弹窗里?
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

7回帖数 4关注人数 4499浏览人数
最后回复于:2023-11-9 15:40

返回顶部 返回列表