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

2019-07-24 本文已影响0人惑也

本节通过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

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

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

一、第一个Dash

(一) 代码

(二) 效果图

(三) 说明

二、自定义HTML文本样式

(一) 代码

(二) 效果图

(三) 说明

三、可重复使用的组件

(一) 代码

(二) 效果图

(三) 说明

四、可视化散点图

(一) 代码

(二) 效果图

(三) 说明

五、Markdown文本

(一) 代码

(二) 效果图

(三) 说明

六、核心组件

(一) 代码

(二) 效果图

(三) 说明

七、小结

猜你喜欢

热点阅读