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



好的没问题了。

目录
相关文章
|
移动开发 前端开发 JavaScript
HTML5实现好看的劳动节网页源码
HTML5实现好看的劳动节网页源码,劳动节网页,劳动节网页源码,内置十个页面,各种模板都有,可以根据这些页面扩展更多页面,网页由网站首页、劳动节介绍、劳动节由来、劳动节习俗、劳动节文化、劳动节活动、劳动节故事、劳动节民谣、联系我们、登录/注册等页面组成,兼容手机端,页面干净整洁,内容丰富,可以扩展自己想要的,注释完整,代码规范,各种风格都有,代码上手简单,代码独立,可以直接运行使用。也可直接预览效果。
545 4
|
移动开发 HTML5
HTML5实现好看的中秋节网页源码
HTML5实现好看的中秋节网页源码,中秋节网页,中秋节网页源码,节日网页大作业,作业源码,内置十个页面,各种模板都有,可以根据这些页面扩展更多页面,网页由网站首页、中秋节介绍、中秋节由来、中秋节习俗、中秋节文化、中秋节美食、中秋节故事、中秋节民谣、联系我们、登录/注册等页面组成,兼容手机端,页面干净整洁,内容丰富,可以扩展自己想要的,注释完整,代码规范,各种风格都有,代码上手简单,代码独立,可以直接运行使用。也可直接预览效果。
612 0
HTML5实现好看的中秋节网页源码
|
移动开发 前端开发 JavaScript
HTML5实现好看的端午节网页源码
HTML5实现好看的端午节网页源码,包含十个页面:网站首页、端午节介绍、由来、习俗、文化、美食、故事、民谣、联系我们及登录/注册。页面设计简洁美观,内容丰富,兼容手机端,代码规范且注释完整,易于扩展和修改。提供完整的源码下载和视频演示,方便学习和使用。
475 3
|
存储 移动开发 JavaScript
网页 HTML 自动播放下一首音乐
在 HTML5 中实现自动播放下一首音乐,通过管理音乐列表、操作音频元素和监听事件完成。创建包含多个音乐链接的列表,使用 `<audio>` 元素加载音乐,监听 `ended` 事件,在当前音乐结束时自动播放下一首。示例代码展示了如何使用 JavaScript 实现这一功能,确保无缝切换音乐。
|
存储 JavaScript 算法
(html在线预览cad图纸插件)网页CAD绘制条形码、二维码的教程
本文介绍了如何在mxcad中绘制条形码和二维码。对于条形码,首先根据应用场景选择合适的编码标准(如CODE39、EAN13等),通过编码规则将数据转换为二进制,并利用`McDbHatch`绘制条和空的组合,同时支持自定义实体及属性管理。 对于二维码,因其能存储更多信息且具备更强纠错能力,采用开源库QRCode.js进行编码处理,再通过`McDbHatch`绘制黑白矩阵,同样封装成自定义实体以便管理和扩展。文中还给出了完整的绘制流程与效果展示,包括创建二维码对象、设置参数、调用绘制方法以及最终的效果图。整个过程体现了灵活运用API与第三方库来实现复杂图形绘制的能力。
HTML在线扫雷游戏网页源码
HTML在线扫雷游戏网页源码是一款基于HTML+CSS+JavaScript开发的在线扫雷小游戏单页源码,为用户提供了一个无需安装即可在浏览器中直接玩的扫雷游戏。该游戏的源码不仅包含了完整的游戏逻辑,还具备丰富的界面设计和用户交互功能,使得玩家能够轻松上手并享受扫雷带来的乐趣。
682 22
|
数据采集 前端开发 数据挖掘
利用 html_table 函数轻松获取网页中的表格数据
本文介绍了如何使用 R 语言中的 `html_table` 函数结合代理 IP 技术,轻松提取网页表格数据并规避反爬机制。通过设置代理和请求头,示例代码展示了如何从 58 同城采集租房信息并保存为 CSV 文件。该方法适用于需要频繁采集数据的场景,确保数据采集的高效和稳定性。
642 2
利用 html_table 函数轻松获取网页中的表格数据
|
存储 移动开发 前端开发
HTML基础知识:构建网页的基石
【10月更文挑战第11天】HTML基础知识:构建网页的基石
793 0
|
数据安全/隐私保护 C++
【HTML】构建网页的基石
本文介绍了HTML的基本概念和常用标签,包括HTML文件的基本结构、常见标签(如标题、段落、换行、图片、超链接等)、表格与表单的使用方法,以及无语义标签div和span的特性。通过具体示例展示了如何在VS Code中快速生成HTML框架及各标签的应用场景,帮助初学者快速掌握HTML的基础知识。
206 1
【HTML】构建网页的基石
|
移动开发 HTML5
在HTML5中嵌入视频和音频
【10月更文挑战第5天】在HTML5中嵌入视频和音频。
297 3