本文示例代码与数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes

1 简介

   这是我的新系列教程Python+Dash快速web应用开发的第一期,我们都清楚学习一个新工具需要一定的动力,那么为什么我要专门为Dash制作一个系列教程呢?

图1

  Dash是一个高效简洁的Python框架,建立在FlaskPoltly.js以及React.js的基础上,设计之初是为了帮助前端知识匮乏的数据分析人员,以纯Python编程的方式快速开发出交互式的数据可视化web应用。

  Dash已经过数年的迭代发展,早期的Dash我也体验过,但当时还比较简陋,很多问题亟待解决,因此并没有引起我的多大注意。

  但随着近一两年的高速发展和积极更新迭代,现阶段的Dash已经是一个相当成熟的框架,且其功能已经丰富到不仅仅可以用来开发在线数据可视化作品,即使是轻量级的数据仪表盘BI应用,甚至是搭建文档说明博客或常规的网站,都驾驭得住,配合丰富的第三方拓展,只会Python的你可以开发出相当精美正式的web应用。

图2

  而关于Dash的像样的中文教程几乎没有(其实英文教程也没多少),有的也大多只是在照搬官方文档,因此类似之前写作完成反响不错的geopandas教程那样,我来写一个看得过去的系列教程吧~下面开始我们的Dash之旅吧!

2 Dash中的基础概念

  在学习Dash的一开始,我们需要对Dash的若干基础概念进行了解,首先我们来从头开始搭建Dash环境,因为主要是面向数据分析处理人员,所以我推荐使用conda进行环境管理,参考下列命令即可完成环境的初始化:

conda create -n dash-dev python=3.7 -y
conda activate dash-dev
pip install dash -U

  上述代码执行完成后,你就已经创建好最基本的Dash运行所需环境了,你可以创建代码如下的py脚本并执行(推荐使用pycharmvscode等工具进行Dash开发):

app1.py

import dash
import dash_html_components as html app = dash.Dash(__name__) app.layout = html.H1('第一个Dash应用!') if __name__ == '__main__':
app.run_server()

  运行上述脚本之后,一切正常的话,按照提示点击进对应网址会看到如下内容:

图3

  至此我们就完成了Dash环境的搭建,下面我们来了解Dash应用中的一些基础概念:

2.1 用layout设计页面内容

  一个web应用的关键之一在于其前端所呈现的页面内容,在Dash中我们通过对其layout属性进行定义,从而自由设计页面内容。

  在前面的app1.py中,我们设置了app.layout = html.H1('第一个Dash应用!'),这里的html即开头导入的dash_html_components,它是dash的自带依赖库,用于在Dash应用中定义常见的html元素,就像前面用到的H1对应一级标题,即<h1></h1>标签。

  而每个html.XX对象,其接收的第一个位置上的参数都是children,它用于表示对应html标签所包裹的内容,譬如上文的'第一个Dash应用!',也可以通过传入多元素列表或进行多层嵌套,从而构建结构更复杂的页面内容,就像下面的例子一样:

app2.py

import dash
import dash_html_components as html app = dash.Dash(__name__) app.layout = html.Div(
[
html.H1('标题1'),
html.H1('标题2'),
html.P(['测试', html.Br(), '测试']),
html.Table(
html.Tr(
[
html.Td('第一列'),
html.Td('第二列')
]
)
)
]
) if __name__ == '__main__':
app.run_server()

图4

  而除了常见的html元素之外,Dash还在其官方依赖库dash_core_components中内置了众多常见网页小部件,是我们实现交互式所依托的重要元素,就像下面的例子一样我们利用其Dropdown部件创建出一个下拉选择部件:

app3.py

import dash
import dash_html_components as html
import dash_core_components as dcc app = dash.Dash(__name__) app.layout = html.Div(
[
html.H1('下拉选择'),
html.Br(),
dcc.Dropdown(
options=[
{'label': '选项一', 'value': 1},
{'label': '选项二', 'value': 2},
{'label': '选项三', 'value': 3}
]
)
]
) if __name__ == '__main__':
app.run_server()

图5

  Dashplotly既然“师出同门”,自然已经相互打通,我们同样可以非常轻松的在网页中插入数据可视化的内容,这里我们使用到plotly.express,它简化了诸多plotly图表的创建过程,将创建好的图表对象作为figure参数传入dcc.Graph()中即可:

app4.py

import dash
import dash_html_components as html
import dash_core_components as dcc
import plotly.express as px app = dash.Dash(__name__) fig = px.scatter(x=range(10), y=range(10)) app.layout = html.Div(
[
html.H1('嵌入plotly图表'),
dcc.Graph(figure=fig)
]
) if __name__ == '__main__':
app.run_server()

图6

  除了上述的几个官方Dash依赖库以外,还有很多优秀的第三方库都可以帮助我们快速创建出效果惊人的前端内容,关于这部分的详细内容我将会在本系列之后的文章中分主题详细介绍,敬请期待。

2.2 用callback实现交互

  Dash最大的优点之一就是其高度封装了React.js,使得我们无需编写js代码即可实现前端与后端之间的异步交互,为了实现这一步,我们需要使用到dash.dependencies中的InputOutput,再配合自定义回调函数来实现所需交互功能。

  举一个非常简单的例子:我们设计一个web页面,其中有一个下拉选项部件,当我们下拉选取到某个选项值对应的省份时,其下方打印出对应的省会城市:

app5.py

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output app = dash.Dash(__name__) app.layout = html.Div(
[
html.H1('根据省名查询省会城市:'),
html.Br(),
dcc.Dropdown(
id='province',
options=[
{'label': '四川省', 'value': '四川省'},
{'label': '陕西省', 'value': '陕西省'},
{'label': '广东省', 'value': '广东省'}
],
value='四川省'
),
html.P(id='city')
]
) province2city_dict = {
'四川省': '成都市',
'陕西省': '西安市',
'广东省': '广州市'
} @app.callback(Output('city', 'children'),
Input('province', 'value'))
def province2city(province): return province2city_dict[province] if __name__ == '__main__':
app.run_server()

图7

  在交互操作的时候查看后台可以看到,每一次点选都在进行与后台的异步通信,我们整个应用的页面并没有刷新,如果不用Dash,你就得书写相应的js语句,较为繁琐:

图8

  而Dash目前已经支持多输入多输出的回调函数书写方式,以及阻止初次回调基于表单提交状态的回调等诸多特性,理论上你可以创建出任何形式的页面交互行为,这些内容我们都会在之后的系列文章中详细教授给大家。

2.3 监听图表交互式选择行为

  Dashplotly的高度耦合,还体现在其可以监听针对plotly图表的悬浮、选择、框选等行为,广泛适用于plotly中的大量常规图表与地图,这一点懂的朋友应该都明白,借助这个特性,我们可以创建出交互能力强大的web应用,就像我下面的这个典型的例子:

app6.py

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.express as px app = dash.Dash(__name__) fig = px.scatter(x=range(10), y=range(10), height=400)
fig.update_layout(clickmode='event+select') # 设置点击模式 app.layout = html.Div(
[
dcc.Graph(figure=fig, id='scatter'),
html.Hr(),
html.Div([
'悬浮事件:',
html.P(id='hover')
]),
html.Hr(),
html.Div([
'点击事件:',
html.P(id='click')
]),
html.Hr(),
html.Div([
'选择事件:',
html.P(id='select')
]),
html.Hr(),
html.Div([
'框选事件:',
html.P(id='zoom')
])
]
) # 多对多的回调函数
@app.callback([Output('hover', 'children'),
Output('click', 'children'),
Output('select', 'children'),
Output('zoom', 'children'),],
[Input('scatter', 'hoverData'),
Input('scatter', 'clickData'),
Input('scatter', 'selectedData'),
Input('scatter', 'relayoutData')])
def listen_to_hover(hoverData, clickData, selectedData, relayoutData):
return str(hoverData), str(clickData), str(selectedData), str(relayoutData) if __name__ == '__main__':
app.run_server()

  可以看到,我们监听到的悬浮、点击、选择以及框选四种行为对应传回的特征数据:

图9

  而这方面内容,我也会在之后的系列文章中进行非常详实的介绍

(数据科学学习手札102)Python+Dash快速web应用开发——基础概念篇的更多相关文章

  1. (数据科学学习手札108)Python+Dash快速web应用开发——静态部件篇(上)

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...

  2. (数据科学学习手札109)Python+Dash快速web应用开发——静态部件篇(中)

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...

  3. (数据科学学习手札115)Python+Dash快速web应用开发——交互表格篇(上)

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...

  4. (数据科学学习手札116)Python+Dash快速web应用开发——交互表格篇(中)

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...

  5. (数据科学学习手札117)Python+Dash快速web应用开发——交互表格篇(下)

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...

  6. (数据科学学习手札118)Python+Dash快速web应用开发——特殊部件篇

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...

  7. (数据科学学习手札103)Python+Dash快速web应用开发——页面布局篇

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...

  8. (数据科学学习手札105)Python+Dash快速web应用开发——回调交互篇(中)

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...

  9. (数据科学学习手札106)Python+Dash快速web应用开发——回调交互篇(下)

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...

随机推荐

  1. DVWA学习笔记

    原来装的DVWA没有认认真真地做一遍,靶场环境也有点问题了,到github上面重新下载了一遍:https://github.com/ethicalhack3r/DVWA 复习常见的高危漏洞,产生,利用 ...

  2. python自带缓存lru_cache用法及扩展(详细)

    ​ 本篇博客将结合python官方文档和源码详细讲述lru_cache缓存方法是怎么实现, 它与redis缓存的区别是什么, 在使用时碰上functiontools.wrap装饰器时会发生怎样的变化, ...

  3. 重庆聚焦区块链应用,Panda Global觉得春天真的来了!

    近日,由2020中国智博会组委会主办.重庆市大数据应用发展管理局与渝中区人民政府联合承办.重庆市区块链应用创新产业联盟和四川省区块链行业协会联合执行的"2020线上智博会区块链应用创新大赛& ...

  4. CSP-S 2020 游记

    2020.10.11 初赛了,没怎么做题,之前在网上两次初赛模拟赛 95pts / 94pts,还白嫖了一本书,感觉挺好. 去考场,中途不舒服去了厕所,回来发现有点来不及,阅读程序最后两题不会瞎蒙. ...

  5. 【复习笔记】重习 AC 自动机

    发现已经忘了许多....于是复习一下 基础要点概况 AC 自动机基于 Trie 树 的结构,即构建 AC 自动机前需要先建 Trie. 一个状态中除了转移 \(\delta\) 之外还有失配指针 \( ...

  6. CF850F Rainbow Balls 题解

    考虑最后变成哪一种颜色. 设 \(s = \sum\limits_{i=1}^n a_i\) 设现在有 \(k\) 种当前颜色, 需要全部变成该种颜色, 期望步数为 \(f_k\). 考虑状态转移.设 ...

  7. 20分钟带你掌握JavaScript Promise和 Async/Await

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://www.freecodecamp.org/news/learn-promise-a ...

  8. cocosCreator微信小游戏排行榜思路

    cocosCreator制作微信小游戏排行榜实现方案: 游戏认知:项目分为主域和子域,主域就是游戏主程部分,子域为单独处理微信排行榜公共域数据的. 游戏主域里创建一个节点,添加WXSubContext ...

  9. Spring中毒太深,离开Spring我居然连最基本的接口都不会写了

    前言 随着 Spring 的崛起以及其功能的完善,现在可能绝大部分项目的开发都是使用 Spring(全家桶) 来进行开发,Spring也确实和其名字一样,是开发者的春天,Spring 解放了程序员的双 ...

  10. 解决Linux所有命令不能使用的问题

    解决Linux所有命令不能使用的问题 出现这个问题说明你的 /etc/profile 配置出现了问题,一般是因为path配置出现了问题.排除添加内容中的错误,然后重启一个新窗口执行执行 source ...