python开发实时可视化仪表盘的示例


Posted in Python onMay 07, 2021

本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes

1 简介

这是我的系列教程「Python+Dash快速web应用开发」的第十五期,在前面的一系列教程中,我们针对Dash中的各种常用基础概念作了比较详细的介绍,如果前面的教程你有认真学习,那么相信到今天你已经有能力开发初具规模的Dash应用了。

而在Dash生态中还有一系列功能比较特殊但又非常实用的部件,今天的文章我们就来学习这些常用的「特殊部件」。

2 Dash中的常用特殊功能部件

2.1 用Store()来存储数据

在dash_core_components中有着很多功能特殊的部件,Store()就是其中之一,它的功能十分的简单,就是用来存储数据的,譬如存储一些数值、字符串等基础数据类型或者把Python中的列表、字典等作为json格式数据存进去。

Store()的主要参数/属性除了id之外,还有:

data,代表其所存放的数据,也是我们编写回调函数时关注的属性;

modified_timestamp,用于记录最后一次data属性被修改的时间戳,通常用不到;

storage_type,用于设置存储数据的生命周期,有3种,storage_type='memory'时生命周期最短,只要页面一刷新,data就会恢复初始状态;storage_type='session'时,只有浏览器被关闭时data才会被重置;而最后一种storage_type='local'时,会将数据存储在本地缓存中,只有手动清除,data才会被重置。

话不多说,直接来看一个直观的例子:

app1.py

import dash
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = dbc.Container(
    [
        dbc.Form(
            [
                dbc.FormGroup(
                    [
                        dbc.Label('storage = "memory"时'),
                        dbc.Input(id='input-memory1', autoComplete='off'),
                        dbc.Input(id='input-memory2', style={'margin-top': '3px'}),
                        dcc.Store(id='data-in-memory')
                    ]
                ),
                dbc.FormGroup(
                    [
                        dbc.Label('storage = "session"时'),
                        dbc.Input(id='input-session1', autoComplete='off'),
                        dbc.Input(id='input-session2', style={'margin-top': '3px'}),
                        dcc.Store(id='data-in-session', storage_type='session')
                    ]
                ),
                dbc.FormGroup(
                    [
                        dbc.Label('storage = "local"时'),
                        dbc.Input(id='input-local1', autoComplete='off'),
                        dbc.Input(id='input-local2', style={'margin-top': '3px'}),
                        dcc.Store(id='data-in-local', storage_type='local')
                    ]
                ),
            ]
        )
    ],
    style={
        'margin-top': '100px',
        'max-width': '600px'
    }
)


# memory对应回调
@app.callback(
    Output('data-in-memory', 'data'),
    Input('input-memory1', 'value')
)
def data_in_memory_save_data(value):
    if value:
        return value

    return dash.no_update


@app.callback(
    Output('input-memory2', 'placeholder'),
    Input('data-in-memory', 'data')
)
def data_in_memory_placeholder(data):
    if data:
        return data

    return dash.no_update


# session对应回调
@app.callback(
    Output('data-in-session', 'data'),
    Input('input-session1', 'value')
)
def data_in_session_save_data(value):
    if value:
        return value

    return dash.no_update


@app.callback(
    Output('input-session2', 'placeholder'),
    Input('data-in-session', 'data')
)
def data_in_session_placeholder(data):
    if data:
        return data

    return dash.no_update


# local对应回调
@app.callback(
    Output('data-in-local', 'data'),
    Input('input-local1', 'value')
)
def data_in_local_save_data(value):
    if value:
        return value

    return dash.no_update


@app.callback(
    Output('input-local2', 'placeholder'),
    Input('data-in-local', 'data')
)
def data_in_local_placeholder(data):
    if data:
        return data

    return dash.no_update


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

可以看到,不同storage参数对应的数据,生命周期有着很大的区别:

python开发实时可视化仪表盘的示例

就是凭借着这种自由存储数据的特性,Store()可以帮助我们完成很多非常实用的功能,我们会在本文最后的例子里进行展示。

2.2 用Interval()实现周期性回调

同样是dash_core_components中的组件,Interval()的功能也很有意思,它可以帮助我们实现周期性自动回调,譬如开发一个实时股价系统,每隔一段时间就从后台获取最新的数据,无需我们手动刷新页面,其主要的参数/属性有:

n_intervals,Interval()的核心属性,所谓的自动更新实际上就是自动对n_intervals的递增过程;

interval,数值型,用于设置每隔多少毫秒对n_intervals的值进行一次递增,默认为1000即1秒;

max_intervals,int型,用于设置在经历多少次递增后,不再继续自动更新,默认为-1即不限制;

disabled,bool型,默认为False,用于设置是否停止递增更新过程,如果说max_intervals控制的过程是for循环的话,disabled就是while循环,我们可以利用它自行编写逻辑在特定的条件下停止Interval()的递增过程。

下面我们从一个伪造数据的股价实时更新系统例子中进一步理解Interval()的作用:

app2.py

import dash
import numpy as np
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State

app = dash.Dash(__name__)

app.layout = dbc.Container(
    [
        html.P(
            [
                html.Strong('贵州茅台(600519)'),
                '最新股价:',
                html.Span('2108.94', id='latest-price')
            ]
        ),
        dcc.Interval(id='demo-interval', interval=1000)
    ],
    style={
        'margin-top': '100px'
    }
)


@app.callback(
    [Output('latest-price', 'children'),
     Output('latest-price', 'style')],
    Input('demo-interval', 'n_intervals'),
    State('latest-price', 'children')
)
def fake_price_generator(n_intervals, latest_price):
    fake_price = float(latest_price) + np.random.normal(0, 0.1)

    if fake_price > float(latest_price):
        return f'{fake_price:.2f}', {'color': 'red', 'background-color': 'rgba(195, 8, 26, 0.2)'}

    elif fake_price < float(latest_price):
        return f'{fake_price:.2f}', {'color': 'green', 'background-color': 'rgba(50, 115, 80, 0.2)'}

    return f'{fake_price:.2f}', {'background-color': 'rgba(113, 120, 117, 0.2)'}


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

哈哈,是不是非常的实用~

python开发实时可视化仪表盘的示例

2.3 利用ColorPicker()进行交互式色彩设置

接下来我们要介绍的这个很有意思的部件来自Dash的官方依赖dash_daq,它并不是自带的,我们需要用pip进行安装。

ColorPicker()的功能是渲染出一个交互式的色彩选择部件,使得我们可以更方便更直观地选择色彩值,其主要参数/属性有:

label,字符串或字典,若只传入字符串,则传入的文字会作为渲染出的色彩选择器的标题,若传入字典,其label键值对用于设置标题文本内容,style参数用于自定义css样式;

labelPosition,字符型,top时标题会置于顶部,bottom时会置于底部;

size,设置部件整体的像素宽度

value,字典型,作为参数时可以用来设定色彩选择器的初始色彩,作为属性时可以获取当前色彩选择器的选定色彩,hex键值对可以直接获取十六进制色彩值,rgb键对应的值为包含r、g、b和a四个键值对的字典,即构成rgba色彩值的三通道+透明度值。

让我们通过下面这个简单的例子来认识它的工作过程:

app3.py

import dash
import dash_daq as daq
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = dbc.Container(
    [
        daq.ColorPicker(
            id='color-picker',
            label={
                'label': '色彩选择器',
                'style': {
                    'font-size': '18px',
                    'font-family': 'SimHei',
                    'font-weight': 'bold'
                }
            },
            size=400,
            value=dict(hex="#120E03")
        ),
        html.P(
            '测试'*100,
            id='demo-p',
            style={
                'margin-top': '20px'
            }
        )
    ],
    style={
        'margin-top': '30px',
        'max-width': '500px'
    }
)

app.clientside_callback(
    """
    function(color) {
        return {'color': color.hex, 'margin-top': '20px'};
    }
    """,
    Output('demo-p', 'style'),
    Input('color-picker', 'value')
)

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

动图录制出来因为被压缩了所以色彩区域看起来跟打了码似得:

python开发实时可视化仪表盘的示例

实际上是这样的:

python开发实时可视化仪表盘的示例

2.4 利用DashDatetimepicker()进行时间范围选择

接下来我要给大家介绍的这个部件DashDatetimepicker()也是来自第三方库,它基于react-datetime,可以帮助我们创建进行日期选择功能的部件(其实dash-core_components中也有类似功能的DatePickerRange()部件,但是太丑了,而且对中文支持的不好)。

使用pip install dash_datetimepicker完成安装之后,默认的部件月份和星期的名称显示都是英文的,我通过对相关的js源码略加修改之后,便可以使用中文了,大家使用的时候把本期附件中的dash_datetimepicker.min.js放到assets目录下即可。

DashDatetimepicker()使用起来非常简单,除了id之外,我们只需要在回调中获取它的startDate与endDate属性即可捕获到用户设置的日期时间范围(在回调中我们接收到的开始结束时间需要加上8个小时,这是个bug):

app4.py

import dash
import pandas as pd
import dash_datetimepicker
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output

app = dash.Dash(__name__)

app.layout = dbc.Container(
    [
        dash_datetimepicker.DashDatetimepicker(id="datetime-picker"),
        html.H6(id='datetime-output', style={'margin-top': '20px'})
    ],
    style={
        'margin-top': '100px',
        'max-width': '600px'
    }
)


@app.callback(
    Output('datetime-output', 'children'),
    [Input('datetime-picker', 'startDate'),
     Input('datetime-picker', 'endDate')]
)
def datetime_range(startDate, endDate):
    # 修正8小时时间差bug并格式化为字符串
    startDate = (pd.to_datetime(startDate) + pd.Timedelta(hours=8)).strftime('%Y-%m-%d %H:%M')
    endDate = (pd.to_datetime(endDate) + pd.Timedelta(hours=8)).strftime('%Y-%m-%d %H:%M')

    return f'从 {startDate} 到 {endDate}'


if __name__ == "__main__":
    app.run_server(debug=True)

python开发实时可视化仪表盘的示例

3 动手打造一个实时可视化大屏

在学习完今天的内容之后,我们就可以做一些功能上很amazing的事情——搭建一个实时更新的可视化仪表盘。

思路其实很简单,主要用到今天学习到的Interval()与Store(),原理是先从官网静态的案例中移植js代码到Dash的浏览器端回调中,构建出输入为Store()的data的回调函数;

再利用Interval()的n_intervals触发Store()的data更新,从而实现这套从数据更新到图表更新的链式反应。效果如下:

python开发实时可视化仪表盘的示例

而代码涉及到多个文件,这里就不直接放出,你可以在文章开头的地址中找到对应本期的附件进行学习。

以上就是python开发实时可视化仪表盘的示例的详细内容,更多关于python开发实时可视化仪表盘的资料请关注三水点靠木其它相关文章!

Python 相关文章推荐
python脚本实现查找webshell的方法
Jul 31 Python
详解Python import方法引入模块的实例
Aug 02 Python
python构建深度神经网络(续)
Mar 10 Python
使用Python的SymPy库解决数学运算问题的方法
Mar 27 Python
python脚本开机自启的实现方法
Jun 28 Python
python实现简单聊天室功能 可以私聊
Jul 12 Python
python excel转换csv代码实例
Aug 26 Python
Django单元测试中Fixtures的使用方法
Feb 26 Python
python实现低通滤波器代码
Feb 26 Python
Python基于数列实现购物车程序过程详解
Jun 09 Python
python 根据列表批量下载网易云音乐的免费音乐
Dec 03 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
Jan 12 Python
Python使用scapy模块发包收包
如何用 Python 子进程关闭 Excel 自动化中的弹窗
PyTorch的Debug指南
May 07 #Python
基于Python的EasyGUI学习实践
Python列表删除重复元素与图像相似度判断及删除实例代码
使用python如何删除同一文件夹下相似的图片
May 07 #Python
python学习之panda数据分析核心支持库
You might like
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
jquery 学习笔记一
2010/04/07 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
2018/05/22 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
在微信小程序中使用图表的方法示例
2019/04/25 Javascript
layui清空,重置表单数据的实例
2019/09/12 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
微信小程序组件生命周期的踩坑记录
2021/03/03 Javascript
Python判断Abundant Number的方法
2015/06/15 Python
Python中常见的数据类型小结
2015/08/29 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
python多线程与多进程及其区别详解
2019/08/08 Python
python实现logistic分类算法代码
2020/02/28 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
求职简历的自我评价
2014/01/31 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
九年级语文教学反思
2016/03/03 职场文书
煤矿施工安全协议书
2016/03/22 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
代码解析React中setState同步和异步问题
2021/06/03 Javascript