整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

Python使用Dash开发网页应用（二）

ython Dash开发Web应用的控件基础

本文主要是通过Dash的Checklist组件，简单介绍使用Dash开发的Web应用

展示效果如下：

python dash简单基础

Dash应用程序由两部分组成：

  • 第一部分是应用程序的布局（Layout），它描述了应用程序的外观。
  • 第二部分描述了应用程序的交互性。

1. Dash的布局Layout

Dash应用的布局描述了应用的外观。布局是一个分层的组件树。

Dash HTML Components(dash.html)为所有HTML tags和HTML属性关键字参数描述提供类，如style, class和id。

Dash核心组件(dash .dcc)生成高级组件，如控件和图形。

Dash Layout有几个特点：

  • 布局由组件树组成
  • 可创建复杂的可复用的组件
  • 核心组件模块dash .dcc包含一个名为Graph的组件，Graph使用开源的plotly.js JavaScript图形库呈现交互式数据可视化。js支持超过35种图表类型，并以矢量质量的SVG和高性能的WebGL呈现图表，详细可参考： plotly.py documentation and gallery
  • 对于编写文本块，可以使用dash.dcc中的Markdown组件
  • Dash核心组件(dash .dcc)包括一组较高级的组件，如下拉菜单、图形、标记块等

1.1 Dash的HTML组件

Dash是一个web应用程序框架，它提供了围绕HTML、CSS和JavaScript的纯Python抽象。而不是编写HTML或使用HTML模板引擎，用Python和Dash HTML Components模块组成布局。

Dash HTML组件模块是Dash的一部分，可以在 https://github.com/plotly/dash 找到它的源代码。

1.2 Dash的Core组件

Dash配备了用于交互用户界面的动态组件。

Dash核心组件模块可以被导入和使用，通过from dash import dcc 并允许访问许多交互式组件，包括下拉菜单、检查列表和滑块。

dcc模块是Dash的一部分，可以在 https://github.com/plotly/dash 找到它的源代码。

2. Dash Core中的Checklist

dcc.Checklist是一个用于呈现一组复选框的组件。

下面我们借助Checklist控件，组建一个简单工程，以说明Dash开发Web应用的一些简单内容

Demo的目录结构如下：

.
└── dash_demo
    ├── app.py
    └── assets
        ├── favicon.ico
        └── img
            ├── julia_50px_icon.png
            ├── python_50px_icon.png
            └── r_50px_icon.png

app.py的内容如下：

from dash import Dash, html, dcc
app = Dash(__name__)
app.title = 'Dash控件教程'
app.layout = html.Div(children=[
    dcc.Checklist(
        options=['Python语言', 'Julia语言', 'R语言'],
        value=['Python语言', 'R语言']
    ),
    dcc.Checklist(
        options=[
            {'label': 'Python语言', 'value': '1'},
            {'label': 'Julia语言', 'value': '2'},
            {'label': 'R语言', 'value': '3'},
        ],
        value=['1', '3']
    ),
    dcc.Checklist(
        options={
            '1': 'Python语言',
            '2': 'Julia语言',
            '3': 'R语言',
        },
        value=['1', '3']
    ),
    dcc.Checklist(
        options=[
            {
                'label': html.Img(src=app.get_asset_url('img/python_50px_icon.png')),
                'value': 'Python语言',
            },
            {
                'label': html.Img(src=app.get_asset_url('img/julia_50px_icon.png')),
                'value': 'Julia语言',
            },
            {
                'label': html.Img(src=app.get_asset_url('img/r_50px_icon.png')),
                'value': 'R语言',
            },
        ],
        value=['Python语言', 'R语言']
    ),
])

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

运行工程：python app.py

浏览器访问：http://127.0.0.1:8050

Dash Demo

简单说明：

  • assets目录，是官方推荐的用于存放我们的Dash应用所依赖静态资源文件的目录，如依赖的css、js、favicon.ico、各种图片及字体等静态资源，
  • Dash控件有多种使用形式，很灵活，例如文中的Checklist，选项的标签(用户看到的)和值(传递给回调的)是等价的。使用时，我们更倾向于将它们分开，这样就可以很容易地更改标签，而不更改使用该值的回调逻辑。

章关键字：Python做Web网页开发、Dash开源库Bootstrap用法、折叠面板插件Collapse用法

本章节我们介绍下Python数据可视化Dash框架中Dash Bootstrap Components开源库中Bootstrap折叠面板插件Collapse的基本用法。

在此之前，我们先来了解下“Collapse”插件基本内容。

Collapse介绍

使用Collapse组件切换应用程序中内容的可见性，通过纯Python编写的Demo效果：

接下来，介绍下该控件主要函数的用法，主要用到Dash Bootstrap控件库中的Collapse()函数，具体参数如下。

Collapse函数介绍

以下是该函数的主要参数：

  • children ：该组件的子组件。
  • id：此组件的ID，用于在回调中标识破折号组件。ID在应用中的所有组件中都必须是唯一的。
  • class_name ：通常与CSS一起使用，以设置具有公共属性的元素的样式。
  • is_open：Collapse当前是否打开。
  • loading_state ：该对象保存来自dash-renderer的加载状态对象。
  • navbar：当在导航栏中使用折叠时，设置为True。
  • style ：定义将覆盖先前设置的样式的CSS样式。

Demo代码示例

import dash_bootstrap_components as dbc
from dash import html, Input, Output, State
from server import app

collapse_html = html.Div(
    [
        html.Br(),
        html.P(html.Strong('使用Collapse组件切换应用程序中内容的可见性', style={'color': 'rgb(255, 153, 51)'})),
        html.Br(),
        dbc.Button('展示/隐藏', color='primary', id='collapse_btn', className="me-1", n_clicks=0),
        html.Hr(),
        dbc.Collapse(
            dbc.Card('这个是Collapse内容的展示', body=True),
            id='collapse',
            is_open=True,
        )
    ]
)

@app.callback(
    Output('collapse', 'is_open'),
    [Input('collapse_btn', 'n_clicks')],
    [State('collapse', 'is_open')]
)
def toggle(n, is_open):
    return not is_open

结合代码示例，可以调试体验下该插件的用法，如果想了解更多内容，可关注我，对于整个示例的Demo可私信我获取。

更多Demo效果如下

者： 俊欣

来源：关于数据分析与可视化

今天小编来为大家安利另外一个用于绘制可视化图表的Python框架，名叫Dash，建立在Flask、Plotly.js以及React.js的基础之上，在创建之出的目的是为了帮助前端知识匮乏的数据分析人员，以纯Python编程的方式快速制作出交互特性强的数据可视化大屏，在经过多年的迭代发展，如今不仅仅可以用来开发在线数据可视化作品，即便是轻量级的数据仪表盘、BI应用甚至是博客或者是常规的网站都随处可见Dash框架的影子，今天小编就先来介绍一下该框架的一些基础知识，并且来制作一个简单的数据可视化大屏。

Dash框架中的两个基本概念

我们先来了解一下Dash框架中的两个基本概念

  • Layout
  • Callbacks

Layout顾名思义就是用来设计可视化大屏的外观和布局，添加一些例如下拉框、单选框、复选框、输入框、文本框、滑动条等组件，其中Dash框架对HTML标签也进行了进一步的封装，使得我们直接可以通过Python代码来生成和设计每一个网页所需要的元素，例如

<div>
    <h1>Hello World!!</h1>
    <div>
        <p>Dash converts Python classes into HTML</p>
    </div>
</div>

我们转化成Dash的Python结构就是

html.Div([
    html.H1('Hello Dash'),
    html.Div([
        html.P('Dash converts Python classes into HTML'),
    ])
])

Callbacks也就是回调函数，基本上是以装饰器的形式来体现的，实现前后端异步通信的交互，例如我们在点击按钮或者下拉框之后出现的功能就是通过回调函数来实现的。

安装和导入模块

在导入模块之前，我们先用pip命令来进行安装，

! pip install dash   
! pip install dash-html-components
! pip install dash-core-components                           
! pip install plotly

然后我们导入这些刚刚安装完的模块，其中dash-html-components用来生成HTML标签，dash-core-components模块用来生成例如下拉框、输入框等组件，这里我们还需要用到plotly模块，因为我们需要用到的数据来自该模块，里面是一众互联网公司过去一段时间中股价的走势

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.graph_objects as go
import plotly.express as px

读取数据并且绘制折线图

那么我们读取数据并且用plotly来绘制折线图，代码如下

app = dash.Dash()   #实例化Dash
df = px.data.stocks() #读取股票数据 

def stock_prices():
    # 绘制折线图
    fig = go.Figure([go.Scatter(x=df['date'], y=df['AAPL'],
                                line=dict(color='firebrick', width=4), name='Apple')
                     ])
    fig.update_layout(title='股价随着时间的变幻',
                      xaxis_title='日期',
                      yaxis_title='价格'
                      )
    return fig
    
app.layout = html.Div(id='parent', children=[
    html.H1(id='H1', children='Dash 案例一', style={'textAlign': 'center',
                                                 'marginTop': 40, 'marginBottom': 40}),
    dcc.Graph(id='line_plot', figure=stock_prices())
])

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

我们点击运行之后会按照提示将url复制到浏览器当中便可以看到出来的结果了，如下所示

从代码的逻辑上来看，我们通过Dash框架中的Div方法来进行页面的布局，其中有参数id来指定网页中的元素，以及style参数来进行样式的设计，最后我们将会指出来的图表放在dcc.Graph()函数当中。

添置一个下拉框

然后我们再添置一个下拉框，当我们点击这个下拉框的时候，可是根据我们的选择展示不同公司的股价，代码如下

dcc.Dropdown(id='dropdown',
             options=[
                 {'label': '谷歌', 'value': 'GOOG'},
                 {'label': '苹果', 'value': 'AAPL'},
                 {'label': '亚马逊', 'value': 'AMZN'},
             ],
             value='GOOG'),

output

options参数中的label对应的是下拉框中的各个标签，而value对应的是DataFrame当中的列名

df.head()

output

添加回调函数

最后我们将下拉框和绘制折线图的函数给连接起来，我们点击下拉框选中不同的选项的时候，折线图也会相应的产生变化，

@app.callback(Output(component_id='bar_plot', component_property='figure'),
              [Input(component_id='dropdown', component_property='value')])
def graph_update(dropdown_value):
    print(dropdown_value)
    # Function for creating line chart showing Google stock prices over time
    fig = go.Figure([go.Scatter(x=df['date'], y=df['{}'.format(dropdown_value)],
                                line=dict(color='firebrick', width=4))
                     ])
    fig.update_layout(title='股价随着时间的变幻',
                      xaxis_title='日期',
                      yaxis_title='价格'
                      )
    return fig

我们看到callback()方法中指定输入和输出的媒介，其中Input参数，里面的component_id对应的是下拉框的id也就是dropdown，而Output参数，当中的component_id对应的是折线图的id也就是bar_plot，我们来看一下最后出来的结果如下

最后，全部的代码如下所示


在线咨询
上一篇：React开发利器深入解析classnames库：优雅管理动态CSS类
下一篇：js取得当前url,javascript获取当前页面url值,js获取域名

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 大悟县 哈密市 屯溪区 沈阳 斗门区 托克托县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服