使用Dash快速构建你的数据可视化前端
还记得上篇文章我们采用Plotly去画出各式各样的图,这次我们就来讲讲,如何把这些图片展示在你的前端上。
Dash也是Plotly制作团队开源出来的一款dashboard开发平台,主要使用python写的,它主要可以将我们画出来的数据展示在网页上。Dash最大的优点就是你在生成前端的时候不需要写任何javascript代码(已经全在底层封装好,画图特效是react.js写的,有兴趣可以去研究一下源码),它可以直接使用Python代码将你之前在Plotly画出的图在网页上直接展示出来。
需要安装的库:
pip install plotly
pip install dash
下面我们来演示一个Dash的demo:
新建一个app.py文件,复制以下代码:
import dash
import dash_core_components as dcc
import dash_html_components as htmlexternal_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']app = dash.Dash(__name__, external_stylesheets=external_stylesheets)app.layout = html.Div(children=[html.H1(children='Dash Demo', style={"text-align": "center"}),html.Div(children='''一款牛逼的Python开发的应用程序---------Dash''',style={"text-align": "center", "color": "red"}),dcc.Graph(id='example-graph',figure={'data': [{'x': [1, 2, 3], 'y': [3, 4, 2], 'type': 'bar', 'name': '数据源A'},{'x': [1, 2, 3], 'y': [2, 3, 5], 'type': 'bar', 'name': '数据源B'},],'layout': {'title': '数据展示'}})
])if __name__ == '__main__':app.run_server(debug=True)
运行效果:
下面来说明一下,如何去使用Dash这个框架:
S1: 初始化
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
这句话主要用来初始化渲染Dash,可以按照你制定的样式进行渲染。
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
代码中引用的网址是plotly自己的css样式,你也可以修改成你自己想要的其他样式,把这个css文件down到本地然后你可以对他进行修改。具体参考:
https://dash.plotly.com/external-resources
下面重点来了!
在页面上添加你想要添加的元素,首先我们需要初始化页面的布局:
app.layout = html.Div(children=[])
初始化完毕后我们就可以向这个布局中添加元素了,我们只需要在childern这个list中添加相应的页面元素即可:(注意:每个元素都在list中)
S2: 添加标签
添加h1标题
html.H1(children='Dash Demo', style={"text-align": "center"}),
添加一个div
html.Div(children='一款牛逼的Python开发的应用程序---------Dash',style={"text-align": "center", "color": "red"}),
我们可以在里面添加style参数来制定它的样式。
S3: 添加你画的图
Graph对象主要就是用来进行画图的,你只需要将画图的数据传递给figure参数即可。
dcc.Graph(id='example-graph',figure={'data': [{'x': [1, 2, 3], 'y': [3, 4, 2], 'type': 'bar', 'name': '数据源A'},{'x': [1, 2, 3], 'y': [2, 3, 5], 'type': 'bar', 'name': '数据源B'},],'layout': {'title': '数据展示'}})
这里说一下,plotly画出的每个对象都能直接当成参数传入。
我们看一个例子:选择我们上次画等高线图,直接插入画好的fig对象。
import plotly.graph_objects as go
fig = go.Figure(data=go.Contour(z=[[10, 10.625, 12.5, 15.625, 20],[5.625, 6.25, 8.125, 11.25, 15.625],[2.5, 3.125, 5., 8.125, 12.5],[0.625, 1.25, 3.125, 6.25, 10.625],[0, 0.625, 2.5, 5.625, 10]]))
......... dcc.Graph(id='example-graph',figure=fig)
添加多个图:
S4: 添加常见的网页控件
输入框:
dcc.Input(id='my-id',value='2333',type='text'),
下拉框:
dcc.Dropdown(options=[{'label': 'New York City', 'value': 'NYC'},{'label': 'Montréal', 'value': 'MTL'},{'label': 'San Francisco', 'value': 'SF'}],value='MTL'),
滑动条:
dcc.Slider(min=0,max=9,marks={i: 'level{}'.format(i) for i in range(10)},value=5,),
复选框:
dcc.Checklist(options=[{'label': 'New York City', 'value': 'NYC'},{'label': 'Montréal', 'value': 'MTL'},{'label': 'San Francisco', 'value': 'SF'}],values=['MTL', 'SF']
)
MarkDown格式:
dcc.Markdown('''
Dash and MarkdownDash supports [Markdown](http://commonmark.org/help).Markdown is a simple way to write and format text.
It includes a syntax for things like **bold text** and *italics*,
[links](http://commonmark.org/help), inline `code` snippets, lists,
quotes, and more.
''')
S5: 启动你的应用
if __name__ == '__main__':app.run_server(debug=True)
debug在调试的时候可以打开,部署在生产环境的时候记得改成Fasle,还有个参数use_reloader,如果你是在jupyter写代码,该参数需要设置成False。
最后附上我画的dashboard:
以上,便是今天的内容,希望大家喜欢,欢迎「转发」或者点击「在看」支持,谢谢各位。“扫一扫,关注Python乱炖”
使用Dash快速构建你的数据可视化前端相关推荐
- 快速实现地图迁移数据可视化
这两天接到一个数据可视化的需求,要求展示当前选择的省.市到其他省市的产品迁徙数据,需求并不难,而且地图的可视化也比较成熟,echarts也有对应的例子,我们先看下预览图. 预览图: 简介 为什么要这篇 ...
- 自助分析平台(一):快速入门三种数据可视化插件
前言 数据中台的主要工作就是输出数据指标.数据中台要对接公司内部的多条产品线,每条产品线都会定期提一些数据需求,随着数据中台和各条产品线的合作越来越紧密,每条产品线都会积累很多指标. 随着时间和产品线 ...
- 智慧数据驱动:基于smardaten构建多维数据可视化大屏
- 【数据可视化】基于Dash制作的疫情数据可视化APP(Dash入门必读,附可运行源码)
基于Dash制作的疫情数据可视化APP 在此之前,我写过一篇博客<基于Streamlit制作的时间序列数据分析APP>.Streamlit的优点是上手简单.能在短时间内快速构建具有一定交互 ...
- 一图胜千言!数据可视化多维讲解
↑↑↑关注后"星标"Datawhale 每日干货 & 每月组队学习,不错过 Datawhale干货 作者:Dipanjan,来源:机器之心 数据聚合.汇总和可视化是支撑数据 ...
- 大数据可视化技术面临的挑战及应对措施
来源:科技导报 本文约5400字,建议阅读10分钟 本文介绍了适用于大数据的数据可视化技术,讨论了针对大数据可视化应用需求自主研发的交互式可视化设计平台AutoVis及其应用. [ 导读 ]本文从大数 ...
- vue 可视化布局工具_GitDataV一款Github的'大数据可视化平台'
简介 GitDataV基于Vue框架构建的github数据可视化平台,是一个github"大数据可视化平台",通过它你可以更直观的看到你在github里的一些数据: 个人信息(✔) ...
- 一图胜千言!Python数据可视化多维讲解
作者:Dipanjan,来源:机器之心 数据聚合.汇总和可视化是支撑数据分析领域的三大支柱.长久以来,数据可视化都是一个强有力的工具,被业界广泛使用,却受限于 2 维.在本文中,作者将探索一些有效的多 ...
- 从1维到6维,一文读懂多维数据可视化策略
本文经机器之心(微信公众号:almosthuman2014)授权转载,禁止二次转载 选自towardsdatascience 作者:Dipanjan Sarkar 参与:Jane W.乾树.黄小天 数 ...
最新文章
- pycharm + git实现两台电脑代码同步
- 万年历单片机c语言,单片机+lcd12864液晶万年历C程序
- 模糊c均值聚类_六种常用的文本聚类方法介绍
- iOS中定时器NSTimer的使用
- Python的闭包的后期绑定问题
- 准确率(accuracy),精确率(Precision),召回率(Recall)和F1-Measure
- a标签的onclick和href同时存在的写法
- 计算机课程屏幕录制,电脑录屏怎么录?游戏课程会议都能录制的实用方法
- 限时看!阿里、华为数据结构面试必考题!
- 基于php的村镇干部绩效考核系统
- 传智java完整教学视频
- Cannot resolve method ‘create‘ in ‘String‘
- 分享一个盟重英雄脚本挂机工具(附随机数生成源码)
- 进阶的阿牛哥之如何存储每日数据到csv或txt文件(如何实现换行)
- python绘制一个时间的七段数码管实例基本的七段数码管绘制
- 城市规划者建议将社区的所有马桶更换为每次冲水仅需2升的节水马桶。
- 哈希消息认证码HmacSHA256-javascript版
- 微信小程序支付,微信支付【小白专用】
- 脑动力PHP函数速查效率手册pdf
- Gradle may disable incremental compilation as the following annotation processors are not ......
热门文章
- java 输入数字到数组_java怎么实现输入n个数字赋值到一个数组内?
- 【Deep Learning】Transformers Assemble(PART I)
- python编程<十五>
- 4.7 设置单元格中文本的行间距 [原创Excel教程]
- HTML5自动换行的间距设置,设置EXCEL自动换行的行与行之间的间距的办法
- Word设置题注快捷键
- TML5期末大作业:动漫网站设计——神偷奶爸(10页) HT简单个人网页设计作业 静态动漫主题网页作业 DW个人网站模板下载 大学生简单个人网页作品代码
- python3《机器学习实战系列》学习笔记----3.2 决策树实战
- NRF52832 WDT
- 「Do.024」如何更高效使用MacBook