Python中使用Dash构建仪表板

本文概述

认证方式
在Heroku上托管仪表板

Dash是用于构建Web应用程序的Python框架。它建立在Flask, Plotly.js, React和React Js之上。它使你能够使用纯Python构建仪表板。 Dash是开源的, 其应用程序可在网络浏览器上运行。在本教程中, 我们向读者介绍了Dash的基础知识, 并假定他们具有Plotly的经验。

破折号安装

为了开始使用Dash, 我们必须安装几个软件包。

核心破折号后端。
达世币前端
Dash HTML组件
短跑核心组件
密谋

pip install dash==0.21.1  
pip install dash-renderer==0.13.0  
pip install dash-html-components==0.11.0
pip install dash-core-components==0.23.0  
pip install plotly --upgrade

Dash应用程序布局

Dash应用程序通常由两部分组成。第一部分是布局, 描述了应用程序的外观, 第二部分描述了应用程序的交互性。 Dash提供HTML类, 使我们能够使用Python生成HTML内容。要使用这些类, 我们需要导入dash_core_components和dash_html_components。你还可以使用Javascript和React Js创建自己的自定义组件。

首先, 我们将使用我们喜欢的文本编辑器创建一个名为app.py的文件, 然后导入这些包。

import dash
import dash_core_components as dcc
import dash_html_components as html

就像在Flask中一样, 我们通过调用dash的Dash类来初始化Dash。完成后, 我们可以为我们的应用程序创建布局。我们使用dash_html_components中的Div类来创建HTML Div。然后, 我们使用HTML组件生成HTML组件, 例如H1, H2等。dash_html_components具有所有HTML标记。为了在我们的布局上创建图形, 我们使用dash_core_components中的Graph类。 Graph使用plotly.js呈现交互式数据可视化。 Graph类期望一个图形对象以及要绘制的数据和布局详细信息。 Dash还允许你进行样式设置, 例如更改背景颜色和文本颜色。你可以通过使用style属性并传递具有特定颜色的对象来更改背景。在我们的例子中, 我们定义了一个颜色字典, 其中包含我们想要的背景和文本颜色。同样, 我们可以使用plot_bgcolor属性更改布局背景。

在HTML中, style属性使用分号指定, 但在Dash中, 提供了词典。字典中的键是驼峰式的, 例如text-align是textAlign。 Dash中使用className而不是使用HTML中的类。

app = dash.Dash()
colors = {
    'background': '#111111', 'text': '#7FDBFF'
}
app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
    html.H1(
        children='Hello Dash', style={
            'textAlign': 'center', 'color': colors['text']
        }
    ), html.Div(children='Dash: A web application framework for Python.', style={
        'textAlign': 'center', 'color': colors['text']
    }), dcc.Graph(
        id='Graph1', figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'}, {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'}, ], 'layout': {
                'plot_bgcolor': colors['background'], 'paper_bgcolor': colors['background'], 'font': {
                    'color': colors['text']
                }
            }
        }
    )
])

为了查看我们的可视化, 我们需要像在Flask中一样运行我们的Web服务器。请记住, Dash建立在Flask之上。我们还将debug设置为true, 以确保每次进行更改时都不必不断刷新服务器。

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

接下来, 移至终端并通过键入以下代码启动服务器：python app.py

这将在http://127.0.0.1:8050/启动一个新的Web服务器。转到那边, 看看你新创建的仪表板。

生成散点图

为了绘制散点图, 我们像以前一样导入普通破折号分量。我们还需要导入Plotly graph_objs以便绘制散点图。如前所述, 我们使用Dash中的Div类和Graph组件来完成此任务。 Graph组件采用一个图形对象, 该图形对象具有数据和布局描述。我们使用graph_objs scatter属性绘制散点图。为了确保该图是散点图, 我们传递一个mode属性并将其设置为标记。否则, 我们将在图形上有线条。

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()

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.8, 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()

降价促销

有时你可能需要在仪表板中包含很多文本。你可以使用dash_core_components Mardown属性来执行此操作, 如下所示。

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

markdown_text = '''
### Dash and Markdown
A lot of text
'''

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

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

核心组件

接下来, 让我们看看使用Dash时会遇到的一些dash_core_components。你可以生成一个下拉列表, 如下所示。你可以通过调用dash_core_components的Dropdown并将选项作为字典列表进行传递来实现。你可以使用values属性设置默认值, 并传入default选项。

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

生成多选下拉列表与上面类似。唯一的变化是将multi属性设置为true, 因为默认情况下为False。然后, 你可以通过指定values属性来指定默认情况下希望多选的项目。

   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
    )

可以使用RadioItems属性生成单选按钮。然后, 你将选项作为字典列表进行传递。你还可以通过指定values属性来设置默认值。

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'
    )

要生成复选框, 请从dash_core_components调用Checklist属性。如上传递选项和默认值

 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']
    )

你肯定会在应用程序中需要输入文本。要生成它们, 你将使用Input属性。使用Html Label标签, 可以为Input字段创建标签。使用values属性, 你可以在字段中指定一些文本, 并指定使用类型的类型并指示其是否为文本字段, 数字等。

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

致电帮助

由于Dash组件是声明性的, 因此在其中任何一个上调用help命令都会为该组件生成帮助。

帮助(dcc.Input)

互动性

现在让我们介绍如何使Dash应用程序具有交互性。为此, 我们需要从dash.dependencies中导入Input和Output。不要将它们与HTML Input混淆, 因为它们是不同的。 HTML输入是从破折号核心组件导入的。在下面, 我们创建一个输入文本并将其绑定到回调, 这样, 无论何时在该框中键入内容, 它都会实时更新my-div。为了启用此功能, Dash提供了一个装饰器@app, 它可以将回调函数绑定到my-div和HTML输入字段。注意, 在声明update_output_div函数之前, 我们先使用装饰器。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash()

app.layout = html.Div([
    dcc.Input(id='my-id', value='Dash App', type='text'), html.Div(id='my-div')
])


@app.callback(
    Output(component_id='my-div', component_property='children'), [Input(component_id='my-id', component_property='value')]
)
def update_output_div(input_value):
    return 'You\'ve entered "{}"'.format(input_value)


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

认证方式

Dash通过称为dash-auth的单独程序包提供身份验证。它提供了两种身份验证模式：HTTP基本身份验证和Plotly OAuth。在基本身份验证中, 你可以在应用程序中对一组用户名和密码进行硬编码。这种方法存在一些挑战, 例如用户无法注销应用程序, 用户无法创建帐户或更改密码, 并且你有责任在代码中安全地存储用户名和密码。 Plotly OAuth通过你的在线Plotly帐户提供身份验证, 它不是免费的。

要设置基本身份验证, 请按照以下步骤操作。首先, 安装必要的软件包。

pip install dash==0.21.1
pip install dash-auth==1.0.0

完成此设置后, 你想要在应用程序中使用的用户名和密码对。

VALID_USERNAME_PASSWORD_PAIRS = [
    ['hello', 'world']
]

一旦设置了密码对, Dash的dash_auth.BasicAuth实用程序将为你进行身份验证。你所要做的就是将密码对和你的应用程序名称传递给dash_auth.BasicAuth。

app = dash.Dash('auth')
auth = dash_auth.BasicAuth(
    app, VALID_USERNAME_PASSWORD_PAIRS
)

在Heroku上托管仪表板

在Heroku上托管仪表板非常容易, 但是将需要几个步骤。

首先, 创建一个包含所有项目文件的目录。你可以在Ubuntu上使用mkdir命令执行此操作。

$ mkdir my_dash_app
$ cd my_dash_app

接下来, 使用git和virtualenv初始化文件夹。 Git用于版本控制, virtualenv将使我们能够创建一个虚拟环境来保存我们所有的Python依赖项。创建环境后, 我们使用source命令将其激活。

$ git init
$ virtualenv venv
$ source venv/bin/activate

接下来, 我们安装Dash应用程序所需的所有软件包：

$ pip install dash
$ pip install dash-renderer
$ pip install dash-core-components
$ pip install dash-html-components
$ pip install plotly

为了服务我们的Dash应用程序, 我们需要一个Python Web服务器。我们从不在生产中使用Flask的开发服务器。我们使用Gunicorn Web服务器来实现此功能。如下所示安装它：

$ pip install gunicorn

接下来, 我们需要在文件夹中创建一些文件：

app.py, 我们将在其中编写破折号应用程序。
.gitignore, 以确保不会将不必要的文件推送到生产环境
一个requirements.txt文件, 其中将包含所有Python依赖项及其版本。
用于部署的Procfile。

将以下内容添加到app.py。这只是一个示例, 因此你可以使用自己的Dash仪表板。

import os
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
server = app.server
app.layout = html.Div([
    html.H2('Hello World'), dcc.Dropdown(
        id='dropdown', options=[{'label': i, 'value': i} for i in ['LA', 'NYC', 'MTL']], value='LA'
    ), html.Div(id='display-value')
])
@app.callback(dash.dependencies.Output('display-value', 'children'), [dash.dependencies.Input('dropdown', 'value')])
def display_value(value):
    return 'You have selected "{}"'.format(value)
if __name__ == '__main__':
    app.run_server(debug=True)

重要的是要提醒自己, Dash应用程序的核心也是Flask应用程序。为了进行部署, 我们需要访问Flask应用程序实例。 Dash使我们能够使用app.server做到这一点

app = dash.Dash(__name__)
server = app.server

在.gitignore文件中添加你不希望推送到生产环境的文件。 Github提供了一个很好的Python .gitignore文件

现在, 让我们在Procfile中指定我们的部署信息。我们使用web变量将服务器指定为gunicorn。我们还使用app变量指定我们的应用程序详细信息。 app是指文件名app.py, 而server是指该文件中的server变量。

网址：gunicorn app：服务器

我们还需要将Python依赖项写入需求文件。 Heroku将在部署期间安装它们。

点冻结> requirements.txt

后续步骤假定你拥有一个Heroku帐户并已安装Heroku CLI。如果你没有这些, 请转到https://www.heroku.com并进行设置。

下一步是在终端上创建一个Heroku应用程序, 并添加我们所有的应用程序包。提交更改后；将你的应用程序推送到heroku master。该命令的输出将具有指向你在Heroku上的实时Dash应用程序的链接。

$ heroku create your-app-name
$ git add .
$ git commit -m 'Your-commit-message'
$ git push heroku master

这是使用Plotly的Dash在纯Python中构建仪表板的介绍。要了解有关Dash的更多信息, 请访问官方文档。

如果你有兴趣了解有关python的更多信息, 请查看我们的数据科学中级Python课程。

本文概述

互动性

认证方式

在Heroku上托管仪表板

相关推荐

评论抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

本文概述

互动性

认证方式

在Heroku上托管仪表板

相关推荐

评论 抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

评论抢沙发