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

python与大数据分析

发布于 2022-03-11 14:08:54

1.4K0

发布于 2022-03-11 14:08:54

关于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即可

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')

展示效果如下