python交互式web应用dash/plotly

dash入门笔记

参考 ：
官方文档
小项目-数据处理篇：真·租房信息整理，应用dash整合到地图上

安装

dash layout

主要由dash_html_components和 dash_core_components组成。前者是纯html组件，如div; 后者是高级的组件，如 graph。
一个div中包含子元素，这些子元素放在一个列表中。children参数放在第一位，可以省略。
样式：和css中样式有些区别：

• 这里的style是以字典形式出现的。
• html中的’text-Align’变成dash中的’textAlign’。

style={'textAlign': 'center', 'color': '#7FDBFF'}

- # -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

colors = {
    'background': '#111111',
    'text': '#7FDBFF'
}

app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
    html.H1(
        children='Hello Dash',
        style={
            'textAlign': 'center',
            'color': colors['text']
        }
    ),

    html.Div(children='Dash: A web application framework for Python.', style={
        'textAlign': 'center',
        'color': colors['text']
    }),

    dcc.Graph(
        id='example-graph-2',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'plot_bgcolor': colors['background'],
                'paper_bgcolor': colors['background'],
                'font': {
                    'color': colors['text']
                }
            }
        }
    )
])

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

Basic Callbacks

有时候示例代码运行完后没有报错，但本地网址打不不开。奇怪。如果重新运行程序，要手动停止之前的程序，其实是前端和后端交互的程序。

• 尽量在全局变量中加载数据，这样在app启动时就能把数据放到内存中，提升用户体验，而不是在callback函数中加载。
• callback函数不会修改外部的变量。
• 一个callback只能更新一个output，如果需要更新多个output，就需要多个callback。
• 被修饰函数 update_output_div(input_value) 的函数名和形参都不是固定的，可以修改。callback修饰器中的input，一般和p被修饰函数的形参一致

Dash State

当Input值改变时，不用触发callback函数，而是靠一个button来触发。

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash()

app.layout = html.Div([
    dcc.Input(id='input-1-state', type='text', value='Montréal'),
    dcc.Input(id='input-2-state', type='text', value='Canada'),
    html.Button(id='submit-button', n_clicks=0, children='Submit'),
    html.Div(id='output-state')
])
# 靠button来触发callback函数，属性为n_clicks，点击次数。 
# 这里的参数分为三部分：Output, Intput, State。button是参数Input，Input组件是State参数。
@app.callback(Output('output-state', 'children'),
              [Input('submit-button', 'n_clicks')],
              [State('input-1-state', 'value'),
               State('input-2-state', 'value')])
def update_output(n_clicks, input1, input2):
    return u'''
        The Button has been pressed {} times,
        Input 1 is "{}",
        and Input 2 is "{}"
    '''.format(n_clicks, input1, input2)

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