- 三、Dash布局实例(三)
- 3.6 实例6：网页元素
- 补充视频代码
视频讲解：
【Python百日基础系列】23 - Dash布局实例(三)
三、Dash布局实例(三) 3.6 实例6：网页元素# _*_ coding: UTF-8 _*_
# @Time:2021/10/20 21:12
# @Author:岳涛@心馨电脑
# @File:Day21 - Dash基础.py
# @Software:PyCharm
# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.
import dash
from dash import dcc
from dash import html
import plotly.express as px
import pandas as pd
app = dash.Dash(__name__)
app.layout = html.Div([
html.Label('下拉菜单'),
dcc.Dropdown(
options=[{'label': '北京', 'value': '北京'},
{'label': '天津', 'value': '天津'},
{'label': '上海', 'value': '上海'}],
value='北京'),
html.Label('多选下拉菜单'),
dcc.Dropdown(
options=[{'label': '北京', 'value': '北京'},
{'label': '天津', 'value': '天津'},
{'label': '上海', 'value': '上海'}],
value=['北京', '上海'],
multi=True),
html.Label('单选钮'),
dcc.RadioItems(
options=[{'label': '北京', 'value': '北京'},
{'label': '天津', 'value': '天津'},
{'label': '上海', 'value': '上海'}],
value='北京'),
html.Label('多选框'),
dcc.Checklist(
options=[{'label': '北京', 'value': '北京'},
{'label': '天津', 'value': '天津'},
{'label': '上海', 'value': '上海'}],
value=['北京', '上海']),
html.Label('Text Input'),
dcc.Input(value='天津', type='text'),
html.Label('文本输入'),
dcc.Slider(
min=0, max=9, value=5,
marks={i: '标签 {}'.format(i) if i == 1 else str(i) for i in range(1, 6)})
], style={'columnCount': 2})
if __name__ == '__main__':
app.run_server(debug=True)
浏览器效果：
说明 本示例中，展示了下拉列表单选、下拉列表多选、单选按钮、多选按钮、文本输入框、滑动条； dash_core_components 包含一系列高级别的组件，如下拉列表、图形、Markdown文本等； 与所有Dash组件一样，这些组件都是声明式的，组件的关键字参数也一样，每个选项都可以进行配置； 在Dash核心组件库中，可以查看所有可用的组件。补充视频代码
import plotly.express as px
import pandas as pd
import dash
from dash import dcc
from dash import html
from datetime import date
class MyDash:
def __init__(self):
self.fig = ''
self.df1 = ''
self.colors = {
'background': '#111111',
'text': '#7FDBFF'
}
self.dash_data()
self.dash_layout()
def dash_data(self):
""" 数据与业务逻辑处理 """
df = pd.read_excel('fruit.xlsx', sheet_name='Sheet2')
df.columns = ['fruit', 'year', 'amount']
self.fig = px.bar(df, x='fruit', y='amount', color='year', barmode='group')
self.fig.update_layout(
plot_bgcolor=self.colors['background'],
paper_bgcolor=self.colors['background'],
font_color=self.colors['text']
)
# csv_url = 'https://gist.githubusercontent.com/chriddyp/c78bf172206ce24f77d6363a2d754b59/raw/c353e8ef842413cae56ae3920b8fd78468aa4cb2/usa-agricultural-exports-2011.csv'
self.df1 = pd.read_csv('usa-agricultural-exports-2011.csv')
# csv_rul = 'https://gist.githubusercontent.com/chriddyp/5d1ea79569ed194d432e56108a04d188/raw/a9f9e8076b837d541398e999dcbac2b2826a81f8/gdp-life-exp-2007.csv'
self.df2 = pd.read_csv('gdp-life-exp-2007.csv')
self.fig2 = px.scatter(self.df2, x="gdp per capita", y="life expectancy",
size="population", color="continent", hover_name="country",
log_x=True, size_max=60)
a = 200
self.markdown_text = f'''视频讲解：{a}
# 一、Dash简介
Dash是一个用于构建Web应用程序的高效Python框架。
Dash写在Flask，Plotly.js和React.js之上，在纯Python中，使用高度自定义的用户界面，构建数据可视化应用程序。
它特别适合使用Python进行数据分析的人。
Dash官网：[https://dash.plotly.com](https://dash.plotly.com)
'''
def generate_table(self, df, max_rows=10):
return html.Table([
html.Thead(html.Tr([html.Th(col) for col in df.columns])),
html.Tbody([html.Tr([html.Td(df.iloc[i][col]) for col in df])
for i in range(min(len(df), max_rows))])
])
def dash_layout(self):
""" Dash页面布局 """
app.layout = html.Div(
id='example-div',
style={'backgroundcolor': self.colors['background']},
children=[
html.Label('下拉列表'),
dcc.Dropdown(
options=[
{'label': '纽约市', 'value': 'NYC'},
{'label': '伦敦市', 'value': 'MTL'},
{'label': '圣弗朗新斯科', 'value': 'SF'}
],
value='MTL'),
html.Label('复选下拉列表'),
dcc.Dropdown(
options=[
{'label': '纽约市', 'value': 'NYC'},
{'label': '伦敦市', 'value': 'MTL'},
{'label': '圣弗朗新斯科', 'value': 'SF'}
],
value=['MTL', 'NYC'],
multi=True, ),
html.Label('滑动条'),
dcc.Slider(
min=-5,
max=10,
step=0.5,
value=-3
),
html.Label('滑动条2'),
dcc.Slider(
min=0,
max=9,
marks={i: f'标签{i}' for i in range(10)},
value=5,
),
html.Label('范围滑动条'),
dcc.RangeSlider(
count=2,
min=-5,
max=10,
step=0.5,
value=[-3, 7]
),
html.Label('范围滑动条2'),
dcc.RangeSlider(
marks={i: f'标签{i}' for i in range(-5, 7)},
min=-5,
max=6,
value=[-3, 4]
),
html.Label('输入框'),
dcc.Input(
placeholder='请输入一个值...',
type='text',
value='默认输入值'
),
html.Label('文本框'),
dcc.textarea(
placeholder='请输入一个值...',
value='这是一个文本框',
style={'width': '100%'}
),
html.Label('复选框'),
dcc.Checklist(
options=[
{'label': '纽约市', 'value': 'NYC'},
{'label': '伦敦市', 'value': 'MTL'},
{'label': '圣弗朗新斯科', 'value': 'SF'}
],
value=['MTL', 'SF']
),
html.Label('复选框2'),
dcc.Checklist(
options=[
{'label': '纽约市', 'value': 'NYC'},
{'label': '伦敦市', 'value': 'MTL'},
{'label': '圣弗朗新斯科', 'value': 'SF'}
],
value=['MTL', 'SF'],
labelStyle={'display': 'inline-block'}
),
html.Label('单选框'),
dcc.RadioItems(
options=[
{'label': '纽约市', 'value': 'NYC'},
{'label': '伦敦市', 'value': 'MTL'},
{'label': '圣弗朗新斯科', 'value': 'SF'}
],
value='MTL'
),
html.Label('单选框2'),
dcc.RadioItems(
options=[
{'label': '纽约市', 'value': 'NYC'},
{'label': '伦敦市', 'value': 'MTL'},
{'label': '圣弗朗新斯科', 'value': 'SF'}
],
value='MTL',
labelStyle={'display': 'inline-block'}
),
html.Label('单日期选框'),
dcc.DatePickerSingle(
id='date-picker-single',
date=date(1997, 5, 10)
),
html.Label('时间段选框'),
dcc.DatePickerRange(
id='date-picker-range',
start_date=date(1997, 5, 3),
end_date_placeholder_text='Select a date!'
),
html.H1(
id='example-h1',
style={'textAlign': 'center', 'color': self.colors['text']},
children='2017-2019年水果销量图'),
html.Div(
id='example-sub-title',
style={'textAlign': 'center', 'color': self.colors['text']},
children='常用水果'),
dcc.Graph(
id='example-fruit',
figure=self.fig),
html.Hr(),
html.H4('美国农业常量(2011)'),
self.generate_table(self.df1),
html.Hr(),
dcc.Graph(id='life-exp-vs-gdp',
figure=self.fig2),
html.Hr(),
dcc.Markdown(self.markdown_text),
])
if __name__ == '__main__':
app = dash.Dash(__name__)
MyDash()
app.run_server(debug=True)
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）