python的web可视化_Python的Web可视化框架Dash(8)---核心组件

本节介绍Dash应用的常用核心组件，导入本节用到的所有包

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

一、下拉列表

(一) 默认下拉列表

没有任何额外属性的默认下拉列表的示例

代码

app = JupyterDash('dropdown01', height = 120)

app.layout = html.Div([

dcc.Dropdown(

id = 'my_dropdown',

options = [{'label': '北京', 'value': '北京'},

{'label': '上海', 'value': '上海'},

{'label': '深圳', 'value': '深圳'}],

value = '北京'),

html.Div(id = 'output-01')

])

@app.callback(Output('output-01', 'children'), [Input('my_dropdown', 'value')])

def update_output(value):

return f"您已经选择：【{value}】"

app

效果图

(二) 多值下拉列表

multi 属性设置为True时，允许用户一次选择多个值

代码

app = JupyterDash('dropdown01', height = 120)

app.layout = html.Div([

dcc.Dropdown(

id = 'my_dropdown',

options = [{'label': '北京', 'value': '北京'},

{'label': '上海', 'value': '上海'},

{'label': '深圳', 'value': '深圳'}],

value = ['北京', '上海'],

multi = True),

html.Div(id = 'output-01')

])

@app.callback(Output('output-01', 'children'), [Input('my_dropdown', 'value')])

def update_output(value):

return f"您已经选择：【{'、'.join([val for val in value])}】"

app

效果图

(三) 禁用搜索

searchable 属性，设置是否允许在下拉列表中搜索，默认为True，若要禁止搜索则需要设置为False。

代码

app = JupyterDash('dropdown01', height = 120)

app.layout = html.Div([

dcc.Dropdown(

id = 'my_dropdown',

options = [{'label': '北京', 'value': '北京'},

{'label': '上海', 'value': '上海'},

{'label': '深圳', 'value': '深圳'}],

searchable=False),

html.Div(id = 'output-01')

])

@app.callback(Output('output-01', 'children'), [Input('my_dropdown', 'value')])

def update_output(value):

pass

app

效果图

(四) 下拉清除

clearable 属性，设置是否可以清空下拉按钮的选值，默认为True，若要禁止清空则需要设置为False。

代码

app = JupyterDash('dropdown01', height = 120)

app.layout = html.Div([

dcc.Dropdown(

id = 'my_dropdown',

options = [{'label': '北京', 'value': '北京'},

{'label': '上海', 'value': '上海'},

{'label': '深圳', 'value': '深圳'}],

value = '北京',

clearable = False),

html.Div(id = 'output-01')

])

@app.callback(Output('output-01', 'children'), [Input('my_dropdown', 'value')])

def update_output(value):

return f"您已经选择：【{value}】"

app

效果图

(五) 占位符文本

placeholder 属性，设置未选择任何值时，显示的默认文本。

代码

app = JupyterDash('dropdown01', height = 120)

app.layout = html.Div([

dcc.Dropdown(

id = 'my_dropdown',

options = [{'label': '北京', 'value': '北京'},

{'label': '上海', 'value': '上海'},

{'label': '深圳', 'value': '深圳'}],

placeholder = '选择一个城市名称'),

html.Div(id = 'output-01')

])

@app.callback(Output('output-01', 'children'), [Input('my_dropdown', 'value')])

def update_output(value):

pass

app

效果图

(六) 禁用下拉列表

通过设置 disabled=True 可以禁止选取下拉列表。

代码

app = JupyterDash('dropdown01', height = 120)