目录
2、需要想用iframe引入dashboard时, URL 参数可用于修改仪表板的呈现方式
3、如果对页面样式有调整,可以在修改dashboard的css属性
6、开放Superset提供的REST API swagger
8、 Superset绘制地图ISO 3166转码以及名称汉化
方案一:手动将ISO 3166-2 插入到我们的数据库中,省对应码与源码ISO保持一致。
方案二:根据数据库唯一id,比如数据一般会存储province_id且是唯一的。
9、如何将Superset图表通过iframe嵌入Html网页
前言
Apache Superset作为一个功能强大的开源数据探索和可视化平台,提供了丰富的配置选项来定制化用户体验。下面是superset一些定制化配置,希望能帮到大家!
Superset官方文档:https://superset.apache.org/docs/intro
配置总结
1、Superset 4.0.2 如何深度汉化?
我们在本地开发时,本地的 superset_config.py 会覆盖掉 config.py 里的变量,无需配置 config.py,因此我们只需要在superset_config.py 配置文件中添加如下代码即可
BABEL_DEFAULT_LOCALE = "zh"
LANGUAGES = {
"en": {"flag": "us", "name": "English"},
"es": {"flag": "es", "name": "Spanish"},
"it": {"flag": "it", "name": "Italian"},
"fr": {"flag": "fr", "name": "French"},
"zh": {"flag": "cn", "name": "简体中文"},
"ja": {"flag": "jp", "name": "Japanese"},
"de": {"flag": "de", "name": "German"},
"pt": {"flag": "pt", "name": "Portuguese"},
"pt_BR": {"flag": "br", "name": "Brazilian Portuguese"},
"ru": {"flag": "ru", "name": "Russian"},
"ko": {"flag": "kr", "name": "Korean"},
"sk": {"flag": "sk", "name": "Slovak"},
"sl": {"flag": "si", "name": "Slovenian"},
"nl": {"flag": "nl", "name": "Dutch"},
}
如果docker部署了生产环境 ,那么我们需要去安装的目录下.miniconda/lib/python3.10/site-packages/superset 找到config.py文件,添加上面的配置即可。
效果图
2、需要想用iframe引入dashboard时, URL 参数可用于修改仪表板的呈现方式,standalone=0
属性 | 枚举 | 描述 |
standalone | 0 | 仪表盘正常显示 |
1 | 顶部导航已隐藏 | |
2 | 顶部导航 + 标题被隐藏 | |
3 | 顶部导航 + 标题 + 顶级标签被隐藏 | |
show_filters | 0 | 渲染没有过滤栏的仪表板 |
1 | (默认):如果启用了本机过滤器,则使用过滤栏呈现仪表板 | |
expand_filters | 0 | 呈现带有折叠过滤栏的仪表板 |
1 | 呈现带有扩展过滤栏的仪表板 |
例如:当运行本地开发版本时,以下操作将禁用顶部导航并删除过滤栏: http://localhost:8088/superset/dashboard/my-dashboard/?standalone=1&show_filters=0
3、如果对页面样式有调整,可以在修改dashboard的css属性
4、Superset联动过滤器配置如何展示?
修改配置文件superset_config.py 使得superset可以联动查询
FEATURE_FLAGS = {
"DASHBOARD_NATIVE_FILTERS": True,
"DASHBOARD_NATIVE_FILTERS_SET": True,
"DASHBOARD_CROSS_FILTERS": True,
"HORIZONTAL_FILTER_BAR": True // 是否支持横向过滤器展示
}
可选择左侧栏展示或者横向展示,效果如下
5、控制筛选器条(Filter Bar)水平布局的配置项
默认情况下,Superset的筛选器条是垂直排列的,即筛选器以列的形式堆叠在仪表板或图表的左侧或右侧。而当配置项 HORIZONTAL_FILTER_BAR
被启用时,筛选器条将以水平的方式显示在仪表板的顶部或底部,以更好地适应特定的布局需求和用户偏好。
配置前样式
修改配置 superset_config.py
FEATURE_FLAGS = {
"HORIZONTAL_FILTER_BAR": True,
}
配置后
6、开放Superset提供的REST API swagger
官方swanger链接:https://superset.apache.org/docs/api
修改配置文件superset_config.py
FAB_API_SWAGGER_UI = True
在路由/swagger/v1中启用 。
7、CSV文件导出乱码问题
修改配置文件superset_config.py
CSV_EXPORT = {"encoding": "utf-8-sig"}
8、 Superset绘制地图ISO 3166转码以及名称汉化
绘制地图时发现地图一直空白无法展示,如下图
经过一番查看,发现在绘制时有这样一个配置
以中国地图为例,这个编码必须符合iso 3166标准,编码格式每个superset可能不太一样,具体格式,具体格式参照Superset版本中的json来确定,以中国地图为例,找到对应文件
我整理了一份地区和ISO的配置,如下表,仅供参考
省市名称 | ISO-3166编码 | IOS-3166-2编码 |
北京市 | CN-11 | CN-BJ |
天津市 | CN-12 | CN-TJ |
山西省 | CN-14 | CN-SX |
内蒙古自治区 | CN-15 | CN-NM |
河北省 | CN-13 | CN-HE |
上海市 | CN-31 | CN-SH |
江苏省 | CN-32 | CN-JS |
浙江省 | CN-33 | CN-ZJ |
安徽省 | CN-34 | CN-AH |
福建省 | CN-35 | CN-FJ |
江西省 | CN-36 | CN-JX |
山东省 | CN-37 | CN-SD |
台湾省 | CN-71 | CN-TW |
黑龙江省 | CN-23 | CN-HL |
吉林省 | CN-22 | CN-JL |
辽宁省 | CN-21 | CN-LN |
陕西省 | CN-61 | CN-SN |
甘肃省 | CN-62 | CN-GS |
青海省 | CN-63 | CN-QH |
宁夏省 | CN-64 | CN-NX |
新疆维吾尔族自治区 | CN-65 | CN-XJ |
河南省 | CN-41 | CN-HA |
湖北省 | CN-42 | CN-HB |
湖南省 | CN-43 | CN-HN |
广东省 | CN-44 | CN-GD |
广西省 | CN-45 | CN-GX |
海南省 | CN-46 | CN-HI |
香港自治区 | CN-91 | CN-HK |
澳门自治区 | CN-92 | CN-MO |
四川省 | CN-51 | CN-SC |
贵州省 | CN-52 | CN-GZ |
云南省 | CN-53 | CN-YN |
重庆市 | CN-50 | CN-CQ |
西藏自治区 | CN-54 | CN-XZ |
下面绘制主要三个步骤:
1. 数据库表新增iso_code字段,插表,以下是sql仅供参考
CREATE TABLE wm_dim.dim_e_fact_region_province (
`id` STRING COMMENT 'id',
`province_name` STRING COMMENT '省市名称',
`iso_code` STRING COMMENT 'ISO-3166编码,供可视化使用',
`iso_3166_2` STRING COMMENT 'IOS-3166-2编码,供可视化使用',
)
insert into wm_dim.dim_e_fact_region_province values ('1','北京','CN-11','CN-BJ'),
('2','天津','CN-12','CN-TJ'),
('3','山西','CN-14','CN-SX'),
('4','内蒙古','CN-15','CN-NM'),
('5','河北','CN-13','CN-HE'),
('6','上海','CN-31','CN-SH'),
('7','江苏','CN-32','CN-JS'),
('8','浙江','CN-33','CN-ZJ'),
('9','安徽','CN-34','CN-AH'),
('10','福建','CN-35','CN-FJ'),
('11','江西','CN-36','CN-JX'),
('12','山东','CN-37','CN-SD'),
('14','台湾','CN-71','CN-TW'),
('15','黑龙江','CN-23','CN-HL'),
('16','吉林','CN-22','CN-JL'),
('17','辽宁','CN-21','CN-LN'),
('18','陕西','CN-61','CN-SN'),
('19','甘肃','CN-62','CN-GS'),
('20','青海','CN-63','CN-QH'),
('21','宁夏','CN-64','CN-NX'),
('22','新疆','CN-65','CN-XJ'),
('23','河南','CN-41','CN-HA'),
('24','湖北','CN-42','CN-HB'),
('25','湖南','CN-43','CN-HN'),
('26','广东','CN-44','CN-GD'),
('27','广西','CN-45','CN-GX'),
('28','海南','CN-46','CN-HI'),
('29','香港','CN-91','CN-HK'),
('30','澳门','CN-92','CN-MO'),
('31','四川','CN-51','CN-SC'),
('32','贵州','CN-52','CN-GZ'),
('33','云南','CN-53','CN-YN'),
('13','重庆','CN-50','CN-CQ'),
('34','西藏','CN-54','CN-XZ')
也可以参照我的表数据,建表
2.英文名称改成中文,搜索china.json文件,将文件中的NAME_1的值改为汉字
如果你是生产环境,docker部署的superset,那么你在 /usr/local/lib/python3.7/site-packages/superset/static/assets下面找到文件修改即可。
3.绘制地图,如下图
注意: ISO 3166-2 码大部分情况下我们数据真实数据没有的,如果要绘制有两种方案
方案一:手动将ISO 3166-2 插入到我们的数据库中,省对应码与源码ISO保持一致。
方案二:根据数据库唯一id,比如数据一般会存储province_id且是唯一的。
我们可以修改本地地图json文件,ISO对应的值和数据库保持一致即可,如下图
关注点:数据库省数据必须是全量数据,如果数据库没有省的数据展示默认省0即可,如果省份直接数据不存在会导致数据地图绘制有空白缺失问题。
9、如何将Superset图表通过iframe嵌入Html网页
首先,superset在导航栏有Embed code,这个iframe代码就是自己制作的图表:
以下是iframe设置的一些参数:
属性 | 描述 |
width | iframe的宽度 |
height | iframe的高度 |
name | iframe的名称 |
frameborder | 是否显示边框,0(不显示) 、1(显示) |
src | iframe的地址(页面/图片) |
scrolling | 是否在iframe中显示滚动条,属性值(yes ,no,auto) |
vspace | 设置或获取对象的水平边距 |
hspace | 设置或获取对象的垂直边距 |
然后将我们的iframe代码插入Html,以下案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>如何将Superset图表通过iframe嵌入Html网页</title>
<body>
<iframe
width="100%"
height="2000"
seamless
frameBorder="0"
scrolling="no"
src="http://10.7.14.6:9000/superset/dashboard/09d97c0d-ee02-40e8-ba38-4bc5ec583a86/?standalone=2&permalink_key=Mr9v6pzJQ7l"
>
</iframe>
</body>
</html>
但是我们发现,展示出来页面显示需要跨域以及需要登录,那么对于游客怎么能看到我们给分享的图表信息呢? 那么我们就要解决跨域以及免登陆问题
superset是默认进入图表的用户为public类型,因此我们需要游客访问的public类型有图表的访问权限。官方给了解决方案,按以下几个步骤。
如有配置有变动请参考官方文档:Security Configurations | Superset
1.修改superset_config.py配置文件,将PUBLIC_ROLE_LIKE 设置为Gamma。
PUBLIC_ROLE_LIKE = "Gamma"
讲给予public与gamma相同权限级,以后就可以在角色列表添加权限了。
2.去掉X-Frame-Options限制
HTTP_HEADERS = {'X-Frame-Options': ' ALLOWALL'}
将给予public与gamma相同权限级,以后就可以在角色列表添加权限了。
3. WTF_CSRF_ENABLED设置为False
WTF_CSRF_ENABLED = False
4.添加Public角色权限
加入权限
权限的具体解释说明,参考官方文档:superset/RESOURCES/STANDARD_ROLES.md at master · apache/superset · GitHub
效果如下
成功嵌入,YYDS! 欢迎在评论区交流。
如果文章对你有所帮助,❤️关注+点赞❤️鼓励一下!博主会持续更新。。。。
往期回顾
vue3.x使用prerender-spa-plugin预渲染达到SEO优化
vue3.x使用prerender-spa-plugin预渲染达到SEO优化