Dash学习笔记

Dash文档： https://dash.plotly.com/

Dash安装和示例

安装： conda install dash pandas

Dash应用由两部分够成：

• layout：描述应用的外观, 由 html节点，图形节点构成，类似 html.Div ,dcc.Graph.

  • dash_html_components： 提供 HTML tag
  • dash_core_components: 由React.js 提供交互组件

• 交互功能

示例程序：

#!/usr/bin/env python3
# -*- coding: utf-8 -*-

# Run this app with `python app.py` and
# visit http://127.0.0.1:8050/ in your web browser.

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "水果": ["苹果", "桔子", "香蕉", "苹果", "桔子", "香蕉"],
    "数量": [4, 1, 2, 2, 4, 5],
    "城市": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="水果", y="数量", color="城市", barmode="group")

markdown_text = '''
### Dash支持 markdown

- Dash 使用的 Markdown 规范： [CommonMark](http://commonmark.org/)
- Markdown教程：[60 Second Markdown Tutorial](http://commonmark.org/help/)
'''

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    ),

    dcc.Markdown(children=markdown_text)
])

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

示例程序说明：

• 通过参数 debug=True 支持热加载： app.run_server(debug=True)， 关闭热加载： app.run_server(dev_tools_hot_reload=False)
• html.Div的默认属性是： children， 用来定义页面元素列表
• 支持 Markdown
• 字体，css参考: https://dash.plotly.com/external-resources

使用 flask 运行Dash应用程序

示例：

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import flask
from werkzeug.middleware.dispatcher import DispatcherMiddleware
import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

server_flask = flask.Flask(__name__)

#  1.flask应用, 路由 "/"
@server_flask.route("/")
def main():
   return "Hello World"

# 2.dash 应用, 路由 "/dash/"
# 2.1 设置 server 和 url_base_pathname
dash_app = dash.Dash(__name__, server = server_flask, url_base_pathname='/test/')


# assume you have a "long-form" data frame
# see https://plotly.com/python/px-arguments/ for more options
df = pd.DataFrame({
    "水果": ["苹果", "桔子", "香蕉", "苹果", "桔子", "香蕉"],
    "数量": [4, 1, 2, 2, 4, 5],
    "城市": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="水果", y="数量", color="城市", barmode="group")

markdown_text = '''
### Dash支持 markdown

- Dash 使用的 Markdown 规范： [CommonMark](http://commonmark.org/)
- Markdown教程：[60 Second Markdown Tutorial](http://commonmark.org/help/)
'''

dash_app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure=fig
    ),

    dcc.Markdown(children=markdown_text)
])

# 2.2 设置 flask路由重定向路径 "/test/" 
@server_flask.route('/test/')
def funcDash():
    return flask.redirect('/dash/')


# 3.路由集成
app = DispatcherMiddleware(server_flask, {'/dash/': dash_app.server})


if __name__ == '__main__':
    # Running on http://127.0.0.1:5000/
   server_flask.run()

运行后可以访问 http://127.0.0.1:5000/test/ 查看应用

favicon.ico 加载问题

参考这里,创建 assets 文件夹，并放一个 favicon.ico 进去。