您当前的位置:首页 > 互联网百科 > 大数据

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

时间:2022-06-22 09:46:04  来源:  作者:CDA数据分析师

作者: 俊欣

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

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

50行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>

我们转化成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 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复制到浏览器当中便可以看到出来的结果了,如下所示

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

 

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

添置一个下拉框

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

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

output

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

 

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

df.head()

output

50行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,我们来看一下最后出来的结果如下

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

 

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

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, Output

app = 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 fig

if __name__ == '__main__':
    app.run_server()


Tags:可视化框架   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
作者: 俊欣来源:关于数据分析与可视化今天小编来为大家安利另外一个用于绘制可视化图表的Python框架,名叫Dash,建立在Flask、Plotly.js以及React.js的基础之上,在创建之出的目的...【详细内容】
2022-06-22  Tags: 可视化框架  点击:(37)  评论:(0)  加入收藏
▌简易百科推荐
一、Zookeeper概述与安装Zookeeper概述与安装请参考我之前的文章:分布式开源协调服务&mdash;&mdash;ZookeeperZookeeper的安装方式有两种,两种方式都会讲,其实大致配置都是一样...【详细内容】
2022-07-15  大数据老司机    Tags:Zookeeper   点击:(0)  评论:(0)  加入收藏
大数据在商业中的作用日趋凸显,数据驱动已经成为企业发展的核心竞争力。然而,在日常工作中,数据团队常常是业务部门的工具人,需要数据的时候向数据团队提个需求,但业务究竟是如何...【详细内容】
2022-07-12  大数据推荐杂谈    Tags:大数据   点击:(6)  评论:(0)  加入收藏
在我们平时进行数据挖掘建模时,一般首先得对数据进行预处理,其中常用的方法包括缺失值处理、共线性处理、异常值处理、数据标准化、数据归一化等。缺失值处理有时样本的数据...【详细内容】
2022-07-11  微说互联网    Tags:大数据   点击:(8)  评论:(0)  加入收藏
作者: 俊欣来源:关于数据分析与可视化今天小编来为大家安利另外一个用于绘制可视化图表的Python框架,名叫Dash,建立在Flask、Plotly.js以及React.js的基础之上,在创建之出的目的...【详细内容】
2022-06-22  CDA数据分析师    Tags:可视化框架   点击:(37)  评论:(0)  加入收藏
最近可视化互动平台,新增支持了SVG path底图,可以用来灵活地创造出非常炫酷的可视化大屏,让数据与图例之间产生更符合更直观的关联。SVG底图大大加强了数据图表的表现力。下面...【详细内容】
2022-06-22  迪赛智慧数    Tags:数据可视化   点击:(28)  评论:(0)  加入收藏
数据出境主要指在中国境内的数据处理者通过网络及其他方式(如物理携带),将其在中国境内运营中收集和产生的数据,通过直接提供或开展业务、提供服务和产品等方式提供给境外组织或...【详细内容】
2022-06-16    人民邮电报  Tags:数据出境   点击:(21)  评论:(0)  加入收藏
一、Minio介绍1.1 Minio简介MinIO 是高性能的对象存储,是为海量数据存储、人工智能、大数据分析而设计的,它完全兼容Amazon S3接口,单个对象最大可达5TB,适合存储海量图片、视频...【详细内容】
2022-06-13  wljslmz    Tags:Minio   点击:(447)  评论:(0)  加入收藏
“小王,你把这些用户数据分析下,分别打个价值标签给我,我们制定一下618的营销活动。”这时候你拿着用户数据一脸懵?打标签?从哪几个维度?脑海里仿佛有很多想法,但又不知道从何做起...【详细内容】
2022-05-30  数据分析不是个事儿    Tags:数据分析   点击:(1)  评论:(0)  加入收藏
以下文章来源于数仓宝贝库 ,作者Saurabh业务问题的范围太广、太深、太复杂,一种工具无法解决所有问题,在大数据和分析领域尤其如此。热数据需要在内存中存储和处理,因此适合用缓...【详细内容】
2022-05-24  数据分析不是个事儿    Tags:数据存储   点击:(81)  评论:(0)  加入收藏
导读:工业物联网感知层作为物理世界与数字世界的桥梁,是数据的第一入口。现实情况下,由于感知层数据来源非常多样,来自各种多源异构设备和系统,因此如何从这些设备和系统中获取数...【详细内容】
2022-05-24  华章科技    Tags:数据采集   点击:(61)  评论:(0)  加入收藏
相关文章
    无相关信息
站内最新
站内热门
站内头条