生信探索

V1

2023/02/04阅读:29主题:姹紫

02.Python Dash网页开发:网页有哪些元素组成与数据流

网页有哪些元素组成

简单的网页仅有几个文字就能组成,但是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/访问本地网页。

分类:

后端

标签:

后端

作者介绍

生信探索
V1

微信公众号:生信探索