plotly dash学习（一）

plotly Dash可以将我们用plotly画出的图片或者基于地图的展示通过交互式可视化的方式表达出来,我们可以定制Select标签，Radio标签，Input标签，Table表格，Graph图件，Map地图控件等等的一些HTML元素通过传入数据以及控件交互，使得所有要素嵌入到一个单页面中，便于我们去描述一种现象，一篇论文，甚至是一种想法。我先贴出一个官方的demo，详细的解释一下dash的构成，然后再给出一个稍微复杂的demo进行进一步的讲解，show the code

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)

这是一个简单的demo，有一个输入框，一个输出的div，当输入框中的数据改变后，div中的值也跟着改变，现在看一下这个程序的结构。

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

上面这一部分是代表当前页面的CSS，plotly官方有很多自己的css库，也可以自己定制自己的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')
])

上面这一部分是初始化当前页面的一些标签元素，如input标签，div标签等等吧，设置元素标签的id，类型等等吧，以及初始化元素的值。

@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。
这样我们看完Dash App的结构就很清楚了，分为以下3个主要部分：

1. 页面的CSS元素信息
2. 页面的HTML要素的信息

3. 页面的交互执行信息
   我们每次编写一个自己的APP的时候可以按照这个思路来组织我们的APP，每个页面的元素的详细讲解，可能以后逐渐通过各个demo来逐步熟悉。
   程序执行结果如下图：

   
   image.png