模块 dash.html 包含所有 HTML 标签, 可以用其设置文本及背景颜色.
模块 dash.dcc 包含交互的高级组件.
- 代码
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)