Python 交互式数据可视化框架:Dash(中)
Python中文社区
共 9732字,需浏览 20分钟
· 2021-01-19
style
参数自定义仪表板非常简单。此参数采用带有键值对的Python字典,键值对由CSS属性的名称和要设置的值组成。app.py
中更改H1
元素的大小和颜色,则可以如下设置元素的style
参数:html.H1(
children =“ Avocado Analytics”,
style = {“ fontSize”:“ 48px”,“ color”:“ red”},
),
style
参数的不利之处在于,随着代码库的增长,它无法很好地扩展。如果您的信息中心中有多个您希望外观相同的组件,那么您将不得不重复写很多代码。相反,您可以使用自定义CSS文件。asset/
的文件夹,然后将要添加的文件保存在其中。默认情况下,Dash自动提供asset/
中包含的任何文件。如后文中所示,这也可以用于添加收藏夹图标或嵌入图像。className
或id
参数来使用CSS调整其样式。这些参数在转换为HTML标签后便与class
和id
属性相对应。app.py
中H1
元素的字体大小和文本颜色,则可以使用className
参数,如下所示:html.H1(
children="Avocado Analytics",
className="header-title",
),
className
参数将定义H1
元素的class
属性。然后,您可以在assets
文件夹中使用一个CSS文件来指定外观:.header-title {
font-size: 48px;
color: red;
}
className =“ header-title”
将它与需要共享格式的其他元素一起使用。在页面上添加一个图标和标题 更改仪表板的字体系列 使用外部CSS文件设置Dash组件的样式
className
参数将自定义样式应用于Dash组件。asset /
的文件夹。从Twemoji
开源项目中下载一个图标,并将其另存为Asset /
中的favicon.ico
。最后,在assets /
中创建一个名为style.css
的CSS文件,并创建代码如下。body {
font-family: "Lato", sans-serif;
margin: 0;
background-color: #F7F7F7;
}
.header {
background-color: #222222;
height: 256px;
display: flex;
flex-direction: column;
justify-content: center;
}
.header-emoji {
font-size: 48px;
margin: 0 auto;
text-align: center;
}
.header-title {
color: #FFFFFF;
font-size: 48px;
font-weight: bold;
text-align: center;
margin: 0 auto;
}
.header-description {
color: #CFCFCF;
margin: 4px auto;
text-align: center;
max-width: 384px;
}
.wrapper {
margin-right: auto;
margin-left: auto;
max-width: 1024px;
padding-right: 10px;
padding-left: 10px;
margin-top: 32px;
}
.card {
margin-bottom: 24px;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18);
}
assets/
文件包含您将应用于APP程序布局中的组件样式。现在,您的项目结构应如下所示:avocado_analytics/
│
├── assets/
│ ├── favicon.ico
│ └── style.css
│
├── venv/
│
├── app.py
└── avocado.csv
Assets /
中的文件。您在asset/
中包含两个文件:favicon.ico
和style.css
。要设置默认图标,您无需采取任何其他步骤。要使用您在style.css
中定义的样式,您需要在Dash组件中使用className
参数。app.py
需要一些更改。其中包括一个外部样式表,在仪表板上添加标题,并使用style.css
文件对组件进行样式设置。查看下面的更改。然后,在本节的最后部分,您将找到更新版本的app.py
的完整代码。external_stylesheets = [
{
"href": "https://fonts.googleapis.com/css2?"
"family=Lato:wght@400;700&display=swap",
"rel": "stylesheet",
},
]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.title = "Avocado Analytics: Understand Your Avocados!"
head
标签中,并在应用程序主体加载之前加载。您可以使用external_stylesheets
参数来添加外部CSS文件或为外部JavaScript文件(例如Google Analytics(分析))添加external_scripts
。style.css
中使用样式,您需要在Dash组件中使用className
参数。下面的代码向构成仪表板标题的每个组件中添加一个带有相应类选择器的className
:app.layout = html.Div(
children=[
html.Div(
children=[
html.P(children="🥑", className="header-emoji"),
html.H1(
children="Avocado Analytics", className="header-title"
),
html.P(
children="Analyze the behavior of avocado prices"
" and the number of avocados sold in the US"
" between 2015 and 2018",
className="header-description",
),
],
className="header",
),
className
参数。这些类名称应与style.css
中的类选择器匹配,该选择器将定义每个组件的外观。header-description
类在style.css
中具有相应的选择器:.header-description {
color: #CFCFCF;
margin: 4px auto;
text-align: center;
max-width: 384px;
}
style.css
的第29至34行定义了header-description
类选择器的格式。这些将更改任何带有className =“ header-description”
的组件的颜色、边距、对齐方式和最大宽度。所有组件在CSS文件中都有相应的类选择器。html.Div(
children=[
html.Div(
children=dcc.Graph(
id="price-chart",
config={"displayModeBar": False},#43行
figure={
"data": [
{
"x": data["Date"],
"y": data["AveragePrice"],
"type": "lines",
"hovertemplate": "$%{y:.2f}"#50行
" ",#51行
},
],
"layout": { #54行
"title": {
"text": "Average Price of Avocados",
"x": 0.05,
"xanchor": "left",
},
"xaxis": {"fixedrange": True},
"yaxis": {
"tickprefix": "$",
"fixedrange": True,
},
"colorway": ["#17B897"],
}, #66行
},
),
className="card", #69行
),
config
和Figure
参数定义一个className
和一些自定义项。更改如下:第43行:您删除了默认情况下Plotly显示的浮动条。 第50和51行:设置悬停模板,以便当用户将鼠标悬停在数据- 点上时,它以美元显示价格。而不是2.5,而是显示为 $ 2.5
。第54到66行:您可以在图表的布局部分中调整轴,图形的颜色和标题格式。 第69行:使用 “ card”
类将图形包装在html.Div
中。这将使图形具有白色背景,并在其下方添加一个小阴影。销售量和数量图表也有类似的调整。
app.py
。import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
data = pd.read_csv("avocado.csv")
data = data.query("type == 'conventional' and region == 'Albany'")
data["Date"] = pd.to_datetime(data["Date"], format="%Y-%m-%d")
data.sort_values("Date", inplace=True)
external_stylesheets = [
{
"href": "https://fonts.googleapis.com/css2?"
"family=Lato:wght@400;700&display=swap",
"rel": "stylesheet",
},
]
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.title = "Avocado Analytics: Understand Your Avocados!"
app.layout = html.Div(
children=[
html.Div(
children=[
html.P(children="🥑", className="header-emoji"),
html.H1(
children="Avocado Analytics", className="header-title"
),
html.P(
children="Analyze the behavior of avocado prices"
" and the number of avocados sold in the US"
" between 2015 and 2018",
className="header-description",
),
],
className="header",
),
html.Div(
children=[
html.Div(
children=dcc.Graph(
id="price-chart",
config={"displayModeBar": False},
figure={
"data": [
{
"x": data["Date"],
"y": data["AveragePrice"],
"type": "lines",
"hovertemplate": "$%{y:.2f}"
" ",
},
],
"layout": {
"title": {
"text": "Average Price of Avocados",
"x": 0.05,
"xanchor": "left",
},
"xaxis": {"fixedrange": True},
"yaxis": {
"tickprefix": "$",
"fixedrange": True,
},
"colorway": ["#17B897"],
},
},
),
className="card",
),
html.Div(
children=dcc.Graph(
id="volume-chart",
config={"displayModeBar": False},
figure={
"data": [
{
"x": data["Date"],
"y": data["Total Volume"],
"type": "lines",
},
],
"layout": {
"title": {
"text": "Avocados Sold",
"x": 0.05,
"xanchor": "left",
},
"xaxis": {"fixedrange": True},
"yaxis": {"fixedrange": True},
"colorway": ["#E12D39"],
},
},
),
className="card",
),
],
className="wrapper",
),
]
)
if __name__ == "__main__":
app.run_server(debug=True)
app.py
的更新版本。它对代码进行了必要的更改,以添加收藏夹图标和页面标题,更新字体系列并使用外部CSS文件。完成这些更改后,仪表板应如下所示:更多阅读
特别推荐
点击下方阅读原文加入社区会员
评论
Python列表知识应知应会
点击上方“Go语言进阶学习”,进行关注回复“Go语言”即可获赠从入门到进阶共10本电子书今日鸡汤只在此山中,云深不知处。一、前言 在Python程序开发中,列表(List)经常会使用。假设一个班里有50个学生现需要统计每一个学生的总成绩情况,如果不使用列
Go语言进阶学习
0
Python 字符串应该用双引号还是单引号?
转载来源:洪尔摩斯PyCharm升级至 2023.2版本后,经常弹出来一个提示问我要不要试一下Black formatter。试了一下,这个Black formatter 很有个性,特别喜欢换行。我的一个文件用PyCharm自带的代码整理器整理完之后是500行左右,然后再用Black整理就变成600
菜鸟学Python
0
delorean,一个超级实用的 Python 库!
作者通常周更,为了不错过更新,请点击上方“Python碎片”,“星标”公众号大家好,今天为大家分享一个超级实用的 Python 库 - delorean。Github地址:https://github.com/myusuf3/delorean/时间在计算机科学和软件开发中是一个至关重要的概念。Pyt
Python 碎片
0
五一Python抢票神器来了
还在为五一回家抢不到火车票发愁吗?今天介绍一个Python抢票神器,希望对你有帮助。Py12306是一个流行的开源项目,旨在帮助用户更便捷地查询和预订中国铁路12306网站上的火车票。以下是使用Py12306的基本步骤和一些注意事项:安装与环境准备安装Python: 确保你的系统中安装了Python
Python小二
1
PyPy为什么能让Python比C还快?一文了解内在机制
我的小册:(小白零基础用Python量化股票分析小册) ,原价299,限时特价2杯咖啡,满100人涨10元。来源:机器之心「如果想让代码运行得更快,您应该使用 PyPy。」—— Python 之父 Guido van Rossum对于研究人员来说,迅速把想法代码化并查看其是否行得通至关重要。Pyth
菜鸟学Python
0
小美播报|3月IPTV数据排行榜发布!
小美播报3月IPTV数据排行榜:《与凤行》登顶连续剧榜榜首拥有4.05亿家庭用户的中国IPTV平台已经成为国内主流视听平台,IPTV平台数据对视听产业各环节都具有重要意义。截至2024年4月,全国已有29个省级IPTV加入“看中国”,覆盖全国超2.25亿户家庭、辐射近7亿人。点击查看详情湖南广电与马
流媒体网
0
CleverCSV,一个神奇的 python 库!
我的小册:(小白零基础用Python量化股票分析小册) ,原价299,限时特价2杯咖啡,满100人涨10元。来源丨网络介绍CleverCSV 是一个基于 Python 的库,旨在提供比标准库 csv 更智能和灵活的方法来处理 CSV 文件。该库使用机器学习算法来探测 CSV 文件的正确拨号结构,从而
菜鸟学Python
0
python读取多个excel表多个sheet后映射匹配再分组计算、纵向拼接
大家好,我是飞奔的蜗牛ing。一、前言前几天在一个客户给到一单数据处理的 问题,需求是这样的:1.表“aa2020”中2020年数据需要按季度分成四个表。(1-3月、4-6月、7-9月、10-12月)2.表“2020年一季度”代表2020年一季度客户所对应的管理档位,需要把表中的档位导入附表“aa2
IT共享之家
0