【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 应用服务，并开启调试模式。