【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 将使用这个对象更新图表组件。
相关推荐
EutoCool5 分钟前
Qt:布局管理器Layout
开发语言·c++·windows·嵌入式硬件·qt·前端框架
Cyanto39 分钟前
Spring注解IoC与JUnit整合实战
java·开发语言·spring·mybatis
在努力的韩小豪41 分钟前
如何从0开始构建自己的第一个AI应用?(Prompt工程、Agent自定义、Tuning)
人工智能·python·llm·prompt·agent·ai应用·mcp
写不出来就跑路1 小时前
WebClient与HTTPInterface远程调用对比
java·开发语言·后端·spring·springboot
悠哉清闲1 小时前
C++ MediaCodec H264解码
开发语言·c++
张人玉1 小时前
c#中Random类、DateTime类、String类
开发语言·c#
Jinkxs2 小时前
JavaScript性能优化实战技术
开发语言·javascript·性能优化
Otaku love travel2 小时前
实施运维文档
运维·windows·python
测试老哥2 小时前
软件测试之单元测试
自动化测试·软件测试·python·测试工具·职场和发展·单元测试·测试用例
ydm_ymz3 小时前
C语言初阶4-数组
c语言·开发语言