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',) ] ), 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)哈哈，是不是非常的实用~
接下来我们要介绍的这个很有意思的部件来自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(, label={ 'label': '色彩选择器', 'style': { 'font-size': '18px', 'font-family': 'SimHei', 'font-weight': 'bold' } }, size=400, value=dict(hex="#120E03") ), html.P( '测试'*100,, 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)动图录制出来因为被压缩了所以色彩区域看起来跟打了码似得：
实际上是这样的：
接下来我要给大家介绍的这个部件DashDatetimepicker()也是来自第三方库，它基于react-datetime，可以帮助我们创建进行日期选择功能的部件（其实dash-core_components中也有类似功能的DatePickerRange()部件，但是太丑了，而且对中文支持的不好）。
使用pip install dash_datetimepicker完成安装之后，默认的部件月份和星期的名称显示都是英文的，我通过对相关的js源码略加修改之后，便可以使用中文了，大家使用的时候把本期附件中的dash_datetimepicker.min.js放到assets目录下即可。
DashDatetimepicker()使用起来非常简单，除了id之外，我们只需要在回调中获取它的startDate与endDate属性即可捕获到用户设置的日期时间范围（在回调中我们接收到的开始结束时间需要加上8个小时，这是个bug）：