【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).

python 复制代码
# 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 是一个提供一组预定义组件的库,这些组件具有一致的设计风格,使得构建具有统一外观的应用程序更加容易。

python 复制代码
# 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 的一个扩展库,提供一组预定义的组件。
python 复制代码
# Incorporate data
df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv')
  • 使用 pandas 的 read_csv 函数从 URL 中加载CSV数据文件到 DataFrame df 中。
python 复制代码
# Initialize the app
app = Dash(__name__)

# App layout
app.layout = ddk.App([
    # ...
])
  • 初始化 Dash 应用。
  • 设置应用的布局,使用 ddk.App 作为根容器。
python 复制代码
# 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 组件,用于显示图表,初始图表数据为空。
python 复制代码
@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 将使用这个对象更新图表组件。
相关推荐
数据智能老司机6 小时前
精通 Python 设计模式——分布式系统模式
python·设计模式·架构
数据智能老司机7 小时前
精通 Python 设计模式——并发与异步模式
python·设计模式·编程语言
数据智能老司机7 小时前
精通 Python 设计模式——测试模式
python·设计模式·架构
数据智能老司机7 小时前
精通 Python 设计模式——性能模式
python·设计模式·架构
c8i7 小时前
drf初步梳理
python·django
每日AI新事件7 小时前
python的异步函数
python
这里有鱼汤8 小时前
miniQMT下载历史行情数据太慢怎么办?一招提速10倍!
前端·python
databook17 小时前
Manim实现脉冲闪烁特效
后端·python·动效
程序设计实验室18 小时前
2025年了,在 Django 之外,Python Web 框架还能怎么选?
python
倔强青铜三19 小时前
苦练Python第46天:文件写入与上下文管理器
人工智能·python·面试