Dash 学习

(一)布局设置
(二)实例解析
- 实例1
- 实例2

参考网站1：链接
参考网站2：链接

(一)布局设置

Dash应用程序由两部分组成。第一部分是布局(layout)，描述应用程序的设计样式；第二部分描述了应用程序的交互性。
Dash为应用程序的所有可视化组件，提供了Python类，在dash_core_components库和dash_html_components库中，进行组件的维护。

开头先导入需要用到的所有库函数

import pandas as pd
import plotly.graph_objs as go
import dash
import dash_core_components as dcc                  # 交互式组件
import dash_html_components as html                 # 代码转html
from dash.dependencies import Input, Output         # 回调
from jupyter_plotly_dash import JupyterDash         # Jupyter中的Dash，如有疑问，见系列文章第2篇【安装】

app = JupyterDash('Hello Dash', )
app.layout = html.Div(
    children = [
        html.H1('你好，Dash'),
        html.Div('''Dash: Python网络应用框架'''),
        dcc.Graph(
            id='example-graph',
            figure = dict(
                data = [{'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': '北京'},
                        {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': '上海'}],
                layout = dict(title = 'Dash数据可视化')
            )
        )
    ]
)
app

效果图：

布局 layout 由 html.Div 和 dcc.Graph 这样的组件树组成；
Dash是 声明式 的，通过关键字参数描述组件。即Dash主要通过属性描述应用，如 style、className、id等；
dash_html_components 库为每个HTML标签都提供了对应的组件。本例中：html.H1(children=’Hello Dash’)可以生成
你好，Dash
这样的HTML语句。并非所有组件都使用纯HTML语言；
dash_core_components 这种交互式高阶组件库，是由JavaScript、HTML和CSS编写，并由React.js库生成，用于设置互动性图表组件，如控件、图形等，其语法类似Plotly；
按照惯例，children 始终是第一个属性，可以省略，即 html.H1(children=’Hello Dash’) 和 html.H1(‘Hello Dash’)相同，本例中，声明了3次，实际上都可以忽略。另外，它还可以包含字符串、数字、单个组件或组件列表。

(二)实例解析

实例1

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

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

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
# 初始化一个输入框和一个div标签内容页
app.layout = html.Div([
    dcc.Input(id='my-id', value='initial value', type='text'),
    html.Div(id='my-div')
])


@app.callback(
    Output(component_id='my-div', component_property='children'),
    [Input(component_id='my-id', component_property='value')]
)
def update_output_div(input_value):
    return 'You\'ve entered "{}"'.format(input_value)


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

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

external_stylesheets 为制定当前页面的css

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

初始化当前Dash页面

app.layout = html.Div([
    dcc.Input(id='my-id', value='initial value', type='text'),
    html.Div(id='my-div')
])

初始化标签元素

@app.callback(
    Output(component_id='my-div', component_property='children'),
    [Input(component_id='my-id', component_property='value')]
)
def update_output_div(input_value):
    return 'You\'ve entered "{}"'.format(input_value)

上面这一部分为注解执行部分，包括输入部分和输出部分，以及执行的回调函数，输入部分为从哪获取数据数据进行交互，输出部分为将获得的数据进行函数运算后输出的组件，回调函数是获得输入值后进行运算所执行的函数。当前回调函数执行的就是格式化输出我们的输入到input标签中的value。

run之后效果图：

因此Dash App的结构分为以下3个主要部分：

呈现样式：页面的CSS元素信息
标签信息：页面的HTML要素的信息
页面的交互执行信息
每次编写一个APP时可以按照这个思路来组织APP，每个页面的元素的详细讲解，逐渐通过各个demo来逐步熟悉。
实例2

(一)布局设置

你好，Dash

(二)实例解析

实例1

实例2