返回

superset二次开发看板渲染为深色大屏的指南

前端

引言
Superset是一个流行的开源数据可视化平台,它提供了丰富的数据可视化功能,包括看板渲染。看板是一种常用的数据展示方式,它可以帮助用户快速了解数据分布和趋势。但是,在某些情况下,用户可能需要将看板渲染为深色大屏以满足特定需求。本文将介绍如何在Superset中通过二次开发实现看板渲染为深色大屏。

准备工作
在开始开发之前,我们需要完成一些准备工作:

  1. 确保您已经安装了Superset并配置好了数据源。
  2. 准备一个文本编辑器,用于编辑CSS模板。
  3. 熟悉Superset的模板系统。

步骤一:修改CSS模板

  1. 找到Superset安装目录下的static/superset/css/dashboard.css文件。
  2. 在文件中找到以下代码:
.card-block {
    background-color: #ffffff;
    border-color: #cccccc;
}
  1. 将背景颜色修改为黑色,边框颜色修改为白色:
.card-block {
    background-color: #000000;
    border-color: #ffffff;
}
  1. 保存修改后的CSS模板。

步骤二:修复文本颜色
在修改CSS模板后,您可能会发现看板中的文本颜色也变成了黑色。为了解决这个问题,我们需要修改Superset的模板系统。

  1. 找到Superset安装目录下的superset/templates/superset/dashboard/dashboard.html文件。
  2. 在文件中找到以下代码:
<div class="card-block">
    {% block header %}{% endblock %}
    <div class="dashboard-wrapper">
        {% block content %}{% endblock %}
    </div>
</div>
  1. <div class="card-block">替换为<div class="card-block text-white">
<div class="card-block text-white">
    {% block header %}{% endblock %}
    <div class="dashboard-wrapper">
        {% block content %}{% endblock %}
    </div>
</div>
  1. 保存修改后的模板文件。

步骤三:测试效果
修改CSS模板和模板文件后,我们需要测试一下效果。

  1. 重新启动Superset。
  2. 访问Superset并创建一个新的看板。
  3. 将看板渲染为深色大屏。

如果一切顺利,您应该可以看到一个深色大屏的看板,其中文本颜色是白色的。

总结
通过以上步骤,我们已经成功地在Superset中实现了看板渲染为深色大屏。希望本文对您有所帮助。