Dash by Plotly 学习笔记

Stella981
• 阅读 1204

一、介绍


1、dash 是什么

dash 是一个基于 Flask (Python) + React 的 web 框架。

入门指南:https://dash.plot.ly/getting-started>

二、安装


1、安装

pip install dash==0.39.0  # The core dash backend
pip install dash-daq==0.1.0  # DAQ components (newly open-sourced!)

2、启动

$ python app.py

三、使用


1、基本框架

import dash

# init dash
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets) 

# create layout
app.layout = html.Div(children=[
    # ……
]),


if __name__ == '__main__':
    # debug=True 激活所有开发工具,可选参数参考(https://dash.plot.ly/devtools)
    app.run_server(debug=True,dev_tools=)

2、组件

Declarative UI —— 声明式 UI

#####(1)html 元素

import dash_html_components as html

class/style 跟 react 的写法规范差不多。

# html.H1(children='Hello Dash') = html.H1('Hello Dash')

html.H1('Hello Dash'),

html.H1(id="h1-element", className='h1', children='Hello Dash',
style={'textAlign': 'center', 'color': '#7FDBFF'}),
布局
        # 嵌套
    html.Div(children=[
        html.Div('111'),
        html.Div('222'),
        html.Div('333'),
    ]), 


        # 12网格布局 
    html.Div(className='row', children=[
        html.Div('111', className='four columns'),
        html.Div('222', className='four columns'),
        html.Div('333', className='four columns'),
    ]),
    # 更多预设 className 可以查看: https://codepen.io/chriddyp/pen/bWLwgP.css
    # tips:className='four columns' 其实是三列,className='three columns' 其实是四列,意思是用 12 除以它。

#####(2)python 封装的组件

import dash_core_components as dcc

import plotly.graph_objs as go

包括但不限于 单选框、下拉框、Markdown、Store、Graphs……,更多组件https://dash.plot.ly/dash-core-components

    # draw Graph
    dcc.Graph(
        id='cluster_count',
        figure={
            'data': [go.Bar(
                x=[1,2,3],
                y=[100,200,300],
                text=['100个','200个','300个'],
                textposition='auto',
            )],
            'layout': go.Layout(
            )
        },
    ), 
    # figure 属性下有 ”data“+"layout" 属性

它基于plotly.py画图库 https://plot.ly/python/,画图库又基于SVG和WebGL (默认为 SVG,对大型数据集会切换到WebGL)。

# 组件用法帮助
>>> help(dcc.Dropdown)
loading 组件

dcc.Loading执行回调的过程中会显示type属性设置的 loading 图标, 而回调完成后会显示children里的内容。

dcc.Loading(id="loading-1", children=[html.Div(id="loading-output-1")], type="default"),
dcc.Input(id="input-1", value='1'),


@app.callback(Output("loading-output-1", "children"), [Input("input-1", "value")])
def input_triggers_spinner(value):
    time.sleep(1)
    return value

这里的回调@app.callback在下面会有介绍。

Interval 组件

dcc.Intervalinterval设置间隔时间,n_intervals记录触发次数。

dcc.Interval(
            id='interval-component',
            interval=1*1000, # in milliseconds
            n_intervals=0
        )
        
        
@app.callback(Output('interval-component-div', 'children'),
              [Input('interval-component', 'n_intervals')])
def update_metrics(n):
    return "Already run {} times".format(n)
(3)创建自己的组件

3、回调

Reactive Programming —— 反应式编程

from dash.dependencies import Input, Output, State

dcc.Input(id='my-input', value='initial value', type='text'),
dcc.Input(id='my-input-2', value='initial value', type='text'),
html.Button(id='submit-button', n_clicks=0, children='Submit'),
html.Div(id='my-div'),
html.Div(id='my-div-2') 

@app.callback(
    [Output(component_id='my-div', component_property='children'),
     Output(component_id='my-div-2', component_property='children')
     ],
     # 简写形式(省略 component_id + component_property)
    [Input('submit-button', 'n_clicks')],
    [State(component_id='my-input', component_property='value'),
     State(component_id='my-input-2', component_property='value')
     ]
)
def update_output_div(n_clicks, input_value, input_value_2):
    return 'You\'ve entered "{}" and "{}"'.format(input_value, input_value_2), 'You\'ve click : "{}" times'.format(n_clicks)
  
注意事项(坑)

(1)每一个 callback 都会发送一个请求

(2)所有回调里的 Input 都必须有Output。

(3)同一个组件可以出现在多个回调的Input;但是在 Output 上,只能出现在一处回调里

(4)不支持组件的双向绑定

@app.callback(
    Output('my-id-2', 'value'),
    [Input('my-id', 'value')])
def aaa(data): 
    print("11:"+data)
    return data 

@app.callback(
    Output('my-id', 'value'),
    [Input('my-id-2', 'value')])
def bbb(data): 
    print("22:"+data)
    return data 

官方说这个 feature 暂时没有解决,具体时间未知。详细讨论如下:

https://community.plot.ly/t/interdependent-components/8299/4

https://community.plot.ly/t/two-way-binding-for-rangeslider-and-input-fields-without-dependency-loop/4810

(5)在回调中共享数据

dash 有个原则就是Callbacks绝不能修改其范围之外的变量

但我们有时候需要用到共享数据,比如引入缓存机制来提高性能,这个时候应该怎么办呢?

方法一:存到当前用户的浏览器会话中(例如隐藏 DIV)

方法二:存到服务器磁盘上(例如文件或数据库)

方法三:存到服务器内存上(例如Redis)

持久化需要把数据序列化( 比如 toJSON() ),对于复杂的数据,推荐使用apache arrow

其中方法二和三可以使用Flask-Caching来实现。

pip install Flask-Caching

实现回调的缓存机制:

from flask_caching import Cache


cache = Cache(app.server, config={
    'CACHE_TYPE': 'filesystem',
    'CACHE_DIR': 'cache-directory'
})
# use redis
# 'CACHE_TYPE': 'redis',
# 'CACHE_REDIS_URL': os.environ.get('REDIS_URL', '')


html.Div(id='flask-cache-memoized-children'),
        dcc.RadioItems(
            id='flask-cache-memoized-dropdown',
            options=[
                {'label': 'Option {}'.format(i), 'value': 'Option {}'.format(i)}
                for i in range(1, 4)
            ],
            value='Option 1'
        ),
        html.Div('Results are cached for {} seconds'.format(TIMEOUT)),
        
@app.callback(
    Output('flask-cache-memoized-children', 'children'),
    [Input('flask-cache-memoized-dropdown', 'value')])
@cache.memoize(timeout=60)  # in seconds
def render(value):
    return 'Selected "{}" at "{}"'.format(
        value, datetime.datetime.now().strftime('%H:%M:%S')
    )

Dash by Plotly 学习笔记

4、交互

只适用于dash_core_components

目前只支持四种交互方式: hoverData, clickData, selectedData, relayoutData

@app.callback(
    Output('click-data', 'children'),
    [Input('cluster_count', 'clickData')])
def display_click_data(clickData):
    return json.dumps(clickData, indent=2)
注意事项(坑)

(1)回调时的形参不能随意指定

@app.callback(
    Output('hover-data', 'children'),
    [Input('cluster_count', 'hoverData')])
# tips: 这里形参的hoverData不可以随便指定其他称呼,否则会获取不到值 
def display_hover_data(hoverData):
    return json.dumps(hoverData, indent=2)

(2)暂不支持设置悬停和点击时的样式修改。

5、CSS & JS (& Header )

(1)外部文件(需手动引入)
# external_stylesheets
external_stylesheets = [
    'https://codepen.io/chriddyp/pen/bWLwgP.css',
    {
        'href': 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css',
        'rel': 'stylesheet',
        'integrity': 'sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO',
        'crossorigin': 'anonymous'
    }
]

# external_scripts
external_scripts = [
    'https://www.google-analytics.com/analytics.js',
    {'src': 'https://cdn.polyfill.io/v2/polyfill.min.js'},
    {
        'src': 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.core.js',
        'integrity': 'sha256-Qqd/EfdABZUcAxjOkMi8eGEivtdTkh3b65xCZL4qAQA=',
        'crossorigin': 'anonymous'
    }
]

meta_tags = [
    {
        'name': 'description',
        'content': 'My description'
    },
    {
        'http-equiv': 'X-UA-Compatible',
        'content': 'IE=edge'
    }
]


# init dash 
app = dash.Dash(__name__, 
      external_stylesheets=external_stylesheets,
      external_scripts=external_scripts,
      meta_tags=meta_tags
        ) 
(2)CDN文件(需手动引入)
app = dash.Dash(__name__,
    assets_external_path='http://your-external-assets-folder-url/'
)
app.scripts.config.serve_locally = False
(3) 本地文件(自动引入)

在根目录创建assets文件夹:

# 可以改这个设置
app.config.assets_folder = 'assets' 

A、里面的 CSS/JS 文件会自动引入

B、IMG 图片需要这样加载html.Img(src='/assets/image.png')

app.py
- assets/
    |-- typography.css
    |-- header.css
    |-- custom-script.js
    |-- image.png

6、路由

# ------------ 先定义 dcc.Location ,它的 pathname 属性会实时记录当前 url 的值 ------------

dcc.Location(id='url', refresh=False), # 没有任何显示作用

# ------------ 改变 url ------------

# 会刷新页面
dcc.Link('Navigate to "/"', href='/'),
dcc.Link('Navigate to "/page-2"', href='/page-2'),

# 不会刷新页面
html.A(href='/page-3',children='Navigate to "/page-3"'),


# ------------ 改变 url 的 回调 ------------

@app.callback(dash.dependencies.Output('page-content', 'children'),
              [dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
    return html.Div([
        html.H3('You are on page {}'.format(pathname))
    ])
 
构建多页面应用程序

注意事项 (坑)

如果我们通过不同的 url去渲染不同的页面的话,会碰到一个问题,就是我们可能会率先定义了回调,而回掉中的组件暂时还没渲染到app.layout中,因此Dash会引发异常以警告我们可能做错了。在这种情况下,我们可以通过设置忽略该异常。即:

app.config.suppress_callback_exceptions = True

7、Auth

#####(1)HTTP Basic Auth

pip install dash-auth

Dash by Plotly 学习笔记

import dash_auth

# Keep this out of source code repository - save in a file or a database
VALID_USERNAME_PASSWORD_PAIRS = [
    ['hello', 'world']
]
auth = dash_auth.BasicAuth(
    app,
    VALID_USERNAME_PASSWORD_PAIRS
)

app.scripts.config.serve_locally = True

#####(2)Plotly OAuth (需要付费)

8、部署

(1) 用 <iframe> 内嵌
(2)Flask 嵌入 Dash

(3)Dash 嵌入 Flask

延展知识

什么是 WSGI?

WSGI是仅针对 python 的 Web服务器网关接口(Python Web Server Gateway Interface)规范

注意,只是规范,是 web服务器和 web应用 之间的接口规范。

WSGI 跟 CGI 的区别?

CGI 是通用网关接口的规范,并不限于 Python 语言。虽然早已过时,后来分别诞生了 python 领域的 WSGI 和 php 的 FastCGI(PHP-FPM)等。

python 的 web 框架都要遵循这个规范,比如Flask内置的 **wsgiref **或第三方的 Gunicorn 。 但前者 wsgiref 性能低下,所以推荐部署时选择 flask+Gunicorn+nginx 方案。

gunicorn --workers 6 --threads 2 app:server

—workers 指定进程数

—threads 指定线程数


四、坑

1、gunicorn 部署导致页面交互进行不了

这个问题其实 github 上有人讨论(https://github.com/plotly/dash/issues/85),可惜没有有效的解决办法,我自己最后歪打正着了。

我的 dash 站点就只有单页,不过页面上有一些用 callback 实现的,用来做用户跟图表交互的功能,如图:

Dash by Plotly 学习笔记

而我遇到的问题就是,当我用 gunicorn 启动项目的时候, 我跟图表的交互,时好时坏。(即点击切换单选按钮图表没有反应)。但我用 python3 直接启动 .py 时,却没有问题。

我去观察 chrome 浏览器 inspect 的 network tab, 发现http://127.0.0.1:8000/_dash-update-component这个请求,时而200,时而500,这就是它导致了我前端操作无响应。

但是我最终解决了这个问题。我发现只要把原有的启动命令从 gunicorn -w 4 app:server 变成 gunicorn app:server 就好了。

可是,为什么呢?

2、dash 强制引用外境CDN文件导致页面加载很慢

dash 会强制引用CDN 文件: plotly-1.44.3.min.js ,且不支持代码级别的修改,最可恶的是此文件加载速度很慢,所以我们要把他改到我们自己的 cdn 路径上。

方法为简单粗暴的改源码,步骤如下:

1、查看 dash-core-components 所在路径
pip3 show dash-core-components

2、打开例如 /home/.local/lib/python3.7/site-packages/dash_core_components/__init__.py 文件

3、修改此行: 'external_url':  'https://cdn.plot.ly/plotly-1.44.3.min.js' 为我们自己的 CDN 路径

参考资料:https://github.com/plotly/plotly.py/issues/1438


参考资料

https://dash.plot.ly/

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
ES6 新增的数组的方法
给定一个数组letlist\//wu:武力zhi:智力{id:1,name:'张飞',wu:97,zhi:10},{id:2,name:'诸葛亮',wu:55,zhi:99},{id:3,name:'赵云',wu:97,zhi:66},{id:4,na
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这