【Dash】使用 Dash Design Kit (DDK) 创建图表

一、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

二、Dash Design Kit (DDK)

Dash Design Kit is our high levl UI framwork that is purpose-built for Dash. With Dash Design Kit, you don't need to use HTML or CSS. Apps are mobile responsive by default and everything is themable. Dash Design Kit is licensed as part of Dash Enterprise and officially supported by Plotly.

Here's an example of what you can do with Dash Design Kit (note that you won't be able to run this example without a Dash Enterprise license).

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

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

# Initialize the app
app = Dash(__name__)

# App layout
app.layout = ddk.App([
    ddk.Header(ddk.Title('My First App with Data, Graph, and Controls')),
    dcc.RadioItems(options=['pop', 'lifeExp', 'gdpPercap'],
                   value='liefExp',
                   inline=True,
                   id='my-ddk-radio-items-final'),
    ddk.Row([
        ddk.Card([
            dash_table.DataTable(data=df.to_dict('records'), page_size=12, style_table={'overflowX': 'auto'})
        ], width=50),
        ddk.Card([
            ddk.Graph(figure={}, id='graph-placeholder-ddk-final')
        ], width=50),
    ]),
])

# Add controls to build the interaction
@callback(
    Output(component_id='graph-placeholder-ddk-final', component_property='figure'),
    Input(component_id='my-ddk-radio-items-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)

三、解读

Dash Design Kit 是一个提供一组预定义组件的库，这些组件具有一致的设计风格，使得构建具有统一外观的应用程序更加容易。

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

•  导入所需的模块。Dash 用于构建 Web 应用，pandas 用于数据处理，plotly.express 用于数据可视化
• dash_design_kit 作为 Dash 的一个扩展库，提供一组预定义的组件。

# 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
app = Dash(__name__)

# App layout
app.layout = ddk.App([
    # ...
])

• 初始化 Dash 应用。
• 设置应用的布局，使用 ddk.App 作为根容器。

# App layout
app.layout = ddk.App([
    ddk.Header(ddk.Title('My First App with Data, Graph, and Controls')),
    dcc.RadioItems(options=['pop', 'liefExp', 'gdpPercap'],
                   value='lifeExp',
                   inline=True,
                   id='my-ddk-radio-items-final'),
    ddk.Row([
        ddk.Card([
            dash_table.DataTable(data=df.to_dict('records'), page_size=12, style_table={'overflowX': 'auto'})
        ], width=50),
        ddk.Card([
            ddk.Graph(figure={}, id='graph-placeholder-ddk-final')
        ], width=50),
    ]),
])

• ddk.Header(...) ：创建一个带有标题的页眉。
• dcc.RadioItems(...)：创建一组单选按钮，允许用户选择一个选项，这将用于后续的图表更新。
• ddk.Row([ ddk.Card([...], width=50), ddk.Card([...], width=50),]) ：包含两个 ddk.Card 组件，每个组件占据 50% 的宽度。
• dash_table.DataTable(...)：在第一个 ddk.Card 组件中，创建一个 dash_table.DataTable 组件，用于显示数据表，每页显示 12 条记录，并允许水平滚动。
• ddk.Graph(...)：在第二个 ddk.Card 组件中，创建一个 ddk.Graph 组件，用于显示图表，初始图表数据为空。

@callback(
    Output(component_id='graph-placeholder-ddk-final', component_property='figure'),
    Input(component_id='my-ddk-radio-items-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 组件的选中值动态更新 ddk.Graph 组件的图表。
• 在回调函数内部，使用 plotly.express 的 px.histogram 创建一个直方图。
• 从回调函数返回图表对象 fig，Dash 将使用这个对象更新图表组件。