HoRain云--Dash 核心组件

HoRain 云小助手

326人浏览 · 2026-03-18 09:45:00

HoRain 云小助手 · 2026-03-18 09:45:00 发布

🎬 HoRain 云小助手：个人主页

⛺️生活的理想，就是为了理想的生活!

⛳️ 推荐

前些天发现了一个超棒的服务器购买网站，性价比超高，大内存超划算！忍不住分享一下给大家。点击跳转到网站。

Dash 的核心组件是构建应用程序的基础，它们允许你创建用户界面并与数据进行交互。

Dash 通过 dash.html 和 dash.dcc 模块，你可以轻松地创建用户界面并与数据进行交互。

从 Dash 2.0 版本开始，dash_html_components 和 dash_core_components 已经被整合到 dash 主包中。

现在推荐直接从 dash 中导入 html 和 dcc，而不是使用旧的 dash_html_components 和 dash_core_components。

Dash 核心组件概述

Dash 的核心组件可以分为两大类：dash.html 和 dash.dcc。dash.html 提供了 HTML 标签的 Python 封装，而 dash.dcc 则提供了更高级的交互式组件，如滑块、下拉菜单、图形等。

1. `dash.html` 组件

dash.html 模块提供了与 HTML 标签对应的 Python 类。这些类允许你以 Python 的方式编写 HTML 代码。例如，dash.html.Div 对应 HTML 的 <div> 标签，dash.html.H1 对应 <h1> 标签。

实例

import dash
import dash.html as html

app = dash.Dash(__name__)

app.layout = html.Div([
    html.H1('欢迎来到 Dash 世界'),
    html.P('这是一个简单的段落。'),
    html.Div([
        html.Span('这是 Span 1'),
        html.Span('这是 Span 2')
    ])
])

if __name__ == '__main__':
    app.run_server(debug=True)

dash.html 组件使得编写 HTML 结构变得非常简单和直观。

以上代码中，我们创建了一个包含标题、段落和两个 Span 元素的 Div 容器。

2. `dash.dcc` 组件

dash.dcc 模块提供了更高级的交互式组件，这些组件通常用于数据可视化和用户输入。常见的 dash.dcc 组件包括 Graph、Dropdown、Slider 等。

示例代码

实例

import dash
import dash.html as html
import dash.dcc as dcc

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'RUNOOB'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': 'GOOGLE'},
            ],
            'layout': {
                'title': 'Dash 数据可视化'
            }
        }
    ),
    dcc.Dropdown(
        id='example-dropdown',
        options=[
            {'label': '选项 1', 'value': '1'},
            {'label': '选项 2', 'value': '2'},
            {'label': '选项 3', 'value': '3'}
        ],
        value='1'
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)

在这个示例中，我们创建了一个包含柱状图和下拉菜单的布局。dcc.Graph 组件用于显示数据可视化图表，而 dcc.Dropdown 组件则允许用户从下拉菜单中选择选项。

核心组件的属性

每个 Dash 组件都有一些属性，这些属性用于控制组件的外观和行为。例如，dash.html.Div 的 children 属性用于指定其子元素，dash.dcc.Graph 的 figure 属性用于指定图表的数据和布局。

常用属性

children: 用于指定组件的子元素。大多数组件都有这个属性。
id: 用于唯一标识组件，通常在回调函数中使用。
style: 用于设置组件的 CSS 样式。
className: 用于指定组件的 CSS 类名。

示例代码

实例

import dash
import dash.html as html

app = dash.Dash(__name__)

app.layout = html.Div(
    children=[
        html.H1('这是一个标题', style={'color': 'blue', 'fontSize': 40}),
        html.P('这是一个段落', className='my-class')
    ],
    style={'backgroundColor': '#f0f0f0'}
)

if __name__ == '__main__':
    app.run_server(debug=True)

以上代码中，我们使用 style 属性来设置标题的颜色和字体大小，并使用 className 属性为段落指定了一个 CSS 类名。