dash佈局_part1

這篇是dash佈局layout

dash主要是由兩部分構成，一部分是layout，佈局也就是我們看到的部分，一部分是應用程序的交互性，今天主要是記錄程序的佈局
dash佈局主要就是使用dash的兩個包。正如下面的代碼：

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)

上半部分代碼沒什麼好介紹的，基本上dash都要用到，
下面部分主要就是添加一些組件，通過改變組件，來達到我們的目的。下面的組件主要就是三個，一個是總的叫Div。在這個總的Div下面，就是有h1, div，還有一個graph。載然後就是讓這個程序跑起來。這樣一分割是不是很簡單，但是說實話，我python語法還是不熟悉，哈哈哈，我感覺多練習就行了。

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={
            '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': {
                'title': 'Dash Data Visualization'
            }
        }
    )
])

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

值得注意的就是layout就是像是一個畫布啦，你可以在這個畫布上搞任何東西。 dash_html_components主要就是提供任何和html格式的東西，而dash_core_components就是提供一些像是JavaScript、CSS這樣的高級一些東西吧，相對於html格式的文件來說，內核就是React.js庫。
你看到的展示出來的字體可能和最後展示的不一樣，爲什麼，因爲主要是接受css控制，這個以後再說。

dash也是熱插拔形式，當運行了dash的python文件，如果你更改了python代碼，然後再刷新一下瀏覽器，你就會發現，dash這個面板也會更新。這一點我覺得比shiny好多了，哈哈哈，其實shiny也可以reload。
如果不喜歡這個功能，可以設置：app.run_server(dev_tools_hot_reload=False)

說到佈局，不得不說一下dash如何控制標籤，一般來說，html標籤都在html.H1裏面，就像是下面的代碼：

colors = {
    'background': '#111111',
    'text': '#7FDBFF'
}
html.H1(
        children='Hello Dash',
        style={
            'textAlign': 'center',
            'color': colors['text']
        }
    )

可以看的出來，只要更改html.H1的children內容，標籤內容就會變，更改style的內容，標籤的形式就會變。其中textAlign 控制的是標籤的位置，比如上面的就是讓標籤居中，至於style是什麼對象，colors是不是字典，先不要管，代碼先模仿起來。

# -*- coding: utf-8 -*-
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)

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)

上面的代碼運行如下：

前面我們也看到了，標籤可以顯示文本，也有地方顯示圖了，那麼我們的表哥呢？？？哈哈哈，肯定可以顯示的。

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd

df = pd.read_csv('https://gist.githubusercontent.com/chriddyp/c78bf172206ce24f77d6363a2d754b59/raw/c353e8ef842413cae56ae3920b8fd78468aa4cb2/usa-agricultural-exports-2011.csv')


def generate_table(dataframe, max_rows=10):
    return html.Table([
        html.Thead(
            html.Tr([html.Th(col) for col in dataframe.columns])
        ),
        html.Tbody([
            html.Tr([
                html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
            ]) for i in range(min(len(dataframe), max_rows))
        ])
    ])


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

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

app.layout = html.Div(children=[
    html.H4(children='US Agriculture Exports (2011)'),
    generate_table(df)
])

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

上面的代碼就是顯示一個表格，來簡單分析一下，前面的html.table就是用來顯示錶格的，html.thead是用來顯示錶頭的，html.tbody是用來顯示錶的數據的，html.tr是用來顯示錶格的每一行的，html.td是用來顯示每一行裏的每一單元塊的數據的。上面雖然是寫了一個函數，但是函數最後還在放在html.div裏面，然後運行，最後得到下面結果：