Dash Bootstrap Templates 使用指南

Dash Bootstrap Templates 使用指南

dash-bootstrap-templatesA collection of 52 Plotly figure templates with a Bootstrap theme. Two theme switch components. Stylesheet to apply Bootstrap themes to Plotly Dash components.项目地址:https://gitcode.com/gh_mirrors/da/dash-bootstrap-templates

项目介绍

Dash Bootstrap Templates 是一个针对 Plotly Dash 框架的扩展库，它集成了 Bootstrap 主题风格的 Plotly 图表模板。该库为开发者提供了丰富的 Bootstrap 和 Bootswatch 主题选项，共计 26 种，来美化你的数据可视化图表。通过这个工具包，你可以轻松地将图表与 Bootstrap 的色彩和字体风格统一起来。此外，从版本 1.1 开始，每个主题都支持暗黑模式。此库还包含了 ThemeSwitchAIO 和 ThemeChangerAIO 组件以及 dbc CSS 样式表，用于在 Dash 应用中切换或选择主题，并自动样式化 Dash Core Components 和 DataTable。

项目快速启动

要开始使用 Dash Bootstrap Templates，首先确保你的环境中安装了必要的依赖项，然后按照以下步骤进行：

pip install dash-bootstrap-templates

安装完成后，简单演示如何加载主题并应用到你的 Dash App 中：

import dash
from dash import Dash, html, dcc
import dash_bootstrap_components as dbc
from dash_bootstrap_templates import load_figure_template
import plotly.express as px

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

# 加载所有可用的模板
load_figure_template(["bootstrap", "minty", "pulse", ...]) # 列出你想加载的所有主题

df = px.data.gapminder()
fig = px.scatter(df, x="gdpPercap", y="lifeExp", color="continent", size="pop",
                 title="Life Expectancy vs. GDP per Capita (2007)",
                 log_x=True, size_max=60, template="bootstrap") # 这里使用了 "bootstrap" 主题

app.layout = dbc.Container([
    html.H1("示例图表"),
    dcc.Graph(figure=fig)
])

if __name__ == '__main__':
    app.run_server(debug=True)

这段代码展示了如何加载模板并在 Scatter 图上应用 Bootstrap 主题。

应用案例和最佳实践

当你想要一致地应用某种Bootstrap主题给整个App时，可以通过设置默认模板来简化代码，避免在每次创建 Plotly 图形时重复指定模板。例如：

load_figure_template(list_of_desired_templates)
px.set_template(default_template_name)

这样，在不显式指定模板的情况下，Plotly Express 将使用你设定的默认模板。

典型生态项目

尽管本项目专注于提升 Dash 和 Plotly 数据可视化界面的美观度和一致性，但它与 Dash 的生态系统紧密相连，特别是与Dash Bootstrap Components相辅相成。通过结合使用这些组件，可以构建既美观又功能强大的交互式数据分析应用。例如，利用ThemeSwitchAIO或ThemeChangerAIO组件，用户能够在运行的应用中动态切换Bootstrap主题，这在多用户环境或者希望提供个性化视觉体验的场景下尤其有用。

---

本教程仅为你入门 Dash Bootstrap Templates 提供基础指导。更多高级用法和定制化技巧可参考官方文档和社区论坛。通过实际项目实践，你将更加熟练地掌握这一强大工具，为你的数据应用增添更多风采。

dash-bootstrap-templatesA collection of 52 Plotly figure templates with a Bootstrap theme. Two theme switch components. Stylesheet to apply Bootstrap themes to Plotly Dash components.项目地址:https://gitcode.com/gh_mirrors/da/dash-bootstrap-templates