【数据科学系列】基于Python的Web应用框架Dash-第一个应用

最新推荐文章于 2024-08-20 14:43:04 发布

Allen Moore

最新推荐文章于 2024-08-20 14:43:04 发布

阅读量2.3k

点赞数 3

本文链接：https://blog.csdn.net/MosesAaron/article/details/89891810

版权

Dash 应用程序框架

Dash应用程序由应用程序的布局和应用程序的交互性这两部分组成。
Dash为应用程序的所有可视组件提供Python类，在dash_core_components以及dash_html_components库和库中保留了一系列组件，但是用户也可以使用JavaScript和React.js 自定义。
app.layout描述应用程序的外观并且是组件的分层树。该dash_html_components库提供类所有的HTML标签，以及关键字参数说明了HTML属性，如 style，className和id。dash_core_components库生成更高级别的组件，如控件和图形。

创建第一个应用

保存以下代码文件为 app.py

# -*- 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.layout = html.Div(children=[
    html.H1(children=u'你好 Dash'),

    html.Div(children='''
        Dash: 一个基于Python的Web应用框架
    '''),

    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': u'学生'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'老师'},
            ],
            'layout': {
                'title': 'Dash 数据可视化'
            }
        }
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)  # debug=True, hot reload is enabled
    #app.run_server(dev_tools_hot_reload=False) #dev_tools_hot_reload=False, hot reload ie disabled

使用cmd命令行运行 app.py

REM run the app with python app.py
python app.py
REM press ctrl+c to quit

使用网页浏览器访问 http://127.0.0.1:8050/
刚打开浏览器，可能无响应；一刷新浏览器，即可访问页面。
Dash包含“热重新加载”或者“热更新”功能，即当用户对代码进行更改时，Dash将自动刷新用户的浏览器。当用户运行程序时，默认情况下激活此功能app.run_server(debug=True)。如果用户不喜欢“热重新加载”功能，可以关闭它app.run_server(dev_tools_hot_reload=False)。

注意：

layout包含诸如html.Div以及dcc.Graph的树形组件。
dash_html_components针对每个HTML标签都有对应的组件。
并非所有组件都是纯HTML.dash_core_components 是交互式的，并通过React.js库的JavaScript，HTML和CSS形成更高级别的组件。
每个组件都完全通过关键字属性来描述。Dash是声明性的：用户将主要通过这些属性描述用户的应用程序。
此应用程序使用自定义CSS样式表来修改元素的默认样式。

修改一下

# -*- 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)

colors = {
    'background': '#111111',
    'text': '#7FDBFF'
} # 定义颜色

app.layout = html.Div(style={'backgroundColor': colors['background']},children=[
    html.H1(children=u'你好 Dash',
                style={
                    'textAlign': 'center',
                    'color': colors['text']
                }
    ), #设置字体背景颜色，设置字体颜色

    html.Div(children='''Dash: 一个基于Python的Web应用框架''', style={
        'textAlign': 'center',
        'color': colors['text']
    }), #设置字体居中，设置字体颜色

    dcc.Graph(
        id='example-graph-2',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': u'水果'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'蔬菜'},
            ],
            'layout': {
                'title': 'Dash 数据可视化',
                'plot_bgcolor': colors['background'],
                'paper_bgcolor': colors['background'],
                'font': {
                    'color': colors['text']
                }
            }
        }
    )
]) #设置绘图背景为黑色，设置其他区域背景为黑色

if __name__ == '__main__':
    app.run_server(debug=True)

注意：
dash_html_components HTML和HTML属性之间存在一些重要差异：

HTML中的style属性是以分号分隔的字符串。在Dash中,用户可以只提供字典。
style字典中的键是camelCased（驼峰式）命名法。所以，HTML中的text-align，在style字典中为textAlign。
HTML class属性即Dash中的className。
HTML标记的子项是通过children关键字参数指定的。按照惯例，这始终是第一个参数，因此经常被省略。
除此之外，您可以在Python上下文中使用所有可用的HTML属性和标记。

可重用组件

通过在Python中编写标记，我们可以无需切换上下文或语言创建复杂的可重用组件，如表。

在这里插入图片描述

图形库

dash_core_components库包含一个名为的组件Graph。

Graph使用开源JavaScript图形库plotly.js ，呈现交互式数据可视化。Plotly.js支持超过35种图表类型，并以矢量质量SVG和高性能WebGL的方式呈现图表。

dash_core_components.Graph组件的参数figure和开放源码Python图形库Plotly plotly.py中使用的是一样的。

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

df = pd.read_csv(
    'https://gist.githubusercontent.com/chriddyp/' +
    '5d1ea79569ed194d432e56108a04d188/raw/' +
    'a9f9e8076b837d541398e999dcbac2b2826a81f8/'+
    '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)

在这里插入图片描述
这些图表具有互动性和响应性。将鼠标悬停在点上以查看其值，单击图例项以切换轨迹，单击并拖动以缩放，按住shift，然后单击并拖动以平移。

Markdown文本

虽然Dash通过dash_html_components库暴露HTML ，但在HTML中编写副本可能会很繁琐。要编写文本块，可以使用dash_core_components库中的Markdown组件。

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)

markdown_text = '''
### Dash and Markdown

Dash apps can be written in Markdown.
Dash uses the [CommonMark](http://commonmark.org/)
specification of Markdown.
Check out their [60 Second Markdown Tutorial](http://commonmark.org/help/)
if this is your first introduction to Markdown!
'''

app.layout = html.Div([
    dcc.Markdown(children=markdown_text)
])

if __name__ == '__main__':
    app.run_server(debug=True)

在这里插入图片描述

核心组件

dash_core_components包括一组更高级别的组件，如下拉列表、图形、markdown文本等。

与所有Dash组件一样，它们完全以声明方式描述。可配置的每个选项都可用作组件的关键字参数。

# -*- 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.layout = html.Div([
    html.Label('Dropdown'),
    dcc.Dropdown(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value='MTL'
    ),

    html.Label('Multi-Select Dropdown'),
    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('Radio Items'),
    dcc.RadioItems(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value='MTL'
    ),

    html.Label('Checkboxes'),
    dcc.Checklist(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        values=['MTL', 'SF']
    ),

    html.Label('Text Input'),
    dcc.Input(value='MTL', type='text'),

    html.Label('Slider'),
    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,
    ),
], style={'columnCount': 2})

if __name__ == '__main__':
    app.run_server(debug=True)

在这里插入图片描述

调用help

Dash组件是声明性的：这些组件的每个可配置方面都在实例化期间设置为关键字参数。在Python控制台中针对任何组件调用help，以了解有关组件及其可用参数的更多信息。

# Python console call help
help(dcc.Dropdown)

更多资料，请访问：https://dash.plot.ly/getting-started

Allen Moore

关注

3
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫