前军教程网

模块 dash.html 包含所有 HTML 标签, 可以用其设置文本及背景颜色.

模块 dash.dcc 包含交互的高级组件.

1. 代码

import pandas as pd
import plotly.express as px
from dash import Dash, html, dcc

app = Dash()     # 初始化 Dash

# 预设样式
colors = {
    'background': '#7fffec',     # 背景颜色
    'text':       '#7FDBFF'      # 文字颜色
}

df = pd.DataFrame({'x': [1, 2, 3], 'SF': [4, 1, 2], 'Montreal': [2, 4, 5]})  # 原始数据： 'SF'和'Montreal'
fig = px.bar(df, x='x', y=['SF', 'Montreal'], barmode='group')                # 柱状图

# 更新柱状图样式： 设置背景颜色及文本颜色
fig.update_layout(
    plot_bgcolor=colors['background'],
    paper_bgcolor=colors['background'],
    font_color=colors['text']
)

app.layout = html.Div(
    style={'backgroundColor': colors['background']},    # 设置全局样式
    children=[
        html.H1(
            children='Hello Dash',
            style={
                'textAlign': 'center',                 # 文本对齐方式
                'color': colors['text']                # 文本内容
            }
        ),

        html.Div(
            children='Dash: 一款Python web应用框架',
            style={
                'textAlign': 'center',                 # 文本对齐方式
                'color': colors['text']                # 文本内容
            }
        ),

        dcc.Graph(
            id='dash-example-graph-colored',
            figure=fig
        )
    ])

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

2. 结果