关于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 dashimport dash_core_components as dccimport dash_html_components as htmlfrom dash.dependencies import Input, Output, State, MATCH, ALLimport plotly.express as pximport random as rnapp = 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即可
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])
接下来要定义一个类似大屏风格展示的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')
最后的展示效果如下：
大屏的部分再进一步细化，主要是细化中间部分（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')
展示的效果如下，通过缩小浏览器窗口，显示比例是固定的。
接下来再加入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')
展示效果如下
说实在的，UI对一个程序员来说真是个考验，缺乏足够的审美眼光，只能确保系统正常使用，当然对我而言足够了。
后续会在这个大框架基础继续完善，进一步开启回调的学习，并和图表进行结合。
