本文所提供的示例代码以及对应的数据材料, 已经全部上传到我个人的仓库里面去了。1 简介这是关于我的全新系列教程, 也就是第一个阶段, 专门针对用 Dash 来开发快速 Web 应用。大家都明白要学一个新工具, 心里得有个动机。因此我在思考, 为什么我要专门为 Dash 这个工具策划并推出整个系列的教程呢?图1Dash是一个高效且简洁的框架, 它是建立在Flask、.js以及React.js的基础之上的。在设计之初, 其目的就是为了让那些前端知识匮乏的数据分析人员能够以纯编程的方式, 快速开发出交互式的数据可视化web应用。Dash已经经历了数年的迭代和发展, 早一点的Dash我也是体验过的, 不过那时候的版本还算是比较简陋的, 里头有许多问题都是亟待去解决的, 所以当时并没有引起我多大的注意。虽然近一两年的时间内得到了高速发展并且积极进行了更新迭代, 但是目前阶段的Dash框架已经变得相当成熟, 其功能丰富到了不仅仅能够用来开发在线数据可视化作品的程度, 即使是像轻量级的数据仪表盘、BI应用这类场景, 又或者是搭建文档说明、博客以及常规的网站这些需求, 都完全能够驾驭得住, 如果配合丰富的第三方拓展插件的话, 只要你懂得使用相关的技术, 就可以开发出非常精美且正规的web应用程序。图2至于Dash这个东西, 真正拿得出手的中文教程简直寥寥无几事实上对应的英文资料也不是特别丰富, 那些现存的资源大多只是在干巴巴地复述官方的说明文档。鉴于之前我曾写出过一份反响还不错的写作指南, 所以这一次我决定亲自动手为大家梳理出一套能够看得下去的系列教程内容。接下来我们就可以正式开启属于我们的Dash探索之旅了。2 Dash中的基础概念在刚开始学习Dash这个技术的时候, 我们肯定需要先对Dash里面的几个基础观念大概弄明白。接着呢, 我们先从头到尾来把Dash的环境给搭起来。考虑到大家主要是做数据分析和处理工作的, 所以我这边推荐用conda这个东西来进行环境管理。只要参考下面列出来的那几条命令, 基本上就可以把环境初始化搞定:conda create -n dash-dev python3.7 -yconda activate dash-devpip install dash -U等上述代码执行完毕以后, 你就已经把运行Dash所必需的最基础环境给创建好了, 你可以编写一个有着下面这些内容的 py 脚本来直接进行执行, 同时我们比较推荐大家使用某些特定的开发工具来专门用于进行 Dash 的开发工作。app1.pyimport dashimport dash_html_components as htmlapp dash.Dash(__name__)app.layout html.H1(第一个Dash应用)if __name__ __main__:app.run_server()运行那个脚本之后, 如果一切都没问题的话, 根据提示去点击对应的网址, 就能看到下面的内容了:图3现在为止, 我们的Dash环境已经搭建好了, 接着我们要了解一下关于Dash应用中的一些基本基础知识要点。2.第一步, 通过设计页面来完成内容的输入操作。对于一个web应用来说, 其前端所展示的页面内容, 是非常关键的一个因素。在Dash这里, 我们通过对一些属性进行定义, 这样一来, 我们就可以非常自由地去进行页面内容的设计工作。在之前那个叫做app1.py的文件里面, 我们把app设定成了html.H1这样的形式, 具体的内容是‘第一个Dash应用’这一串字符。这里的html就是咱们在最开始部分进行导入的那个模块, 它其实就是dash这个框架自带的一个依赖库。它的存在主要是为了能够在Dash应用开发的過程中, 方便地定义那些常见的html元素。这就好比说前面用过的H1, 它就会对应一级标题的意思, 也就是我们所说的html标签。对于每一个html标签函数而言, 它第一个参数的功能是代表该标签内部的内容。这个内容可以是简单的字符串, 例如之前提到的第一个Dash应用。当然, 你也可以传入多个元素的列表, 或者进行多层嵌套操作。这种方式可以用来构建结构更为复杂的页面内容。具体的实现方法, 可以参考下方的例子。app2.pyimport dashimport dash_html_components as htmlapp 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这个工具还把自己的官方依赖库里面装好了不少网上经常能看到的小部件, 这些东西都是咱们做交互功能时要靠的重要宝贝。就像接下来你要看到的这个例子一样, 我们借助它的那个零部件, 弄出了一个让大家可以用鼠标点一下就能选东西的下拉选择框。app3.pyimport dashimport dash_html_components as htmlimport dash_core_components as dccapp 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()图5Dash既然“师出同门”, 自然已经相互打通。我们同样可以非常轻松的在网页中插入数据可视化的内容。这里我们使用到., 它简化了诸多图表的创建过程。将创建好的图表对象作为参数传入dcc.Graph()中即可:app4.pyimport dashimport dash_html_components as htmlimport dash_core_components as dccimport plotly.express as pxapp dash.Dash(__name__)fig px.scatter(xrange(10), yrange(10))app.layout html.Div([html.H1(嵌入plotly图表),dcc.Graph(figurefig)])if __name__ __main__:app.run_server()图6除了前面提到的那些官方的Dash依赖库之外, 市面上还有数量非常多、非常优秀的第三方库, 这些库能够切实地帮助我们迅速搭建起视觉效果极其出色的前端内容部分。至于这部分内容的具体且详细的介绍情况, 我计划在接下来的本系列文章里面, 采取分主题的方式来进行逐一深入的讲解和说明, 请大家记得持续关注并表示期待。2.2 用实现交互Dash有一个很大的优势就是它对React.js做了高度封装, 这让我们能够不去写js代码就能完成前端跟后端之间的异步通信工作, 想要达到这个目的的话, 得用上里面的Input组件, 并且还得搭配自定义回调函数一起来把需要的交互效果给实现出来。举一个非常简单的例子, 说明一下: 我们设计了一个网络页面, 在该页面中设置有一个下拉选项组件, 当我们通过下拉菜单的方式选取到某个特定省份所对应的选项值的时候, 系统会在下方位置展示出与该省会城市相关联的内容, 也就是打印出对应的省会城市信息:app5.pyimport dashimport dash_html_components as htmlimport dash_core_components as dccfrom dash.dependencies import Input, Outputapp dash.Dash(__name__)app.layout html.Div([html.H1(根据省名查询省会城市),html.Br(),dcc.Dropdown(idprovince,options[{label: 四川省, value: 四川省},{label: 陕西省, value: 陕西省},{label: 广东省, value: 广东省}],value四川省),html.P(idcity)])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的技术工具的话, 你就必须要自己去编写那些对应的语言的代码语句, 这整个过程就会显得比较麻烦并且繁琐。图8现在, Dash这个工具已经能够支持那种多输入和多输出在一起使用的回调函数的写法了。它还能够做到阻止首次启动的时候触发回调, 也可以基于表单提交之后的状态来确定如何执行回调操作。从理论上来讲, 你可以设计出任何一种形式出现的页面交互行为, 而这些方面具体的操作方法, 我们在以后的系列文章中会把所有细节都教给大家。2.第三, 对图表里的交互式选择行为进行监听。Dash和它之间的高耦合程度, 还表现在它能够去监听那些针对图表所发生的悬浮动作、选择动作以及框选动作这些具体的行为表现, 这一特点被广泛应用于各种常规类型的图表里面, 还有地图类型的数据展示当中, 这一点呢, 凡是稍微了解一些相关知识点的朋友应该都是心知肚明的, 正是因为利用了这样的一种特性, 所以我们才可以去构建出具有非常强大交互能力的web应用程序, 就像我在下面所展示的这个典型的实际案例那样。app6.pyimport dashimport dash_core_components as dccimport dash_html_components as htmlfrom dash.dependencies import Input, Outputimport plotly.express as pxapp dash.Dash(__name__)fig px.scatter(xrange(10), yrange(10), height400)fig.update_layout(clickmodeeventselect) # 设置点击模式app.layout html.Div([dcc.Graph(figurefig, idscatter),html.Hr(),html.Div([悬浮事件,html.P(idhover)]),html.Hr(),html.Div([点击事件,html.P(idclick)]),html.Hr(),html.Div([选择事件,html.P(idselect)]),html.Hr(),html.Div([框选事件,html.P(idzoom)])])# 多对多的回调函数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至于这一部分的具体内容呢, 我是打算在接下来的一系列文章里展开非常详尽且充分的讲解的。我们即将开启的系列文章, 将会紧挨着上面说的基础概念。还会细致地把那些还没提到过的关键内容讲清楚, 内容包括多页面应用。还要讲外部 css 和 js 是怎么引入的。也要讲 Dash 应用如何进行部署和发布。这么做是为了帮广大读者朋友用起来最少的前端知识。好让你们能创造出水平很高的 web 应用。这样可以让大家平时的日常工作、学习还有生活各方面都变得更顺当一些。请等着看我们的后续文章, 不要走开
