50行Python代码绘制数据大屏,这个可视化框架真的太神了(python 数据可视化框架)

作者: 俊欣

来源:关于数据分析与可视化

今天小编来为大家安利另外一个用于绘制可视化图表的Python框架,名叫Dash,建立在FlaskPlotly.js以及React.js的基础之上,在创建之出的目的是为了帮助前端知识匮乏的数据分析人员,以纯Python编程的方式快速制作出交互特性强的数据可视化大屏,在经过多年的迭代发展,如今不仅仅可以用来开发在线数据可视化作品,即便是轻量级的数据仪表盘、BI应用甚至是博客或者是常规的网站都随处可见Dash框架的影子,今天小编就先来介绍一下该框架的一些基础知识,并且来制作一个简单的数据可视化大屏。

0行Python代码绘制数据大屏,这个可视化框架真的太神了(python

Dash框架中的两个基本概念

我们先来了解一下Dash框架中的两个基本概念

  • Layout
  • callbacks

Layout顾名思义就是用来设计可视化大屏的外观和布局,添加一些例如下拉框、单选框、复选框、输入框、文本框、滑动条等组件,其中dash框架对html标签也进行了进一步的封装,使得我们直接可以通过Python代码来生成和设计每一个网页所需要的元素,例如

<div> <h1>Hello World!!</h1> <div> <p>Dash converts Python classes into HTML</p> </div></div>

我们转化成DashPython结构就是

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 dashimport dash_html_components as htmlimport dash_core_components as dccimport plotly.graph_objects as goimport plotly.express as px

读取数据并且绘制折线图

那么我们读取数据并且用plotly来绘制折线图,代码如下

app = dash.Dash() #实例化Dashdf = 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 fig app.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复制到浏览器当中便可以看到出来的结果了,如下所示

0行Python代码绘制数据大屏,这个可视化框架真的太神了(python

从代码的逻辑上来看,我们通过Dash框架中的Div方法来进行页面的布局,其中有参数id来指定网页中的元素,以及style参数来进行样式的设计,最后我们将会指出来的图表放在dcc.Graph()函数当中。

添置一个下拉框

然后我们再添置一个下拉框,当我们点击这个下拉框的时候,可是根据我们的选择展示不同公司的股价,代码如下

dcc.Dropdown(id='dropdown', options=[ {'label': '谷歌', 'value': 'GOOG'}, {'label': '苹果', 'value': 'AAPL'}, {'label': '亚马逊', 'value': 'AMZN'}, ], value='GOOG'),

output

0行Python代码绘制数据大屏,这个可视化框架真的太神了(python

options参数中的label对应的是下拉框中的各个标签,而value对应的是DataFrame当中的列名

df.head()

Output

0行Python代码绘制数据大屏,这个可视化框架真的太神了(python

添加回调函数

最后我们将下拉框和绘制折线图的函数给连接起来,我们点击下拉框选中不同的选项的时候,折线图也会相应的产生变化,

@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 time 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 fig

我们看到callback()方法中指定输入和输出的媒介,其中Input参数,里面的component_id对应的是下拉框的id也就是dropdown,而Output参数,当中的component_id对应的是折线图的id也就是bar_plot,我们来看一下最后出来的结果如下

0行Python代码绘制数据大屏,这个可视化框架真的太神了(python

最后,全部的代码如下所示

import dashimport dash_html_components as htmlimport dash_core_components as dccimport plotly.graph_objects as goimport plotly.express as pxfrom 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()

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。