网页有哪些元素组成
简单的网页仅有几个文字就能组成，但是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([
"输入是: ",
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):
returnf'输出是: {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/访问本地网页。
网友评论