纯Python轻松开发实时可视化仪表盘

1 简介

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

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

图1

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

 
 
 
 
      
  
  
  
  1. import dash 
    2.   
  
  
  
  2. import dash_core_components as dcc 
    3.   
  
  
  
  3. import dash_bootstrap_components as dbc 
    4.   
  
  
  
  4. from dash.dependencies import Input, Output 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6. app = dash.Dash(__name__) 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. app.layout = dbc.Container( 
    9.   
  
  
  
  9.     [ 
    10.   
  
  
  
  10.         dbc.Form( 
    11.   
  
  
  
  11.             [ 
    12.   
  
  
  
  12.                 dbc.FormGroup( 
    13.   
  
  
  
  13.                     [ 
    14.   
  
  
  
  14.                         dbc.Label('storage = "memory"时'), 
    15.   
  
  
  
  15.                         dbc.Input(id='input-memory1', autoComplete='off'), 
    16.   
  
  
  
  16.                         dbc.Input(id='input-memory2', style={'margin-top': '3px'}), 
    17.   
  
  
  
  17.                         dcc.Store(id='data-in-memory') 
    18.   
  
  
  
  18.                     ] 
    19.   
  
  
  
  19.                 ), 
    20.   
  
  
  
  20.                 dbc.FormGroup( 
    21.   
  
  
  
  21.                     [ 
    22.   
  
  
  
  22.                         dbc.Label('storage = "session"时'), 
    23.   
  
  
  
  23.                         dbc.Input(id='input-session1', autoComplete='off'), 
    24.   
  
  
  
  24.                         dbc.Input(id='input-session2', style={'margin-top': '3px'}), 
    25.   
  
  
  
  25.                         dcc.Store(id='data-in-session', storage_type='session') 
    26.   
  
  
  
  26.                     ] 
    27.   
  
  
  
  27.                 ), 
    28.   
  
  
  
  28.                 dbc.FormGroup( 
    29.   
  
  
  
  29.                     [ 
    30.   
  
  
  
  30.                         dbc.Label('storage = "local"时'), 
    31.   
  
  
  
  31.                         dbc.Input(id='input-local1', autoComplete='off'), 
    32.   
  
  
  
  32.                         dbc.Input(id='input-local2', style={'margin-top': '3px'}), 
    33.   
  
  
  
  33.                         dcc.Store(id='data-in-local', storage_type='local') 
    34.   
  
  
  
  34.                     ] 
    35.   
  
  
  
  35.                 ), 
    36.   
  
  
  
  36.             ] 
    37.   
  
  
  
  37.         ) 
    38.   
  
  
  
  38.     ], 
    39.   
  
  
  
  39.     style={ 
    40.   
  
  
  
  40.         'margin-top': '100px', 
    41.   
  
  
  
  41.         'max-width': '600px' 
    42.   
  
  
  
  42.     } 
    43.   
  
  
  
  43. ) 
    44.   
  
  
  
  44.  
    45.   
  
  
  
  45.  
    46.   
  
  
  
  46. # memory对应回调 
    47.   
  
  
  
  47. @app.callback( 
    48.   
  
  
  
  48.     Output('data-in-memory', 'data'), 
    49.   
  
  
  
  49.     Input('input-memory1', 'value') 
    50.   
  
  
  
  50. ) 
    51.   
  
  
  
  51. def data_in_memory_save_data(value): 
    52.   
  
  
  
  52.     if value: 
    53.   
  
  
  
  53.         return value 
    54.   
  
  
  
  54.  
    55.   
  
  
  
  55.     return dash.no_update 
    56.   
  
  
  
  56.  
    57.   
  
  
  
  57.  
    58.   
  
  
  
  58. @app.callback( 
    59.   
  
  
  
  59.     Output('input-memory2', 'placeholder'), 
    60.   
  
  
  
  60.     Input('data-in-memory', 'data') 
    61.   
  
  
  
  61. ) 
    62.   
  
  
  
  62. def data_in_memory_placeholder(data): 
    63.   
  
  
  
  63.     if data: 
    64.   
  
  
  
  64.         return data 
    65.   
  
  
  
  65.  
    66.   
  
  
  
  66.     return dash.no_update 
    67.   
  
  
  
  67.  
    68.   
  
  
  
  68.  
    69.   
  
  
  
  69. # session对应回调 
    70.   
  
  
  
  70. @app.callback( 
    71.   
  
  
  
  71.     Output('data-in-session', 'data'), 
    72.   
  
  
  
  72.     Input('input-session1', 'value') 
    73.   
  
  
  
  73. ) 
    74.   
  
  
  
  74. def data_in_session_save_data(value): 
    75.   
  
  
  
  75.     if value: 
    76.   
  
  
  
  76.         return value 
    77.   
  
  
  
  77.  
    78.   
  
  
  
  78.     return dash.no_update 
    79.   
  
  
  
  79.  
    80.   
  
  
  
  80.  
    81.   
  
  
  
  81. @app.callback( 
    82.   
  
  
  
  82.     Output('input-session2', 'placeholder'), 
    83.   
  
  
  
  83.     Input('data-in-session', 'data') 
    84.   
  
  
  
  84. ) 
    85.   
  
  
  
  85. def data_in_session_placeholder(data): 
    86.   
  
  
  
  86.     if data: 
    87.   
  
  
  
  87.         return data 
    88.   
  
  
  
  88.  
    89.   
  
  
  
  89.     return dash.no_update 
    90.   
  
  
  
  90.  
    91.   
  
  
  
  91.  
    92.   
  
  
  
  92. # local对应回调 
    93.   
  
  
  
  93. @app.callback( 
    94.   
  
  
  
  94.     Output('data-in-local', 'data'), 
    95.   
  
  
  
  95.     Input('input-local1', 'value') 
    96.   
  
  
  
  96. ) 
    97.   
  
  
  
  97. def data_in_local_save_data(value): 
    98.   
  
  
  
  98.     if value: 
    99.   
  
  
  
  99.         return value 
    100.   
  
  
  
  100.  
    101.   
  
  
  
  101.     return dash.no_update 
    102.   
  
  
  
  102.  
    103.   
  
  
  
  103.  
    104.   
  
  
  
  104. @app.callback( 
    105.   
  
  
  
  105.     Output('input-local2', 'placeholder'), 
    106.   
  
  
  
  106.     Input('data-in-local', 'data') 
    107.   
  
  
  
  107. ) 
    108.   
  
  
  
  108. def data_in_local_placeholder(data): 
    109.   
  
  
  
  109.     if data: 
    110.   
  
  
  
  110.         return data 
    111.   
  
  
  
  111.  
    112.   
  
  
  
  112.     return dash.no_update 
    113.   
  
  
  
  113.  
    114.   
  
  
  
  114.  
    115.   
  
  
  
  115. if __name__ == '__main__': 
    116.   
  
  
  
  116.     app.run_server(debug=True) 
    117.

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

图2

就是凭借着这种自由存储数据的特性，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

 
 
 
 
      
  
  
  
  1. import dash 
    2.   
  
  
  
  2. import numpy as np 
    3.   
  
  
  
  3. import dash_core_components as dcc 
    4.   
  
  
  
  4. import dash_html_components as html 
    5.   
  
  
  
  5. import dash_bootstrap_components as dbc 
    6.   
  
  
  
  6. from dash.dependencies import Input, Output, State 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. app = dash.Dash(__name__) 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. app.layout = dbc.Container( 
    11.   
  
  
  
  11.     [ 
    12.   
  
  
  
  12.         html.P( 
    13.   
  
  
  
  13.             [ 
    14.   
  
  
  
  14.                 html.Strong('贵州茅台(600519)'), 
    15.   
  
  
  
  15.                 '最新股价：', 
    16.   
  
  
  
  16.                 html.Span('2108.94', id='latest-price') 
    17.   
  
  
  
  17.             ] 
    18.   
  
  
  
  18.         ), 
    19.   
  
  
  
  19.         dcc.Interval(id='demo-interval', interval=1000) 
    20.   
  
  
  
  20.     ], 
    21.   
  
  
  
  21.     style={ 
    22.   
  
  
  
  22.         'margin-top': '100px' 
    23.   
  
  
  
  23.     } 
    24.   
  
  
  
  24. ) 
    25.   
  
  
  
  25.  
    26.   
  
  
  
  26.  
    27.   
  
  
  
  27. @app.callback( 
    28.   
  
  
  
  28.     [Output('latest-price', 'children'), 
    29.   
  
  
  
  29.      Output('latest-price', 'style')], 
    30.   
  
  
  
  30.     Input('demo-interval', 'n_intervals'), 
    31.   
  
  
  
  31.     State('latest-price', 'children') 
    32.   
  
  
  
  32. ) 
    33.   
  
  
  
  33. def fake_price_generator(n_intervals, latest_price): 
    34.   
  
  
  
  34.     fake_price = float(latest_price) + np.random.normal(0, 0.1) 
    35.   
  
  
  
  35.  
    36.   
  
  
  
  36.     if fake_price > float(latest_price): 
    37.   
  
  
  
  37.         return f'{fake_price:.2f}', {'color': 'red', 'background-color': 'rgba(195, 8, 26, 0.2)'} 
    38.   
  
  
  
  38.  
    39.   
  
  
  
  39.     elif fake_price < float(latest_price): 
    40.   
  
  
  
  40.         return f'{fake_price:.2f}', {'color': 'green', 'background-color': 'rgba(50, 115, 80, 0.2)'} 
    41.   
  
  
  
  41.  
    42.   
  
  
  
  42.     return f'{fake_price:.2f}', {'background-color': 'rgba(113, 120, 117, 0.2)'} 
    43.   
  
  
  
  43.  
    44.   
  
  
  
  44.  
    45.   
  
  
  
  45. if __name__ == '__main__': 
    46.   
  
  
  
  46.     app.run_server(debug=True) 
    47.

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

图3

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

 
 
 
 
      
  
  
  
  1. import dash 
    2.   
  
  
  
  2. import dash_daq as daq 
    3.   
  
  
  
  3. import dash_html_components as html 
    4.   
  
  
  
  4. import dash_bootstrap_components as dbc 
    5.   
  
  
  
  5. from dash.dependencies import Input, Output 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. app = dash.Dash(__name__) 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. app.layout = dbc.Container( 
    10.   
  
  
  
  10.     [ 
    11.   
  
  
  
  11.         daq.ColorPicker( 
    12.   
  
  
  
  12.             id='color-picker', 
    13.   
  
  
  
  13.             label={ 
    14.   
  
  
  
  14.                 'label': '色彩选择器', 
    15.   
  
  
  
  15.                 'style': { 
    16.   
  
  
  
  16.                     'font-size': '18px', 
    17.   
  
  
  
  17.                     'font-family': 'SimHei', 
    18.   
  
  
  
  18.                     'font-weight': 'bold' 
    19.   
  
  
  
  19.                 } 
    20.   
  
  
  
  20.             }, 
    21.   
  
  
  
  21.             size=400, 
    22.   
  
  
  
  22.             value=dict(hex="#120E03") 
    23.   
  
  
  
  23.         ), 
    24.   
  
  
  
  24.         html.P( 
    25.   
  
  
  
  25.             '测试'*100, 
    26.   
  
  
  
  26.             id='demo-p', 
    27.   
  
  
  
  27.             style={ 
    28.   
  
  
  
  28.                 'margin-top': '20px' 
    29.   
  
  
  
  29.             } 
    30.   
  
  
  
  30.         ) 
    31.   
  
  
  
  31.     ], 
    32.   
  
  
  
  32.     style={ 
    33.   
  
  
  
  33.         'margin-top': '30px', 
    34.   
  
  
  
  34.         'max-width': '500px' 
    35.   
  
  
  
  35.     } 
    36.   
  
  
  
  36. ) 
    37.   
  
  
  
  37.  
    38.   
  
  
  
  38. app.clientside_callback( 
    39.   
  
  
  
  39.     """ 
    40.   
  
  
  
  40.     function(color) { 
    41.   
  
  
  
  41.         return {'color': color.hex, 'margin-top': '20px'}; 
    42.   
  
  
  
  42.     } 
    43.   
  
  
  
  43.     """, 
    44.   
  
  
  
  44.     Output('demo-p', 'style'), 
    45.   
  
  
  
  45.     Input('color-picker', 'value') 
    46.   
  
  
  
  46. ) 
    47.   
  
  
  
  47.  
    48.   
  
  
  
  48. if __name__ == '__main__': 
    49.   
  
  
  
  49.     app.run_server(debug=True) 
    50.

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

图4

实际上是这样的：

图5

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

 
 
 
 
      
  
  
  
  1. import dash 
    2.   
  
  
  
  2. import pandas as pd 
    3.   
  
  
  
  3. import dash_datetimepicker 
    4.   
  
  
  
  4. import dash_html_components as html 
    5.   
  
  
  
  5. import dash_bootstrap_components as dbc 
    6.   
  
  
  
  6. from dash.dependencies import Input, Output 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. app = dash.Dash(__name__) 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. app.layout = dbc.Container( 
    11.   
  
  
  
  11.     [ 
    12.   
  
  
  
  12.         dash_datetimepicker.DashDatetimepicker(id="datetime-picker"), 
    13.   
  
  
  
  13.         html.H6(id='datetime-output', style={'margin-top': '20px'}) 
    14.   
  
  
  
  14.     ], 
    15.   
  
  
  
  15.     style={ 
    16.   
  
  
  
  16.         'margin-top': '100px', 
    17.   
  
  
  
  17.         'max-width': '600px' 
    18.   
  
  
  
  18.     } 
    19.   
  
  
  
  19. ) 
    20.   
  
  
  
  20.  
    21.   
  
  
  
  21.  
    22.   
  
  
  
  22. @app.callback( 
    23.   
  
  
  
  23.     Output('datetime-output', 'children'), 
    24.   
  
  
  
  24.     [Input('datetime-picker', 'startDate'), 
    25.   
  
  
  
  25.      Input('datetime-picker', 'endDate')] 
    26.   
  
  
  
  26. ) 
    27.   
  
  
  
  27. def datetime_range(startDate, endDate): 
    28.   
  
  
  
  28.     # 修正8小时时间差bug并格式化为字符串 
    29.   
  
  
  
  29.     startDate = (pd.to_datetime(startDate) + pd.Timedelta(hours=8)).strftime('%Y-%m-%d %H:%M') 
    30.   
  
  
  
  30.     endDate = (pd.to_datetime(endDate) + pd.Timedelta(hours=8)).strftime('%Y-%m-%d %H:%M') 
    31.   
  
  
  
  31.  
    32.   
  
  
  
  32.     return f'从 {startDate} 到 {endDate}' 
    33.   
  
  
  
  33.  
    34.   
  
  
  
  34.  
    35.   
  
  
  
  35. if __name__ == "__main__": 
    36.   
  
  
  
  36.     app.run_server(debug=True) 
    37.

图6

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

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

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

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

图7

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

分享文章：纯Python轻松开发实时可视化仪表盘
文章网址：http://www.shufengxianlan.com/qtweb/news18/442518.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

小程序开发知识

分类信息网站

成都网站SEO优化公司　　 　云服务器香港　　 　成都网站改版　　 　成都微信小程序开发　　 　营销网站定位　　 　成都网站建设　　 　绵阳服务器托管　　 　外贸网站设计方案　　 　成都工装公司　　 　绵阳梓潼做网站　　 　成都手机网站报价　　 　成都网站建设公司　　 　关键词优化　　 　成都二枢机房　　 　成都响应式网站建设　　 　成都网站设计制作公司　　 　复盛机电设备安装　　 　成都网络公司　　 　盐亭网站建设　　 　微信小程序开发