HoRain云--Dash 核心组件

HoRain 云小助手个人主页⛺️生活的理想就是为了理想的生活!⛳️ 推荐前些天发现了一个超棒的服务器购买网站性价比超高大内存超划算忍不住分享一下给大家。点击跳转到网站。目录⛳️ 推荐Dash 核心组件概述1. dash.html 组件实例2. dash.dcc 组件示例代码实例核心组件的属性常用属性示例代码实例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(debugTrue)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( idexample-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( idexample-dropdown, options[ {label: 选项 1, value: 1}, {label: 选项 2, value: 2}, {label: 选项 3, value: 3} ], value1 ) ]) if __name__ __main__: app.run_server(debugTrue)在这个示例中我们创建了一个包含柱状图和下拉菜单的布局。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(这是一个段落, classNamemy-class) ], style{backgroundColor: #f0f0f0} ) if __name__ __main__: app.run_server(debugTrue)以上代码中我们使用style属性来设置标题的颜色和字体大小并使用className属性为段落指定了一个 CSS 类名。❤️❤️❤️本人水平有限如有纰漏欢迎各位大佬评论批评指正如果觉得这篇文对你有帮助的话也请给个点赞、收藏下吧非常感谢! Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧