关注微信公众号:一个数据人的自留地

作者介绍

莲石东路@乌森

心之所向,无界成长。从底层架构到应用实战,聊聊炼数成金背后的故事。

持续更新数据治理、数据科学、数据可视化、空间计算系列文章。

“数据人创作者联盟” 成员。


前面几篇介绍了matplotlib、plotly、pycharts这些常用的数据可视化库,通过它们可以快速创建的漂亮的图表。这些图表除了嵌入数据分析报告外,也可以嵌入到页面中作为数据可视化系统的一部分。过去,开发一个这样的数据应用需要开发人员的配合,但是如今,借助一款流行的工具,数据分析师、数据科学家们不需要太多的网页开发专业技能就能独立搭建数据分析型应用。Dash就是这样的一款工具。


01

什么是Dash


Dash是一款用于构建数据分析型应用的的开源框架,其核心包括三种技术:Plotly.js、React 和 Flask。Flask提供了数据服务器功能;React.js提供了用户界面功能;Plotly.js提供了数据图表功能。


图片

[plotly官网](https://plotly.com/)


我们可以把Dash应用部署到服务器,通过超链接分享出去。而且因为Dash应用是通过浏览器来呈现的,所以它还具备跨平台的特性。


02

安装


2017年Dash便已经作为一个python第三方库发布,我们可以通过pip install的方式进行安装。另外,它有一些常用的扩展库,建议一次性也安装了。


printf("hello world!");pip install dashpip install dash_bootstrap_componentspip install dash_datetimepicker


03

快速开始


开发Dash应用和开发Flask应用有点像,下面的一个例子我们将构建一个打印出”hello world”的示例。


import dashimport dash_html_components as html
if __name__ == '__main__':    app = dash.Dash(__name__)    app.layout = html.H1('hello world!')    app.run_server(


一个Dash应用由两个部分组成:


· Layout:布局,描述页面外观;

· callback:回调函数,描述交互性。


从上面可以看到我们声明了一个dash对象。然后定义了它的layout属性。


运行之后我们可以在 http://localhost:8050看到刚刚创建的应用。(Dash的默认端口是8050)


通过对layout属性进行定义,我们可以自由设计页面内容。


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


嵌入图表的方法也非常简单。


import dashimport dash_html_components as htmlimport dash_core_components as dccimport plotly.express as px
if __name__ == '__main__':    app = dash.Dash(__name__)    fig = px.scatter(x=range(30), y=range(20))    app.layout = html.Div(        [            html.H1('示例图表'),            dcc.Graph(figure=fig)        ]    )    app.run_server()

点赞(1254) 打赏

评论列表 共有 0 条评论

暂无评论
立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部