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 进去。

© Licensed under CC BY-NC-SA 4.0

一个伟大的程序员, 其价值相当于普通程序员的1万倍!——比尔盖茨

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!