Python的Web可视化框架Dash(3)---布局

本节通过6个独立的示例，介绍Dash应用程序的基本使用方法

Dash应用程序由两部分组成。第一部分是布局(layout)，描述应用程序的设计样式；第二部分描述了应用程序的交互性。

Dash为应用程序的所有可视化组件，提供了Python类，在dash_core_components库和dash_html_components库中，进行组件的维护。当然，也可以使用 JavaScript 和 React.js 构建自己的组件。

导入本章所有用到的包，下文不再说明

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篇【安装】

一、第一个Dash

(一) 代码

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')可以生成<h1>你好，Dash</h1>这样的HTML语句。并非所有组件都使用纯HTML语言；
dash_core_components 这种交互式高阶组件库，是由JavaScript、HTML和CSS编写，并由React.js库生成，用于设置互动性图表组件，如控件、图形等，其语法类似Plotly；
按照惯例，children 始终是第一个属性，可以省略，即 html.H1(children='Hello Dash') 和 html.H1('Hello Dash')相同，本例中，声明了3次，实际上都可以忽略。另外，它还可以包含字符串、数字、单个组件或组件列表。

二、自定义HTML文本样式

(一) 代码

app = JupyterDash('Hello Dash Style')
colors = dict(background = '#111111', text = '#7FDBFF')

app.layout = html.Div(
    style = dict(backgroundColor = colors['background']),
    children = [
        html.H1(
            children='你好，Dash',
            style = dict(textAlign = 'center', color = colors['text'])),
        html.Div(
            children='Dash：Python网络应用框架',
            style = dict(textAlign = 'center', color = colors['text'])),
        dcc.Graph(
            id='example-graph-2',
            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(
                    plot_bgcolor = colors['background'], 
                    paper_bgcolor = colors['background'],
                    font = dict(color = colors['text'])
                )
            )
        )
    ]
)

app

(二) 效果图

(三) 说明

dash_html_components 库除了为HTML参数提供了关键字外，还为每个HTML标签提供了组件类；
示例中，使用 style 属性修改了 html.Div 和 html.H1components 行内样式；
dash_html_components 的 HTML 属性，与 HTML 属性之间存以下几点差异：

HTML中的style属性是以分号分隔的字符串；Dash用的是字典；
Dash的style字典键是 camelCased(驼峰式) 命名法，HTML 中的 text-align，在style字典中为 textAlign；
HTML 的 class 属性，对应Dash中的 className；
HTML 的子项是通过 children关键字参数指定的，按照惯例，这始终是第一个参数，经常被省略；
除了上述外，其他所有HTML属性与标签，在Python中都有效。

三、可重复使用的组件

(一) 代码

# 数据源：美国农业出口(2011年)
df = pd.read_csv(
    'https://gist.githubusercontent.com/chriddyp/'
    'c78bf172206ce24f77d6363a2d754b59/raw/'
    'c353e8ef842413cae56ae3920b8fd78468aa4cb2/'
    'usa-agricultural-exports-2011.csv')

# 定义表格组件
def create_table(df, max_rows=12):
    """基于dataframe，设置表格格式"""
    
    table = html.Table(
        # Header
        [
            html.Tr(
                [
                    html.Th(col) for col in df.columns
                ]
            )
        ] +
        # Body
        [
            html.Tr(
                [
                    html.Td(
                        df.iloc[i][col]
                    ) for col in df.columns
                ]
            ) for i in range(min(len(df), max_rows))
        ]   
    )
    return table

# 设置Dash应用程序
app = JupyterDash('Defining Components')
app.layout = html.Div(
    children = [
        html.H4(children = '美国农业出口数据表(2011年)'),
        create_table(df)
    ]
)
app

(二) 效果图

(三) 说明

在Python中定义方法，Dash通过调用，可以创建复杂的可重用组件，如表格等，无需切换上下文或语言；
本示例实现的功能，是从Pandas的数据帧生成“表格”。

四、可视化散点图

(一) 代码

# 数据源
df = pd.read_csv(
    'https://gist.githubusercontent.com/chriddyp/' +
    '5d1ea79569ed194d432e56108a04d188/raw/' +
    'a9f9e8076b837d541398e999dcbac2b2826a81f8/'+
    'gdp-life-exp-2007.csv')

app = JupyterDash('Scatter Plot')
app.layout = html.Div([
    dcc.Graph(
        id = 'life-exp-vs-gdp',
        figure = dict(
            data = [
                go.Scatter(
                    x = df[df['continent'] == i]['gdp per capita'],
                    y = df[df['continent'] == i]['life expectancy'],
                    text = df[df['continent'] == i]['country'],
                    name = i,
                    mode = 'markers',
                    opacity = 0.8,
                    marker = dict(size = 15, line = dict(width = 0.5, color = 'white'))  
                ) for i in df.continent.unique()],
            layout = go.Layout(
                xaxis = dict(type = 'log', title = 'GDP Per Capita'),
                yaxis = dict(title = 'Life Expectancy'),
                margin = {'l': 40, 'b': 40, 't': 10, 'r': 10},
                legend = dict(x = 0, y = 1),
                hovermode = 'closest'
            )  
        )
    )
])

app

(二) 效果图

(三) 说明

dash_core_components 库包含一个名为的组件Graph，其使用开源JavaScript图形库plotly.js ，呈现交互式数据可视化；
Plotly.js 支持超过35种图表类型，并以矢量质量SVG和高性能WebGL的方式呈现图表；
dash_core_components.Graph 组件的参数 figure ，与开放源码的 Python 图形库 Plotly 中的参数 figure使用方法，都是一样的；
这些图表具有互动性和响应性：

将鼠标悬停在点上以查看其值；
单击图例项以切换轨迹；
单击并拖动以缩放；
按住shift后单击并拖动，可以平移图表；

五、Markdown文本

(一) 代码

app = JupyterDash('Markdown')
text_notes = '''
### Dash和Markdown
Dash应用程序可以用Markdown编写。Dash使用 Markdown 的CommonMark规范。

如果这是你对Markdown的第一次介绍，请查看他们的[60 Second Markdown Tutorial](http://commonmark.org/help/)！
'''

app.layout = html.Div([
    dcc.Markdown(children=text_notes)
])

app

(二) 效果图

(三) 说明

虽然Dash通过 dash_html_components 库可以实现文本编写，但在HTML中编写文本，比较繁琐，需要写入大量的格式化文本，推荐使用库中的Markdown组件；
Dash使用 Markdown 的CommonMark规范；

六、核心组件

(一) 代码

app = JupyterDash('Core Components')
app.layout = html.Div([
    html.Label('下拉菜单'),
    dcc.Dropdown(
        options = [{'label': '北京', 'value': '北京'},
                   {'label': '天津', 'value': '天津'},
                   {'label': '上海', 'value': '上海'}],

        value = '北京'),
    
    html.Label('多选下拉菜单'),
    dcc.Dropdown(
        options = [{'label': '北京', 'value': '北京'},
                   {'label': '天津', 'value': '天津'},
                   {'label': '上海', 'value': '上海'}],
        value = ['北京', '上海'],
        multi = True),
    
    html.Label('单选钮'),
    dcc.RadioItems(
        options = [{'label': '北京', 'value': '北京'},
                   {'label': '天津', 'value': '天津'},
                   {'label': '上海', 'value': '上海'}],
        value = '北京'),
    
    html.Label('多选框'),
    dcc.Checklist(
        options = [{'label': '北京', 'value': '北京'},
                   {'label': '天津', 'value': '天津'},
                   {'label': '上海', 'value': '上海'}],
        value=['北京', '上海']),
    
    html.Label('Text Input'),
    dcc.Input(value = '天津', type = 'text'),
    
    html.Label('文本输入'),
    dcc.Slider(
        min = 0, max = 9, value = 5,
        marks = {i: '标签 {}'.format(i) if i == 1 else str(i) for i in range(1, 6)})
],style={'columnCount': 2})

app

(二) 效果图

(三) 说明

本示例中，展示了下拉列表单选、下拉列表多选、单选按钮、多选按钮、文本输入框、滑动条；
dash_core_components 包含一系列高级别的组件，如下拉列表、图形、Markdown文本等；
与所有Dash组件一样，这些组件都是声明式的，组件的关键字参数也一样，每个选项都可以进行配置；
在Dash核心组件库中，可以查看所有可用的组件。

七、小结

Dash组件是声明式的，在实例化关键字参数时，可设置配置项。通过调用help，可以查看Dash组件及其可用参数的更多信息；

help(dcc.Dropdown)

总结

布局(layout)用来设置Dash应用程序的样式，是结构化的树状组件；
dash_html_components 库提供了所有的HTML标签和关键字参数，用来设置HTML属性，如style、className、id等；
dash_core_components 库生成了更高级别的组件，如控件和图形；
具体参考官方文档：dash_core_components、dash_html_components