Superset图表通过iframe嵌入Html网页展示一文详解

简介: Superset图表通过iframe嵌入Html网页展示一文详解

前言


业务需求用superset制作报表,但是制作的报表不能直接用superset直接当作报表的工具。如果不使用二次开发的话,就只能到superset上面才能看到动态的数据。因此能够嵌入html文件里面才能实现superset图表的功能。当然通过iframe嵌入到前段做二次开发实现大数据平台页面也是常常干的事,因此把该方法分享给各位。希望能够帮助到正在看此博文的各位,如果还有什么问题解决不了尽请在评论区提出,博主会一一作答。下面开始正文。

a6ff154e4b92495383a0e19f6c3b1694.png

一、iframe


iframe为嵌入式框架,该功能可以把一个网页的框架内容嵌入到现有网页中去。而根据superset原理也了解,superset是基于python语言,使用pyecharts库封装开法而来,其生成的图表其实也就是一个通过JS渲染的html图表文件。故使用iframe进行嵌入。


在导航栏前段找到Embed code就可以发现自己制作的图表iframe代码了:

8448d8c63532475286972a492698e549.png

d02f249a4b48433689db56d9619fb758.png关于iframe的代码,其中一些属性是可以根据需求修改的,这里把iframe的属性贴出:


width 定义iframe的宽度

height 定义iframe的高度

name 规定iframe的名称

frameborder 规定是否显示边框,0(不显示) 、1(显示)

src 设置iframe的地址(页面/图片)

scrolling 规定是否在iframe中显示滚动条,属性值(yes ,no,auto)

vspace 设置或获取对象的水平边距

hspace 设置或获取对象的垂直边距


根据属性说明自己慢慢调就好了。


二、插入html


之后我们需要创建一个空的html文件,将iframe代码插入body就好了。


0f79a3b69b2f4e5e9c0ea6bfdb733c84.png

我们先进行验证插个空的就好了,马上就会发现需要登陆,然后一直登录不上的问题。


三、解决登录问题。


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角色权限


7e18b50e7f5d40e38e48011ce9c3d4ca.png


接下来编辑权限:


56abb877029b4059b10c7193620d8af5.png


加入这些权限:

4e0eb82033d2462d984c1b9a49efe1e6.png


之后再进去html文件:

403ce091d5cb4f11b545fa975f359563.png



好的没问题了。

目录
相关文章
|
2月前
|
存储 移动开发 前端开发
HTML基础知识:构建网页的基石
【10月更文挑战第11天】HTML基础知识:构建网页的基石
134 0
|
5天前
|
数据采集 前端开发 数据挖掘
利用 html_table 函数轻松获取网页中的表格数据
本文介绍了如何使用 R 语言中的 `html_table` 函数结合代理 IP 技术,轻松提取网页表格数据并规避反爬机制。通过设置代理和请求头,示例代码展示了如何从 58 同城采集租房信息并保存为 CSV 文件。该方法适用于需要频繁采集数据的场景,确保数据采集的高效和稳定性。
利用 html_table 函数轻松获取网页中的表格数据
|
4月前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
65 0
|
3月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
3月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
2月前
|
数据安全/隐私保护 C++
【HTML】构建网页的基石
本文介绍了HTML的基本概念和常用标签,包括HTML文件的基本结构、常见标签(如标题、段落、换行、图片、超链接等)、表格与表单的使用方法,以及无语义标签div和span的特性。通过具体示例展示了如何在VS Code中快速生成HTML框架及各标签的应用场景,帮助初学者快速掌握HTML的基础知识。
56 1
【HTML】构建网页的基石
|
3月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(10)嵌入Table
本文介绍了如何在Twaver HTML5中嵌入表格(Table),并设置表格的列(Column)和样式。通过示例代码展示了如何在React组件中创建表格并添加数据,以及如何通过样式设置表格元素的颜色。
46 2
Twaver-HTML5基础学习(10)嵌入Table
|
2月前
|
移动开发 HTML5
在HTML5中嵌入视频和音频
【10月更文挑战第5天】在HTML5中嵌入视频和音频。
44 3
|
3月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
4月前
|
移动开发 HTML5
可达鸭举牌网页版本在线生成源码html5
可达鸭举牌网页版本,在线生成源码,点击分享即可制作DIY自己的举牌文字网页,需要GIF动图的自行用GIF图片录制工具录制下来。
57 1
可达鸭举牌网页版本在线生成源码html5