标签：layout dcc value label dash html children 页面
Dash介绍
Dash官网教程地址：https://dash.plotly.com/introduction
数据分析工作的结果，通常是数据表格、图表，分析报告。这些东西office的三件套基本都能满足。
但是要将图表，报告，分析结果组合到一块就比较麻烦，而且自动化的成本较高，当数据更新时，操作更麻烦。
可以用Power BI、Tebleau、FineReport等，这些都是多数公司常用的工具。
我之所以选择Dash，主要是因为Dash是基于Flask开发的一套组件，对于python爱好者很友好，不需要太多的代码就能实现数据、图表的展示。也可以很方便的共享数据。
官网优秀案例地址：https://dash-gallery.plotly.host/Portal/
1、Dash安装
pip install dash==1.17.0
本篇介绍的是Dash官网关于布局的案例，案例地址：https://dash.plotly.com/layout
2、导包
import dash
import pandas as pd
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
# 导入自定义的css样式
external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
dash包：用来实例化app的包
pandas：用来读取数据
dash_core_components：Dash自定义了一些前端框架，比如：下拉框，滑动条等一些交互组件
dash_html_components：dash用来构建前端基础代码标签，比如：Div，H1，Tr等前端标签
plotly：用来画图
3、实例化app
1、自定义的css样式在实例化的时候，传给external_stylesheets参数
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
4、获取数据
1、Dash用的数据为DataFrame类型数据
2、用pandas作为读取数据工具，所以pandas支持的数据存储格式，都可以用来当做数据源
3、**当数据改变，网页对应的数据也会自动改变。**不需要重启应用
df = pd.DataFrame(data={
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 3, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})
5、画图
官网画图地址：https://plotly.com/python/
需要画什么图，就去官网的案例上找就行
fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
6、DataFrame转网页表格
def generate_table(dataframe, max_rows=10):
table_layout = html.Table(children=[
# 表格头部信息
html.Thead(children=html.Tr(children=[html.Th(col) for col in dataframe.columns])),
# 表格数据信息
html.Tbody(children=[
html.Tr(children=[
html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
]) for i in range(min(len(dataframe), max_rows))
])
])
return table_layout
这个函数，可以将DataFrame类型数据转换为前端表格的形式，比如将上面的df数据装为网页表格的样子如下：
7、布局
简单的页面布局
1、布局与前端HTML代码类似的树形结构
2、HTML标签的首字母大写
3、每一个标签都有id，children，style属性
4、将被嵌套的标签放到children中，如果有多个，就用放到list中
app.layout = html.Div(
children=[
# H1标签
html.H1(children="Hello Dash", style={'textAlign': 'center'}),
# Div标签
html.Div(children="Dash: A web application framework for Python", style={'textAlign': 'center'}),
# 数据表格
html.H4(children="原始数据"),
html.Div(children=generate_table(df), style={'textAlign': 'center'}),
]
)
交互框布局
1、交互框位于dash_core_components包中
2、支持MarkDown语法，调用dcc.Markdown方法
3、有下拉框、单选框、复选框、输入框、文本框、滑动条等组件
markdown_text = "### Dash支持Markdown语法。[MarkDown教程地址](http://commonmark.org/)"
app.layout = html.Div(
children=[
dcc.Markdown(children=markdown_text),
html.Br(),
html.H1(children="Dash内置的组件："),
html.Label("下拉框（单选）："),
dcc.Dropdown(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': u'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'},
],
value='MTL',
),
html.Label("下拉框（多选）："),
dcc.Dropdown(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': u'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'},
],
value=['MTL', 'SF'],
multi=True,
),
html.Label('单选框：'),
dcc.RadioItems(options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': u'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'},
],
value='MTL',
),
html.Label("复选框："),
dcc.Checklist(options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': u'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'},
],
value=['MTL',"SF"]
),
html.Label("输入框："),
dcc.Input(value='MTL', type='text'),
html.Label("文本框："),
dcc.Textarea(),
html.Label('滑动线：'),
dcc.Slider(
min=0,max=9,
marks={i:'Label {}'.format(i) if i == 1 else str(i) for i in range(1,6)},
value=5,
)
]
)
图表布局
1、图表标签位于dash_core_components包中
2、将plotly绘制的图像对象传给figure参数
app.layout = html.Div(
children=[
dcc.Graph(id='example-graph',figure=fig),
]
)
完整代码
#!/usr/bin/env python
# coding: utf-8
import dash
import pandas as pd
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
# 官方案例地址：https://dash.plotly.com/layout
# 导入css样式
external_stylesheets = ["https://codepen.io/chriddyp/pen/bWLwgP.css"]
# 实例化一个应用对象，类似于flask的操作
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
# 构造数据
df = pd.DataFrame(data={
"Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
"Amount": [4, 1, 2, 3, 4, 5],
"City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})
# 画图，官网画图地址：https://plotly.com/python/
fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
def generate_table(dataframe, max_rows=10):
table_layout = html.Table(children=[
# 表格头部信息
html.Thead(children=html.Tr(children=[html.Th(col) for col in dataframe.columns])),
# 表格数据信息
html.Tbody(children=[
html.Tr(children=[
html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
]) for i in range(min(len(dataframe), max_rows))
])
])
return table_layout
markdown_text = "### Dash支持Markdown语法。[MarkDown教程地址](http://commonmark.org/)"
# 布局，用dash设计网页
# 每个标签都有id、children、style属性
# id为了定位到标签，children为了添加元素,style为了美化页面
app.layout = html.Div(
children=[
# H1标签
html.H1(children="Hello Dash", style={'textAlign': 'center'}),
# Div标签
html.Div(children="Dash: A web application framework for Python", style={'textAlign': 'center'}),
# 数据表格
html.H4(children="原始数据"),
html.Div(children=generate_table(df), style={'textAlign': 'center'}),
# 绘图需要用到dash_core_components中的Graph组件，将图片对象传给figure参数
dcc.Graph(id="example-graph", figure=fig),
# 支持MarkDown语法
dcc.Markdown(children=markdown_text),
html.Br(),
html.H1(children="Dash内置的组件："),
html.Label("下拉框（单选）："),
dcc.Dropdown(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': u'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'},
],
value='MTL',
),
html.Label("下拉框（多选）："),
dcc.Dropdown(
options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': u'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'},
],
value=['MTL', 'SF'],
multi=True,
),
html.Label('单选框：'),
dcc.RadioItems(options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': u'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'},
],
value='MTL',
),
html.Label("复选框："),
dcc.Checklist(options=[
{'label': 'New York City', 'value': 'NYC'},
{'label': u'Montréal', 'value': 'MTL'},
{'label': 'San Francisco', 'value': 'SF'},
],
value=['MTL',"SF"]
),
html.Label("输入框："),
dcc.Input(value='MTL', type='text'),
html.Label("文本框："),
dcc.Textarea(),
html.Label('滑动线：'),
dcc.Slider(
min=0,max=9,
marks={i:'Label {}'.format(i) if i == 1 else str(i) for i in range(1,6)},
value=5,
)
]
)
if __name__ == '__main__':
app.run_server(debug=True)
标签：layout,dcc,value,label,dash,html,children,页面 来源： https://blog.csdn.net/weixin_42060598/article/details/110820031
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。