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 官网：

=====

  #本机太卡，基本没进去过

4 基本作图：

=========

4.1 柱状图bar：

===========

4.1.1 代码：

# -*- coding: utf-8 -*-import dashimport dash_core_components as dccimport dash_html_components as html#external_stylesheets = [';] #方法三#app = dash.Dash(__name__, external_stylesheets=external_stylesheets)  #方法三#app = dash.Dash(__name__)  #方法二app = dash.Dash()  #注意等同于上面，方法一#html的div容器布局app.layout = html.Div(    children=[        #h1文字，这个与Html的h1~4的字体一样        #html.H1(children='Hello Dash'),        html.H1('Hello Dash'),  #同上面        #html.Label('Hello Dash'),  #注意label与div的文本一样，字体大小等        #文字        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 dashimport dash_core_components as dccimport dash_html_components as htmlapp = 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 dashimport dash_core_components as dccimport dash_html_components as htmlapp = 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 dashimport dash_core_components as dccimport dash_html_components as htmlimport pandas as pdimport plotly.graph_objs as goapp = dash.Dash()#在线csv地址和引用'''df = pd.read_csv(    '; +    '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 dashimport dash_core_components as dccimport dash_html_components as htmlapp = 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列=columnstyle={'columnCount': 1})if __name__ == '__main__':    app.run_server(debug=True)

5.2 操作和效果图：

6 表格table：

=========

6.1 代码：

import dashimport dash_core_components as dccimport dash_html_components as htmlimport pandas as pd'''#在线引用df = pd.read_csv(    ';    '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 dashimport dash_core_components as dccimport dash_html_components as htmlapp = 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')])#定义函数回调adef 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 操作和效果图：

===自己整理并分享出来===

喜欢的就点赞、关注、转发、评论和收藏。

估计推荐量不高，没关系，我自己觉得修改后的更好。