【Dash】使用 HTML 和 CSS 创建图表

一、Styling Your App

The examples in the previous section used Dash HTML Components to build a simple app layout, but you can style your app to look more professional. This section will give a brief overview of the multiple tools that you can use to enhance the layout style of a Dash app:

HTML and CSS
Dash Design kit (DDK)
Dash Bootstrap Components
Dash Mantine Components

二、HTML and CSS

HTML and CSS are the lowest level of interface for rendering content on the web. The HTML is a set of components, and CSS is a set of styles applied to those components. CSS styles can be applied within components via the style property, or they can be defined as a separate CSS file in reference with the className property.

# Import packages
from dash import Dash, html, dash_table, dcc, callback, Output, Input
import pandas as pd
import plotly.express as px

# Incorporate data
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')

# Initialize th app - incorporate css
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = Dash(external_stylesheets=external_stylesheets)

# App layout
app.layout = html.Div([
    html.Div(className='row', children='My First App with Data, Graph, and Controls',
             style={'textAlign': 'center', 'color': 'blue', 'fontSize': 30}),

    html.Div(className='row', children=[
        dcc.RadioItems(options=['pop', 'lifeExp', 'gdpPercap'],
                       value='lifeExp',
                       inline=True,
                       id='my-radio-buttons-final')
    ]),

    html.Div(className='row', children=[
        html.Div(className='six columns', children=[
            dash_table.DataTable(data=df.to_dict('records'),
                                 page_size=11,
                                 style_table={'overflowX': 'auto'})
        ]),
        html.Div(className='six columns', children=[
            dcc.Graph(figure={}, id='histo-chart-final')
        ])
    ])
])


# Add controls to build the interaction
@callback(
    Output(component_id='histo-chart-final', component_property='figure'),
    Input(component_id='my-radio-buttons-final', component_property='value')
)
def update_graph(col_chosen):
    fig = px.histogram(df, x='continent', y=col_chosen, histfunc='avg')
    return fig


# Run the app
if __name__ == '__main__':
    app.run(debug=True)

三、解读

# Import packages
from dash import Dash, html, dash_table, dcc, callback, Output, Input
import pandas as pd
import plotly.express as px
导入所需 Python 包。 Dash 用于创建 Web 应用，pandas 用于数据处理，plotly.express 用于快速生成图表。

# Incorporate data
df = 
pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
使用 pandas 的 read_csv 函数读取URL的csv数据文件，加载到 DataFrame df。

# Initialize the app - incorporate css
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = Dash(external_stylesheets=external_stylesheets)
初始化 Dash 应用，并提供一个外部 CSS 文件的链接，该 CSS 将被用于应用的样式。

# App layout
app.layout = html.Div([
    # ..... Layout components
])
设置应用的布局，使用 html.Div 作为根容器。

html.Div(className='row', children='My First App with Data, Graph, and controls',
        style={'textAlign': 'center', 'color': 'blue', 'fontSize': 30}),
创建一个包含文本的 div 容器，使用 className 指定一个 CSS 类，使用 style 属性直接设置样式。（文本居中，蓝色，字体大小30）

html.Div(className='row', children=[
    dcc.RadioItems(options=['pop', 'lifeExp', 'gdpPercap'],
                    value='lefeExp',
                    inline=True,
                    id='my-radio-buttons-final')
]),
创建一个包含单选按钮的 div 容器（dcc.RadioItems()）。
使用 className 指定 CSS 类，children 包含 dcc.RadioItems 组件。
className='row' ：给 dvi 元素添加一个或多个 CSS 类。这些类通常在 CSS 央视表中定义，用于控制元素的布局和外观。这里表示子元素水平排列。
children=[...]：是一个列表，包含要放在 dvi 容器内的组件，在 Dash 中，children 参数可以是单个组件或组件列表，用于定义组件的嵌套结构。
options=['pop', 'lifeExp', 'gdpPercap']：包含单选按钮组的选项，每个字符串代表一个选项的标签，用户可以从中选择。
value='leftExp' ：指定单选按钮组的初始值。
inline=True：这个布尔值参数决定单选按钮是否应该内联显示（即水平排列）。如果设置为 True 则按钮会水平排列；如果为 False 或省略则按钮会垂直排列。
id='my-radio-buttons-final'：是组件的唯一标识符，用于在应用的布局和回调函数中引用和这个组件，ID 在 Dash 应用中是必须的，用于控制交互和动态更新。

html.Div(className='row', children=[
    html.Div(className='six columns', children=[
        dash_table.DataTable(data=df.to_dict('records'), page_size=11, style_table={'overflowX': 'auto'})
    ]),
    
    html.Div(className='six columns', children=[
        dcc.Graph(figure={}, id='histo-char-final')
    ])
])
创建一个包含两列的 div 容器，通常用于构建栅格布局，每列由 html.Div 组件表示，并且各自包含不同的组件。
一个是 dash_table.DataTable 组件，用于显示数据表
另一个是 dcc.Graph 组件，用于显示图表。

外层 html.Div 参数 html.Div(className='row', children=[...])

className='row'：指定 CSS 类名，用于定义这个 div 容器的样式。在很多前段框架中（如 Bootstrap 或 Foundation），'row' 类用于创建一个行容器，其子元素将水平排列。
children=[...] 列表：包含要放在当前 div 容器内的子组件。这里包含两个子组件 html.Div。

子组件 html.Div 参数：
html.Div(className='six columns', children=[
    dash_table.DataTable(data=df.to_dict('records'), page_size=11,
                        style_table={'overflowX': 'auto'})
]),
第一个子组件
className='six columns'：指定 CSS 类名，通常用于定义这个 div 容器占据的栅格列数。在栅格系统中，这可能表示该容器占据六列，具体解释取决于 CSS 框架或自定义样式的定义。
children：包含一个 dash_table.DataTable 组件，用于显示数据表。
html.Div(className='six columns', children=[
    dcc.Graph(figure={}, id='histo-chart-final')
])
第二个子组件
className='six columns'：同上，表示这个 div 容器占据六列。
children：包含一个 dcc.Graph 组件，用于显示图表。

dash_table.DataTable 参数：

data=df.to_dict('records')：指定要显示在数据表中的数据，这里使用 pandas DataFrame 的 to_dict('records') 方法将数据转换为字典列表。
page_size=11：指定数据表每页显示的行数。
style_table={'overflowX': 'auto'}：指定表格的内联格式。这里设置 overflowX 为 'auto'，意味着如果表格内容超出容器宽度，将显示水平滚动条。

dcc.Graph 参数：

figure={}：指定图表的数据和配置。这里设置为空字典，意味着图表初始时没有数据。
id='histo-chart-final' ：指定图表的唯一标识符，用在回调函数中引用这个图表组件。

# Add controls to build the interacion
@callback(
    Output(component_id='histo-chart-final', component_property='figuure'),
    Input(component_id='my-radio-buttons-final', component_property='value')
)
def update_graph(col_chosen):
    fig = px.histogram(df, x='continent', y=col_chosen, histfunc='avg')
    return fig
)
定义一个回调函数 update_graph，根据 dcc.RadioItems 组件的选中值动态更新 dcc.Graph 组件的图表。
@callback 是一个装饰器，用于注册一个回调函数，定义应用中的交互逻辑。
def update_graph(col_chosen)：这一行定义了回调函数本身，update_graph 是函数名，col_chosen是函数的参数名，代表从 Input 属性传递回调函数的值。
fig = px.historgram(...)：使用 plotly.express 的 px.histogram 创建一个直方图。
从回调函数中返回对象 fig，Dash 将使用这个对象更新图表组件。

# Run the app
if __name__ == '__main__':
    app.run(debug=True)
启动 Dash 应用服务，并开启调试模式。