再发Dash是一个纯Python写成的交互式的web应用程序

　　1 说明：
　　======
　　1.1 今天白天发过有关Dash的文章，发现有问题，先撤回，再删除。虽然会严重影响推荐，但是为了读者负责任，我愿意承担这样，不在乎推荐。所以喜欢的，请点赞、关注、转发、评论和收藏。
　　1.2 Dash是一个纯Python写成的框架,无需JavaScript即可构建交互式的分析类web应用程序。
　　1.3 Dash是一个优秀的交互式可视化工具，基于plotly。
　　1.4 python可视化库plotly生态简介(plotly, plotly_express, dash)。
　　2 安装：
　　=====pip install dash==1.12.0 #本机安装 pip3.8 install dash  #我任性一点，不指定版本安装
　　3 官网：
　　=====https://github.com/plotly/dash https://plotly.com/dash  #本机太卡，基本没进去过 https://dash-gallery.plotly.host/Portal/
　　4 基本作图：
　　=========
　　4.1 柱状图bar：
　　===========
　　4.1.1 代码：# -*- coding: utf-8 -*- import dash import dash_core_components as dcc import dash_html_components as html  #external_stylesheets = [＂https://codepen.io/chriddyp/pen/bWLwgP.css＂] #方法三 #app = dash.Dash(__name__, external_stylesheets=external_stylesheets)  #方法三 #app = dash.Dash(__name__)  #方法二 app = dash.Dash()  #注意等同于上面，方法一 #html的p容器布局 app.layout = html.Div(     children=[         #h1文字，这个与Html的h1~4的字体一样         #html.H1(children=＂Hello Dash＂),         html.H1(＂Hello Dash＂),  #同上面         #html.Label(＂Hello Dash＂),  #注意label与p的文本一样，字体大小等         #文字         html.Div(children=＂＂＂Dash: A web application framework for Python.＂＂＂),         #可视化作图         dcc.Graph(         #id=＂example-graph＂,  #如果布局较多的内容，id就很重要         figure={             ＂data＂: [                 #type为bar---柱状图                 {＂x＂: [1, 2, 3], ＂y＂: [4, 1, 2], ＂type＂: ＂bar＂, ＂name＂: ＂汽车＂},                 {＂x＂: [1, 2, 3], ＂y＂: [2, 4, 5], ＂type＂: ＂bar＂, ＂name＂: ＂火车＂},             ],             #title就是图表的标题             ＂layout＂: {＂title＂: ＂Dash Data Visualization＂}                 }                   )             ])  if __name__ == ＂__main__＂:     app.run_server(debug=True)  #其实是结合flask的在线可视化作图
　　4.1.2 操作和效果图：
　　4.2 折线图line：
　　===========
　　4.2.1 代码：# -*- coding: utf-8 -*- import dash import dash_core_components as dcc import dash_html_components as html  app = dash.Dash() app.layout = html.Div(children=[     html.H1(children=＂Hello Dash＂),      html.Div(children=＂＂＂         Dash: A web application framework for Python.     ＂＂＂),      dcc.Graph(         id=＂example-graph＂,         figure={             ＂data＂: [                 #由bar柱状图改为line折线图，仅仅改type为line---折线图                 {＂x＂: [1, 2, 3], ＂y＂: [4, 1, 2], ＂type＂: ＂line＂, ＂name＂: ＂汽车＂},                 {＂x＂: [1, 2, 3], ＂y＂: [2, 4, 5], ＂type＂: ＂line＂, ＂name＂: ＂火车＂},             ],             ＂layout＂: {                 ＂title＂: ＂Dash Data Visualization＂             }         }     ) ])  if __name__ == ＂__main__＂:     app.run_server(debug=True)
　　4.2.2 操作和效果图：
　　4.3 散点图Scatter：
　　==============
　　4.3.1 代码：import dash import dash_core_components as dcc import dash_html_components as html  app = dash.Dash()  app.layout = html.Div([     dcc.Graph(         figure={             ＂data＂: [                 #A组数据                 {                     ＂x＂: [1, 2, 3, 4],                     ＂y＂: [4, 1, 3, 5],                     ＂text＂: [＂鸡＂, ＂鸭＂, ＂鹅＂, ＂鸟＂],                     ＂name＂: ＂A组＂,                     ＂mode＂: ＂markers＂,                     #散点图大小设置                     ＂marker＂: {＂size＂: 20}                 },                 #B组数据                 {                     ＂x＂: [1, 2, 3, 4],                     ＂y＂: [9, 4, 1, 4],                     ＂text＂: [＂猪＂, ＂狗＂, ＂牛＂, ＂羊＂],                     ＂name＂: ＂B组＂,                     ＂mode＂: ＂markers＂,                     #散点图大小设置                     ＂marker＂: {＂size＂: 20}                 }             ],             ＂layout＂:                 #图表标题                {＂title＂: ＂Dash Data Visualization＂}           }     ), ])   if __name__ == ＂__main__＂:     app.run_server(debug=True)
　　4.3.2 操作和效果图：注意因为我的谷歌浏览器并没有关闭，所以启动后自动刷新。
　　4.4 高级散点图Scatter：
　　==================
　　4.4.1 代码：import dash import dash_core_components as dcc import dash_html_components as html import pandas as pd import plotly.graph_objs as go  app = dash.Dash() #在线csv地址和引用 ＂＂＂ df = pd.read_csv(     ＂https://gist.githubusercontent.com/chriddyp/＂ +     ＂5d1ea79569ed194d432e56108a04d188/raw/＂ +     ＂a9f9e8076b837d541398e999dcbac2b2826a81f8/＂+     ＂gdp-life-exp-2007.csv＂) ＂＂＂ #将数据csv下载到本地的引用 df = pd.read_csv(＂/home/xgj/Desktop/dash/gdp-life-exp-2007.csv＂)  app.layout = html.Div([     dcc.Graph(         id=＂life-exp-vs-gdp＂,         figure={             ＂data＂: [                 go.Scatter(                                      x=df[df[＂continent＂] == i][＂gdp per capita＂],                     y=df[df[＂continent＂] == i][＂life expectancy＂],                     text=df[df[＂continent＂] == i][＂country＂],                     mode=＂markers＂,                     opacity=0.7,                     marker={                         ＂size＂: 15,                         ＂line＂: {＂width＂: 0.5, ＂color＂: ＂white＂}                     },                     name=i)for i in df.continent.unique()             ],              ＂layout＂: go.Layout(                 xaxis={＂type＂: ＂log＂, ＂title＂: ＂GDP Per Capita＂},                 yaxis={＂title＂: ＂Life Expectancy＂},                 margin={＂l＂: 40, ＂b＂: 40, ＂t＂: 10, ＂r＂: 10},                 legend={＂x＂: 0, ＂y＂: 1},                 hovermode=＂closest＂)         }     ) ])  if __name__ == ＂__main__＂:     app.run_server(debug=True)
　　4.4.2 操作和效果图：
　　5 控件：
　　=====
　　5.1 代码：# -*- coding: utf-8 -*- import dash import dash_core_components as dcc import dash_html_components as html  app = dash.Dash()  app.layout = html.Div([     #展示1：     html.Label(＂Dropdown=下拉菜单＂),     dcc.Dropdown(         options=[             {＂label＂: ＂太阳＂, ＂value＂: ＂SUN＂},             {＂label＂: ＂地球＂, ＂value＂: ＂EARTH＂},             {＂label＂: ＂月亮＂, ＂value＂: ＂MOON＂}         ],         value=＂SUN＂ #初始值     ),     #展示2：     html.Label(＂Multi-Select Dropdown=多选菜单＂),     dcc.Dropdown(         options=[             {＂label＂: ＂太阳＂, ＂value＂: ＂SUN＂},             {＂label＂: ＂地球＂, ＂value＂: ＂EARTH＂},             {＂label＂: ＂月亮＂, ＂value＂: ＂MOON＂}         ],         #初始值显示对应的label         value=[＂SUN＂, ＂MOON＂],         multi=True     ),     #展示3：     html.Label(＂Radio Items=单选菜单＂),     dcc.RadioItems(         options=[             {＂label＂: ＂太阳＂, ＂value＂: ＂SUN＂},             {＂label＂: ＂地球＂, ＂value＂: ＂EARTH＂},             {＂label＂: ＂月亮＂, ＂value＂: ＂MOON＂}         ],         value=＂MTL＂     ),     #展示4：     html.Label(＂Checkboxes=复选菜单＂),     dcc.Checklist(         options=[             {＂label＂: ＂太阳＂, ＂value＂: ＂SUN＂},             {＂label＂: ＂地球＂, ＂value＂: ＂EARTH＂},             {＂label＂: ＂月亮＂, ＂value＂: ＂MOON＂}         ],         value=[＂MTL＂, ＂SF＂]     ),      #展示5：     html.Label(＂Slider=滑动条＂),     dcc.Slider(         min=0,         max=9,         marks={i: ＂Label {}＂.format(i) if i == 0 else str(i) for i in range(0, 10)},         #初始值         value=5,     ), ],  #代表1列；2代表2列;3代表3列=column style={＂columnCount＂: 1})  if __name__ == ＂__main__＂:     app.run_server(debug=True)
　　5.2 操作和效果图：
　　6 表格table：
　　=========
　　6.1 代码：import dash import dash_core_components as dcc import dash_html_components as html import pandas as pd  ＂＂＂ #在线引用 df = pd.read_csv(     ＂https://gist.githubusercontent.com/chriddyp/＂     ＂c78bf172206ce24f77d6363a2d754b59/raw/＂     ＂c353e8ef842413cae56ae3920b8fd78468aa4cb2/＂     ＂usa-agricultural-exports-2011.csv＂) ＂＂＂  #下载到本地，引用 df = pd.read_csv(＂/home/xgj/Desktop/dash/usa-agricultural-exports-2011.csv＂) #定义产生表格函数 def generate_table(dataframe, max_rows=10):     #返回值是一个表格     return html.Table(         # Header=表头         [html.Tr([html.Th(col) for col in dataframe.columns])] +         # Body=表体         [html.Tr([             html.Td(dataframe.iloc[i][col]) for col in dataframe.columns         ]) for i in range(min(len(dataframe), max_rows))]     )  app = dash.Dash() app.layout = html.Div(children=[     html.H4(children=＂US Agriculture Exports (2011年)＂), #故意中英文混合，提示支持中文     generate_table(df) #引用自定义函数 ])  if __name__ == ＂__main__＂:     app.run_server(debug=True)
　　6.2 操作和效果图：
　　7 回调callback：
　　============
　　7.1 代码：import dash import dash_core_components as dcc import dash_html_components as html  app = dash.Dash() app.layout = html.Div([     dcc.RadioItems(         id=＂dropdown-a＂,         options=[{＂label＂: i, ＂value＂: i} for i in [＂马＂, ＂牛＂, ＂羊＂]],         value=＂马＂     ),     html.Div(id=＂output-a＂),       dcc.RadioItems(         id=＂dropdown-b＂,         options=[{＂label＂: i, ＂value＂: i} for i in [＂鸡＂, ＂鸭＂, ＂鹅＂]],         value=＂鸭＂     ),     html.Div(id=＂output-b＂)   ])   @app.callback(     dash.dependencies.Output(＂output-a＂, ＂children＂),     [dash.dependencies.Input(＂dropdown-a＂, ＂value＂)]) #定义函数回调a def callback_a(dropdown_value):     #注意python的转义字符＂，就是显示＂     return ＂You＂ve selected ＂{}＂＂.format(dropdown_value)   @app.callback(     dash.dependencies.Output(＂output-b＂, ＂children＂),     [dash.dependencies.Input(＂dropdown-b＂, ＂value＂)]) def callback_b(dropdown_value):     return ＂You＂ve selected ＂{}＂＂.format(dropdown_value)   if __name__ == ＂__main__＂:     app.run_server()
　　7.2 操作和效果图：
　　===自己整理并分享出来===
　　喜欢的就点赞、关注、转发、评论和收藏。
　　估计推荐量不高，没关系，我自己觉得修改后的更好。