還記得上篇文章我們采用Plotly去畫出各式各樣的圖，這次我們就來講講，如何把這些圖片展示在你的前端上。

Dash也是Plotly制作團隊開源出來的一款dashboard開發平臺，主要使用python寫的，它主要可以將我們畫出來的數據展示在網頁上。Dash最大的優點就是你在生成前端的時候不需要寫任何javascript代碼（已經全在底層封裝好，畫圖特效是react.js寫的，有興趣可以去研究一下源碼），它可以直接使用Python代碼將你之前在Plotly畫出的圖在網頁上直接展示出來。

需要安裝的庫：

pip install plotly
pip install dash

下面我們來演示一個Dash的demo：

新建一個app.py文件，復制以下代碼：

import dash
import dash_core_components as dcc
import dash_html_components as html

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

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

app.layout = html.Div(children=[
    html.H1(children='Dash Demo', style={"text-align": "center"}),

    html.Div(children='''
        一款牛逼的Python開發的應用程序---------Dash
    ''',
             style={"text-align": "center", "color": "red"}),

    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [3, 4, 2], 'type': 'bar', 'name': '數據源A'},
                {'x': [1, 2, 3], 'y': [2, 3, 5], 'type': 'bar', 'name': '數據源B'},
            ],
            'layout': {
                'title': '數據展示'
            }
        }
    )
])

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

運行效果：

下面來說明一下,如何去使用Dash這個框架：

S1: 初始化

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

這句話主要用來初始化渲染Dash，可以按照你制定的樣式進行渲染。

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

代碼中引用的網址是plotly自己的css樣式，你也可以修改成你自己想要的其他樣式，把這個css文件down到本地然后你可以對他進行修改。具體參考：

https://dash.plotly.com/external-resources

下面重點來了！

在頁面上添加你想要添加的元素，首先我們需要初始化頁面的布局：

app.layout = html.Div(children=[])

初始化完畢后我們就可以向這個布局中添加元素了，我們只需要在childern這個list中添加相應的頁面元素即可：（注意：每個元素都在list中）

****S2: 添加標簽

添加h1標題

html.H1(children='Dash Demo', style={"text-align": "center"}),

添加一個div

html.Div(children='一款牛逼的Python開發的應用程序---------Dash',
             style={"text-align": "center", "color": "red"}),

我們可以在里面添加style參數來制定它的樣式。

****S3: 添加你畫的圖

Graph對象主要就是用來進行畫圖的，你只需要將畫圖的數據傳遞給figure參數即可。

dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [3, 4, 2], 'type': 'bar', 'name': '數據源A'},
                {'x': [1, 2, 3], 'y': [2, 3, 5], 'type': 'bar', 'name': '數據源B'},
            ],
            'layout': {
                'title': '數據展示'
            }
        }
    )

這里說一下，plotly畫出的每個對象都能直接當成參數傳入。

我們看一個例子：選擇我們上次畫等高線圖,直接插入畫好的fig對象。

import plotly.graph_objects as go
fig = go.Figure(data=
        go.Contour(
            z=[[10, 10.625, 12.5, 15.625, 20],
               [5.625, 6.25, 8.125, 11.25, 15.625],
               [2.5, 3.125, 5., 8.125, 12.5],
               [0.625, 1.25, 3.125, 6.25, 10.625],
               [0, 0.625, 2.5, 5.625, 10]]
        ))
......... dcc.Graph(        id='example-graph',
        figure=fig
    )

添加多個圖:

****S4: 添加常見的網頁控件

輸入框:

dcc.Input(id='my-id',
              value='2333',
              type='text'
              ),

下拉框：

dcc.Dropdown(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': 'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value='MTL'
    ),

滑動條:

dcc.Slider(
        min=0,
        max=9,
        marks={i: 'level{}'.format(i) for i in range(10)},
        value=5,
    ),

復選框:

dcc.Checklist(
    options=[
        {'label': 'New York City', 'value': 'NYC'},
        {'label': 'Montréal', 'value': 'MTL'},
        {'label': 'San Francisco', 'value': 'SF'}
    ],
    values=['MTL', 'SF']
)

MarkDown格式:

dcc.Markdown('''
Dash and Markdown

Dash supports [Markdown](http://commonmark.org/help).

Markdown is a simple way to write and format text.
It includes a syntax for things like **bold text** and *italics*,
[links](http://commonmark.org/help), inline `code` snippets, lists,
quotes, and more.
''')

****S5: 啟動你的應用

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

debug在調試的時候可以打開，部署在生產環境的時候記得改成Fasle，還有個參數use_reloader,如果你是在jupyter寫代碼，該參數需要設置成False。