Superset图表通过iframe嵌入Html网页展示一文详解
业务需求用superset制作报表,但是制作的报表不能直接用superset直接当作报表的工具。如果不使用二次开发的话,就只能到superset上面才能看到动态的数据。因此能够嵌入html文件里面才能实现superset图表的功能。当然通过iframe嵌入到前段做二次开发实现大数据平台页面也是常常干的事,因此把该方法分享给各位。希望能够帮助到正在看此博文的各位,如果还有什么问题解决不了尽请在评论区
目录
1.修改config.py配置文件,将PUBLIC_ROLE_LIKE 设置为Gamma
1.修改superset下config.py文件里的一些内容,使得superset可以联动
前言
业务需求用superset制作报表,但是制作的报表不能直接用superset直接当作报表的工具。如果不使用二次开发的话,就只能到superset上面才能看到动态的数据。因此能够嵌入html文件里面才能实现superset图表的功能。当然通过iframe嵌入到前段做二次开发实现大数据平台页面也是常常干的事,因此把该方法分享给各位。希望能够帮助到正在看此博文的各位,如果还有什么问题解决不了尽请在评论区提出,博主会一一作答。下面开始正文。
一、iframe
iframe为嵌入式框架,该功能可以把一个网页的框架内容嵌入到现有网页中去。而根据superset原理也了解,superset是基于python语言,使用pyecharts库封装开法而来,其生成的图表其实也就是一个通过JS渲染的html图表文件。故使用iframe进行嵌入。
在导航栏前段找到Embed code就可以发现自己制作的图表iframe代码了:
关于iframe的代码,其中一些属性是可以根据需求修改的,这里把iframe的属性贴出:
width | 定义iframe的宽度 |
height | 定义iframe的高度 |
name | 规定iframe的名称 |
frameborder | 规定是否显示边框,0(不显示) 、1(显示) |
src | 设置iframe的地址(页面/图片) |
scrolling | 规定是否在iframe中显示滚动条,属性值(yes ,no,auto) |
vspace | 设置或获取对象的水平边距 |
hspace | 设置或获取对象的垂直边距 |
根据属性说明自己慢慢调就好了。
二、插入html
之后我们需要创建一个空的html文件,将iframe代码插入body就好了。
我们先进行验证插个空的就好了,马上就会发现需要登陆,然后一直登录不上的问题。
三、解决登录问题。
superset是默认进入图表的用户为public类型,要先修改配置文档。
注意 每个版本的superset的配置文件config可能会不一样,需要根据自己的版本修改。
我的superset版本为1.3.2,查阅了网上众多方法发现一般解决方法有2种,就都能解决该问题。
第一种:
找到相应的配置文件:
/usr/local/python3/lib/python3.6/site-packages/superset/config.py
1.修改config.py配置文件,将PUBLIC_ROLE_LIKE 设置为Gamma
PUBLIC_ROLE_LIKE = "Gamma"
讲给予public与gamma相同权限级,以后就可以在角色列表添加权限了。
2. 去掉X-Frame-Options限制
可以免去跨域访问问题:直接将里面置空就好了
HTTP_HEADERS = {}
3. WTF_CSRF_ENABLED设置为False
找一找该代码段为位置,讲True该为False:
WTF_CSRF_ENABLED = False
第二种:
第二种方法一般适用于版本比较高的superset,其config文件有所改动:
1.修改superset下config.py文件里的一些内容,使得superset可以联动
"DASHBOARD_NATIVE_FILTERS": True,
"DASHBOARD_CROSS_FILTERS": True,
"DASHBOARD_NATIVE_FILTERS_SET": True,
2.修改用户权限
PUBLIC_ROLE_LIKE: Optional[str] = "Gamma"
3. CSV文件导出乱码问题
CSV_EXPORT = {"encoding": "utf-8-sig"}
四、添加Public角色权限
接下来编辑权限:
加入这些权限:
之后再进去html文件:
好的没问题了。
参阅:
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)