python基于web可视化_Python的Web可视化框架Dash(3)---布局

【Dash系列】Python的Web可视化框架Dash(1)---简介

【Dash系列】Python的Web可视化框架Dash(2)---安装

【Dash系列】Python的Web可视化框架Dash(3)---布局设置

【Dash系列】Python的Web可视化框架Dash(4)---基本回调

【Dash系列】Python的Web可视化框架Dash(5)---状态和预更新

【Dash系列】Python的Web可视化框架Dash(6)---交互和过滤

【Dash系列】Python的Web可视化框架Dash(7)---回调共享

【Dash系列】Python的Web可视化框架Dash(8)---核心组件

本节通过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')可以生成你好，Dash这样的HTML语句。并非所有组件都使用纯HTML语言；

dash_core_components 这种交互式高阶组件库，是由JavaScript、HTML和CSS编写，并由React.js库生成ÿ