50行Python代码绘制数据大屏,这个可视化框架真的太神了
今天小编来为大家安利另外一个用于绘制可视化图表的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 figapp.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 timefig = 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
,我们来看一下最后出来的结果如下
最后,全部的代码如下所示
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
from dash.dependencies import Input, Outputapp = dash.Dash()
df = px.data.stocks() app.layout = html.Div(id='parent', children=[html.H1(id='H1', children='Dash 案例一', style={'textAlign': 'center','marginTop': 40, 'marginBottom': 40}),dcc.Dropdown(id='dropdown',options=[{'label': '谷歌', 'value': 'GOOG'},{'label': '苹果', 'value': 'AAPL'},{'label': '亚马逊', 'value': 'AMZN'},],value='GOOG'),dcc.Graph(id='bar_plot'),
])@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)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 figif __name__ == '__main__':app.run_server()
NO.1
往期推荐
Historical articles
全网最详细教程整理,Python办公自动化操作Excel总结归纳
【数据分析与娱乐八卦】从Python可视化图表中探究王心凌出圈的流量密码
【原创佳作】介绍Pandas实战中一些高端玩法
分享几个令人相见恨晚的Pandas函数
分享、收藏、点赞、在看安排一下?
50行Python代码绘制数据大屏,这个可视化框架真的太神了相关推荐
- 50 行 Python 代码绘制数据大屏,这个可视化框架真的太神了
作者 | 俊欣 来源 | 关于数据分析与可视化 今天小编来为大家安利另外一个用于绘制可视化图表的Python框架,名叫Dash,建立在Flask.Plotly.js以及React.js的基础之上,在创 ...
- 3000 字推荐一个可视化神器,50 行 Python 代码制作数据大屏
作者 | 俊欣 来源 | 关于数据分析与可视化 今天小编给大家分享一个制作数据大屏的工具,非常的好用,100行左右的Python代码就可以制作出来一个完整的数据大屏,并且代码的逻辑非常容易理解. Py ...
- 愿你是那天上星,永远闪耀照亮夜空——50行Python代码绘制满天星
今天用50行Python代码绘制了星空满天的动图.解释下为什么要做这样一件事,因为今天是空军成立72周年纪念日,希望通过这样的方式去表达出每个年轻人都向往像星空中的一颗星星,散发着自己的光芒照亮整个夜 ...
- python画50个图-有人说Python是青铜?我用50行Python代码绘制3D机场分布图
绘制一款的3D图形,不仅可以直观的展示数据分析的结果,也更方便数据化运营,同时也让工作成果更容易被大众理解.本文就基于python绘制一款基础的3D地图,用于直观展示全国机场的分布情况,以及该机场出发 ...
- 有人说Python是青铜?我用50行Python代码绘制3D机场分布图
绘制一款的3D图形,不仅可以直观的展示数据分析的结果,也更方便数据化运营,同时也让工作成果更容易被大众理解.本文就基于python绘制一款基础的3D地图,用于直观展示全国机场的分布情况,以及该机场出发 ...
- python满天星效果图_50行Python代码绘制满天星
今天用50行Python代码绘制了星空满天的动图.解释下为什么要做这样一件事,因为昨天是青年节,希望通过这样的方式去表达出每个年轻人都像是星空中的一颗星星,散发这自己的光芒照亮整个夜空.效果如下: u ...
- python写一个游戏多少代码-使用50行Python代码从零开始实现一个AI平衡小游戏
集智导读: 本文会为大家展示机器学习专家 Mike Shi 如何用 50 行 Python 代码创建一个 AI,使用增强学习技术,玩耍一个保持杆子平衡的小游戏.所用环境为标准的 OpenAI Gym, ...
- 50行python游戏代码_使用50行Python代码从零开始实现一个AI平衡小游戏
使用50行Python代码从零开始实现一个AI平衡小游戏 发布时间:2020-10-23 09:26:14 来源:脚本之家 阅读:74 集智导读: 本文会为大家展示机器学习专家 Mike Shi 如何 ...
- python50行小游戏_使用50行Python代码从零开始实现一个AI平衡小游戏
集智导读: 本文会为大家展示机器学习专家 Mike Shi 如何用 50 行 Python 代码创建一个 AI,使用增强学习技术,玩耍一个保持杆子平衡的小游戏.所用环境为标准的 OpenAI Gym, ...
最新文章
- 一个正在加载网页的进度条,加载完后,自动消失?
- CTFshow php特性 web114
- 【HDU2683 TCE-frep number system 完全数+二项展开式】
- 乐享计算机会计学院,EMBA
- 知乎回答多线程爬虫案例
- Python中出现:AttributeError: module 'numpy' has no attribute 'dtype'问题解决
- ubuntu php7.0 redis,ubuntu 搭建php7 redis
- seaborn绘制概率密度图
- 3月国内网站流量:腾讯夺第二 360安全中心降至第三
- 从此,懂一点CDMA
- Hadoop MapReduce编程 API入门系列之wordcount版本3(七)
- jQuery学习_具备吸附功能的拖曳框
- 客户端负载均衡Ribbon
- win10开机小键盘灯不亮
- C语言和R语言变量命名规则的比较
- bpmn不带网关的流程
- mysql 中的1064_错误代码:mysql中的1064
- 对讲机CE认证需做什么测试
- 阿里云服务器怎么绑定域名?
- OpenCV—画出时钟并动态同步系统时间