02.Python Dash网页开发:网页有哪些元素组成与数据流
undefined
网页有哪些元素组成
简单的网页仅有几个文字就能组成,但是Dash作为交互式数据分析APP,应该包括一下内容:
即.py
文件中的代码组成
- import 包
- theme 主题
- layout 页面布局
- callback 数据流动
import 包
这里展示的是最常用的库
import dash
from dash import html,dash_table,dcc,Input, Output
import dash_bootstrap_components as dbc
import plotly.express as px
import plotly.graph_objects as go
dcc和dbc提供一些核心组件(component),比如一个按钮、下拉菜单等;
html可以在里边写各级标题文字,也可以把dcc和dbc的组建放进html容器里;
Input, Output用于callbback里,即用户的输入和相应的输出;
dash_table是Dash提供的表格网页展示工具类似excel,有筛选功能;
px、go是Plotly的绘图库
注意:在dash更新后,html,dash_table,dcc,Input, Output等都可从dash直接导入,而不需要安装dash-core-components、dash-html-components、dash.dependencies
theme 主题
app = dash.Dash('__name__', external_stylesheets=[dbc.themes.BOOTSTRAP])
external_stylesheets参数可以选择css主题,也可以把下载好的主题放在asset文件加下,APP会自动使用相应主题。
layout 页面布局
把屏幕分为12列,通过设置component占多少列来设置宽度;
可以有多行,在代码中从上到下,在网页中也按从上到下的顺序显示。
如下所示,页面有两行,第一行有1列,宽度都是12,第二行分为3列,每列宽度是4(width=4)
row = html.Div(
[
dbc.Row(dbc.Col(html.Div("A single column"))),
dbc.Row(
[
dbc.Col(html.Div("One of three columns"),width=4),
dbc.Col(html.Div("One of three columns"),width=4),
dbc.Col(html.Div("One of three columns"),width=4),
]
),
]
)
实际上从dbc官网复制上边的代码,效果是这样的,没有任何排版样式。
可以设置主题为BOOTSTRAP
,再调节class_name从而调节css样式
html.Div(
[
dbc.Row(dbc.Col(html.Div("A single, half-width column"), width=6),class_name='bg-primary'),
dbc.Row(
dbc.Col(html.Div("An automatically sized column"), width="auto",class_name='bg-secondary')
),
dbc.Row(
[
dbc.Col(html.Div("One of three columns"), width=3,class_name='bg-danger text-center'),
dbc.Col(html.Div("One of three columns"),class_name='bg-info'),
dbc.Col(html.Div("One of three columns"), width=3,class_name='bg-dark text-white'),
],
class_name='mt-5'
),
]
)
其中class_name
可以设置背景颜色比如bg-primary
,这个primary会因为不同的theme而不同,class_name
还可以设置字体颜色text-white
,字体居中text-center
,行间距mt-5
等等。
更多详细的调节需要到boostrap官网查看https://getbootstrap.com/docs/5.2/getting-started/introduction/
callback 数据的流动
callback是DASH网站交互的核心,控制着数据的流动.
以下是一个简单的,交互式APP,我们输入字符
,网站立刻返回 hello 字符
。
from dash import Dash, dcc, html, Input, Output
app = Dash(__name__)
app.layout = html.Div([
html.H6("Change the value in the text box to see callbacks in action!"),
html.Div([
"Input: ",
dcc.Input(id='my-input', value='王', type='text')
]),
html.Br(),
html.Div(id='my-output'),
])
@app.callback(
output = Output(component_id='my-output', component_property='children'),
inputs = Input(component_id='my-input', component_property='value')
)
def update_output_div(input_value):
return f'Output: {input_value}'
if __name__ == '__main__':
app.run_server(debug=True)
数据的流动:
每个component都有一个id,id是独一无二的代表这个component,在@app.callback的inputs中,id为my-input的component的value输入到update_output_div函数中,之后函数返回结果到output中的id为my-output的component的children中。
dcc.Input(id='my-input', value='王', type='text')
中的value默认值为'王'
,当在网页中输入新的字符后,value的值也会更新,更新后的value值传入update_output_div函数,返回的结果传递到my-output的children中,从而在网页中显示出来。
输入和输出可以是多个,output、inputs可以接受列表参数。
而且可以看到update_output_div(input_value)
中的参数是 input_value
,而不是component_property='value'
中的value
,因此当有多个输入时,应该按照顺序在update_output_div
中传参数。
@app.callback是一个装饰器,一般情况下接受 一个函数 返回 某种操作后的函数。
DASH默认的端口是8050,因此可以在浏览器中通过http://127.0.0.1:8050/访问本地网页。
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的