【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 将使用这个对象更新图表组件。
相关推荐
weixin_472339462 小时前
高效处理大体积Excel文件的Java技术方案解析
java·开发语言·excel
枯萎穿心攻击3 小时前
响应式编程入门教程第二节:构建 ObservableProperty<T> — 封装 ReactiveProperty 的高级用法
开发语言·unity·c#·游戏引擎
Eiceblue4 小时前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
m0_555762905 小时前
Matlab 频谱分析 (Spectral Analysis)
开发语言·matlab
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
烛阴6 小时前
简单入门Python装饰器
前端·python
lzb_kkk6 小时前
【C++】C++四种类型转换操作符详解
开发语言·c++·windows·1024程序员节
好开心啊没烦恼7 小时前
Python 数据分析:numpy,说人话,说说数组维度。听故事学知识点怎么这么容易?
开发语言·人工智能·python·数据挖掘·数据分析·numpy
面朝大海,春不暖,花不开7 小时前
使用 Python 实现 ETL 流程:从文本文件提取到数据处理的全面指南
python·etl·原型模式
简佐义的博客7 小时前
破解非模式物种GO/KEGG注释难题
开发语言·数据库·后端·oracle·golang