superset 二次开发之看板渲染为深色大屏（图表文字颜色更改）

最新推荐文章于 2024-09-13 19:42:58 发布
最新推荐文章于 2024-09-13 19:42:58 发布
阅读量5.2k 收藏 10
点赞数 4
分类专栏： 前端 样式 工具 文章标签： css python html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013278374/article/details/120061935
版权
教程介绍了如何在Superset 1.3版本中进行二次开发，实现深色背景的BI大屏看板。通过修改CSS模板解决了图表图形颜色问题，但遇到SVG和Canvas中文字颜色不变的挑战。通过深入源码，发现ECharts是图表渲染关键，并通过调整ECharts配置实现文字颜色变化，最终成功创建深色大屏。然而，这种方式存在部署和颜色灵活性的问题，需要进一步研究解决方案。
摘要由CSDN通过智能技术生成

公司在对superset进行二次开发，由于superset没有高大上的深色背景模式，而现在的潮流都是深色bi大屏看板，便需要调整看板的样式，所以教程来咯~

版本

superset1.3

实现步骤

  • 直接通过css模板修改在这里插入图片描述

你会发现你更改后，看板变成下面这黑乎乎的模样，总觉得哪里怪怪的，怪就怪在图表的文字还是黑的。。。
在这里插入图片描述
然后你就开始翻文档，发现配色方案和label_colors这两个参数可能能实现这种效果😀
在这里插入图片描述
当你用这两个参数配了一波之后，实现结果如下👇，文字颜色纹丝不动，改的

最低0.47元/天 解锁文章
Linda小东东
关注
专栏目录
superset css自定义样式
流风雨情的博客
06-28 4190
body { background-color: #fff; } header { border-bottom: 2px solid #eee; } .navbar { margin-bottom: 0; } /* 条件搜索区域样式 */ .widget.filter_box .slice_container.filter_box .scrollbar-content { display: flex; flex-wrap: wrap; } .widget.fi
superset二次开发及汉化、图标等
qq_34521526的博客
05-12 6469
superset 二次开发 一. 集成echarts图表，二次开发。 superset版本0.36.0，echarts版本4.7.0。 0.36.0版本是比较新的版本，代码结构相比 0.30以前的改动还是比较大的，主要是前端的代码结构变化比较大， superset 把前端的插件单独放在一个superset-ui的项目中；superset中的前端代码主要放在superset-frontend的目录中. 以集成echarts柱状折线图 mix-line-bar为例。 主要修改的地方： 1. superset-.
资源获取:自定义SuperSet CSS模板
Zznxz0601的博客
01-04 2291
目前SuperSet CSS版本0.38.0(跟版本无关，只是声明一下)； 因为对前端不熟悉，且网上资源实在匮乏； 求好看的自定义SuperSet CSS模板或者有关SuperSet CSS的参考网址~
Superset二次开发之源码 run-server.sh 分析
最新发布
Aimmon
09-13 1026
这段命令通过 Gunicorn 启动一个 Flask 应用，配置了多种参数以优化性能和日志记录。通过使用环境变量，用户可以灵活地调整服务器的行为，适应不同的部署需求。整体上，这段命令为 Superset 提供了一个可扩展和高效的运行环境。
SupersetBI添加自定义Echarts图像、控件
m0_63112723的博客
09-12 1176
SupersetBi自定义添加图表、控件、api
Superset二次开发之修改Docker容器env 参数
Aimmon
09-10 394
基于Superset3.0版本在Linux服务器部署Docker版本的Superset项目，配置了Redis地址为A，项目运行许久，查询性能一直很缓慢，今日打算解决，忽发现，防火墙一直开启着。然，Redis对应的地址变成了B。Superset服务异常Connection refused。docker inspect 容器ID。docker restart 容器ID。docker stop 容器ID。
superset dashboard模块新增背景色样式
无一技之长
06-06 3097
编辑superset的dashboard时，可以选择行或者列，或者部分区域的背景色，自带的只有两种：透明和白色，如下图：有时候不能满足需求，可以新增自己的样式，比如增加红色（其他样色类似），具体操作步骤如下：1、添加css样式类a）superset-frontend\src\dashboard\stylesheets\builder.less b）superset-frontend\src\dashboard\stylesheets\popover-menu.less 2、修改js文件，增加样式选项
Superset（5）：Superset Dashboards看板展示实战
u013938578的博客
01-24 1350
4 将你之前的图表拖到看板合适的位置,并调整大小。2 拖动之前开发好的Charts到看板中。1 点击Dashboards>添加看板。将之前设计好的图标整合到看板中。3 点击选择你的图表。
Superset 二次开发
又是再见?
11-16 8511
持续更新。。。 2019/2/24  项目已暂时停止。 版本： 0.19.0 一、前端   dashboard 中table 分页组件、搜索组件汉化，在项目中始终搜索不到类似的关键字， 后端返回数据中也没有 ==> 使用的是datatables表格组件， 在初始化的时候 $（'datatable'）.DataTables({}) 中增加language配置项； dashboard...
Apache Superset 二次开发
热门推荐
05-31 1万+
基本概念 　Superset 是 Airbnb 开源的一个旨在视觉，直观和交互式的数据探索平台（曾用名 Panoramix、Caravel，现已进入 Apache 孵化器） 基础组件 Flask 　Python 几大著名 Web 框架之一，以其轻量级, 高可扩展性而著名 Jinja2 模板引擎 Werkzeug WSGI 工具集 Gunicorn 　Gunico...
Superset二次开发之权限体系梳理
Aimmon
07-25 1496
在Superset 3.0版本中，权限体系的设计主要包括以下几个核心概念：用户(User)、角色(Role)、权限(Permission) 和视图(View)。
Superset二次开发之优化表格图表排序功能
Aimmon
09-11 773
如果表格数据含有中文和汉字（eg.第1梯队）,点击排序图标进行排序时，会发生排序混乱（第10梯队排在了第1梯队下面）
Superset二次开发之新增复选框Checkbox筛选器
Aimmon
09-08 826
Superset目前支持的筛选类型：值、数值范围、时间列、时间粒度、时间范围 5种类型，显然无法满足业务需求。根据产品需要，需要支持复选框、单选框、级联选择等类型的筛选器。目录 superset-frontend\src\filters\components，新增CheckBox 文件夹。' 筛选器模块，然后看板筛选器渲染时，修改为Checkbox 组件。定义了 CheckboxPlugin 类，这是插件的入口点。转换从 Superset 传入的属性，以适应插件的需求。定义了插件使用的各种类型和接口。
Superset二次开发之Legend功能优化
Aimmon
05-05 734
加入"legendTextHiding,"Legend数据太长，影响整体图表体验，为改善用户体验，需要实现：1.数据省略展示，‘...’表示，鼠标悬停时，展示完整信息 2:文本内容从左向右滚动展示。做成组件的配置，如果为空、0、超过了文本最大长度等，显示完整文本，否则开启文本省略模式。1. getLegendProps函数添加legendTextHiding 参数元素。2.getLegendProps函数添加legendTextHiding 参数元素。2. formatter逻辑优化。
Superset dashboard看板加载性能优化
qq_45308101的博客
02-07 899
Superset dashboard看板加载性能优化
superset详解(七)--报表/看板权限
python_tty的专栏
03-01 7695
报表权限 看板权限
Superset二次开发之Dashboard状态变更源码解读
Aimmon
07-25 892
在Superset项目中，Redux 被用作状态管理库，以集中管理应用程序的状态。Redux 以其可预测性和一致性而著称，适用于复杂的应用场景，比如Superset这样的数据分析平台。
数据分析进阶-superset框架内容修饰
Totoro1745的博客
03-14 1072
APP icon 上传logo 然后修改config.py # Uncomment to setup an App icon APP_ICON = "/static/assets/images/logo.png" APP_ICON_WIDTH = 70 修改favicon.png 浏览器上的图标 models/core.py grep -nr ...
Superset二次开发--添加新图例
MK_chan的博客
02-13 1万+
superset安装和环境配置网上都有现成的例子，此处就不赘述了。不过还是顺便说下我是git clone的源码安装的。发布的版本是0.28.1 。运行系统为linux，Windows的话有一些坑，github或者别的博客都有说解决方法，我这里也不赘述了。 在二次开发部分，网上并没有太多新的内容。最简单来说，添加新的图。网上给的例子，在当前版本的superset中都已经不支持了，连项目目录结构都变...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值