关于Python可视化Dash工具-dash核心组件和html组件

关于Python可视化Dash工具,不能不提dash核心组件和html组件,用户可以使用Python结构和dash-html-components库来构建布局,而不是编写HTML或使用HTML模板引擎 。dash-html-components库和标准的html还是有点区别的。以下内容来自dash官网的介绍:

如果使用的是HTML组件,那么还可以访问诸如style、class和id之类的属性。

HTML元素和破折号类基本相同,但有几个关键区别:

  • style属性是字典
  • 样式字典中的属性是大小写的
  • 类键被重命名为className
  • 以像素为单位的样式属性可以仅作为数字提供,而不使用px单位

下面的例子是html组件的一些常规用法,包括style,classname,id的使用,暂未使用css文件。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State, MATCH, ALL
import plotly.express as px
import random as rn
app = dash.Dash(__name__, suppress_callback_exceptions=True)
# 一个网站的CSS都是一个单独的样式表的,在dash中任何放在assets中的CSS外部样式都会被自动加载
# 创建一个style.css文件来设置背景颜色
# body {
# background-color:green;
# }
app.layout = html.Div([
html.H1('Hello Dash'),
html.Div([
html.P('Dash P 测试1'),
html.P("Dash P 测试2"),
html.Div('Div with style 测试', style={'color': 'blue', 'fontSize': 14}),
html.P('Dash P 测试2 with style 测试', className='my-class', id='my-p-element'),
html.Img(src="assets/aaaa.jpg",style={"height":"200px"})
], style={'marginBottom': 50, 'marginTop': 25})
])# dash_html_components支持className,id,也支持style
if __name__ == '__main__':
app.run_server(debug=True)

访问127.0.0.1:8050即可

关于Python可视化Dash工具-dash核心组件和html组件

HTML的CSS文件默认是放在asset目录下的,无需指定路径。在这里定义了body,li和li:hover(锚定)的css样式。

/* body background */
body {
background-color:white;
width:100%;
height:100%;
margin:0px;
}

/* li */
li {
color:blue;
font-size: 2rem;
font-weight: bold;
transition: all 0.2s ease-in-out;
}

li:hover {
transform: scale(1.15);
}

下面的例子很简单,通过html.UI,html.li遍历python变量生成列表值,鼠标指向列表值,列表值会增大。

sports_lists = [
"" + "足球",
"" + "篮球",
"" + "排球",
"" + "羽毛球",
"" + "乒乓球",
"" + "网球",
]

# 应用列表解析式动态生成HTML网页
app.layout = html.Ul([html.Li(sport) for sport in sports_lists])
关于Python可视化Dash工具-dash核心组件和html组件

接下来要定义一个类似大屏风格展示的CSS,要确保该展示能够随着屏幕分辨率的变化而保持相对稳定,首先定义了个顶层的container,接下来是logo区域,顶部样式区域,中间区域,和底部区域。以不同颜色区隔开来。

#container {
width: 100vw;
height: 100vh;
}
/*顶部logo条带样式*/
#logo {
width:100%;
height:10%;
background-image:url("npp.png");
background-repeat:no-repeat;
background-size:100% 100%;
}
/*顶部样式*/
#header {
width:100%;
height:13%;
background-color:darkorchid;
}
/*中间部分面板样式*/
#main {
width:100%;
height:70%;
background-color:hotpink;
}
/*底部面板样式*/
#footer {
width:100%;
height:7%;
background-color:rgb(126, 186, 114);
}

在dash中也很简单,主要通过id来进行标识。

app.layout=html.Div([html.Div('Div logo', id='logo'),
html.Div('Div header', id='header'),
html.Div('Div main',id='main'),
html.Div('Div footer', id='footer')]
,id='container')

最后的展示效果如下:

关于Python可视化Dash工具-dash核心组件和html组件

大屏的部分再进一步细化,主要是细化中间部分(main),中间部分首先分为左中右,左边再区分成上中下区域,同样需要确保比例是固定的。

/*左侧部分面板样式*/
#mleft {
width:20%;
height:100%;
background-color:black;
float:left;
}
/*中间部分面板样式*/
#mmap {
width:60%;
height:100%;
float:left;
}
/*右侧部分面板样式*/
#mright {
width:20%;
height:100%;
background-color:rgb(186, 218, 199);
float:left;
}
/*左侧上面部分分面板样式*/
#left-top {
width:100%;
height:33%;
background-color:lightblue;
}
/*左侧中间部分面板样式*/
#left-middle {
width:100%;
height:33%;
background-color:greenyellow;
}
/*左侧右侧部分面板样式*/
#left-right {
width:100%;
height:33%;
background-color:rgb(179, 173, 230);
float:left;
}

对原来的dash再次修改,不断增加层级。

app.layout=html.Div([html.Div('Div logo', id='logo'),
html.Div('Div header', id='header'),
html.Div([
html.Div([
html.Div('Div left-top', id='left-top'),
html.Div('Div left-middle', id='left-middle'),
html.Div('Div left-bottom', id='left-bottom'),
], id='mleft'),
html.Div('Div map', id='mmap'),
html.Div('Div right', id='mright')]
,id='main'),
html.Div('Div footer', id='footer')]
,id='container')

展示的效果如下,通过缩小浏览器窗口,显示比例是固定的。

关于Python可视化Dash工具-dash核心组件和html组件

接下来再加入html组件和核心组件,测试table组件、tr组件、td组件和下拉列表组件

app.layout=html.Div([html.Div('Div logo', id='logo'),
html.Div('Div header', id='header'),
# html.Div('Div main',id='main'),
html.Div([
#html.Div('Div left', id='mleft'),
html.Div([
html.Div('Div left-top', id='left-top'),
html.Div('Div left-middle', id='left-middle'),
html.Div('Div left-bottom', id='left-bottom'),
], id='mleft'),
html.Div([
html.Table([
html.Tr([
html.Td('第一行第一列'),
html.Td('第一行第二列'),
html.Td('第一行第三列')
]),
html.Tr([
html.Td('第二行第一列'),
html.Td('第二行第二列'),
html.Td('第二行第三列')
]),
html.Tr([
html.Td('第三行第一列'),
html.Td('第三行第二列'),
html.Td('第三行第三列')
])]
),
html.H1('下拉选择'),
html.Br(),
dcc.Dropdown(options=[
{'label':'选项一','value':1},{'label':'选项二','value':2},{'label':'选项三','value':3}]),
], id='mmap'),
html.Div('Div right', id='mright')
],id='main'),
html.Div('Div footer', id='footer')]
,id='container')

展示效果如下

关于Python可视化Dash工具-dash核心组件和html组件

说实在的,UI对一个程序员来说真是个考验,缺乏足够的审美眼光,只能确保系统正常使用,当然对我而言足够了。

后续会在这个大框架基础继续完善,进一步开启回调的学习,并和图表进行结合。

来源:python与大数据分析,本文观点不代表自营销立场,网址:https://www.zyxiao.com/p/125872

发表评论

登录后才能评论
侵权联系
返回顶部