Python数据可视化Dash开源库Bootstra

Python数据可视化Dash开源库Bootstrap折叠面板插件Collapse

章关键字：Python做Web网页开发、Dash开源库Bootstrap用法、折叠面板插件Collapse用法

本章节我们介绍下Python数据可视化Dash框架中Dash Bootstrap Components开源库中Bootstrap折叠面板插件Collapse的基本用法。

在此之前，我们先来了解下“Collapse”插件基本内容。

Collapse介绍

使用Collapse组件切换应用程序中内容的可见性，通过纯Python编写的Demo效果：

接下来，介绍下该控件主要函数的用法，主要用到Dash Bootstrap控件库中的Collapse()函数，具体参数如下。

Collapse函数介绍

以下是该函数的主要参数：

children ：该组件的子组件。
id：此组件的ID，用于在回调中标识破折号组件。ID在应用中的所有组件中都必须是唯一的。
class_name ：通常与CSS一起使用，以设置具有公共属性的元素的样式。
is_open：Collapse当前是否打开。
loading_state ：该对象保存来自dash-renderer的加载状态对象。
navbar：当在导航栏中使用折叠时，设置为True。
style ：定义将覆盖先前设置的样式的CSS样式。

Demo代码示例

import dash_bootstrap_components as dbc
from dash import html, Input, Output, State
from server import app

collapse_html=html.Div(
    [
        html.Br(),
        html.P(html.Strong('使用Collapse组件切换应用程序中内容的可见性', style={'color': 'rgb(255, 153, 51)'})),
        html.Br(),
        dbc.Button('展示/隐藏', color='primary', id='collapse_btn', className="me-1", n_clicks=0),
        html.Hr(),
        dbc.Collapse(
            dbc.Card('这个是Collapse内容的展示', body=True),
            id='collapse',
            is_open=True,
        )
    ]
)

@app.callback(
    Output('collapse', 'is_open'),
    [Input('collapse_btn', 'n_clicks')],
    [State('collapse', 'is_open')]
)
def toggle(n, is_open):
    return not is_open

结合代码示例，可以调试体验下该插件的用法，如果想了解更多内容，可关注我，对于整个示例的Demo可私信我获取。

更多Demo效果如下

说明：

======

1.1 今天白天发过有关Dash的文章，发现有问题，先撤回，再删除。虽然会严重影响推荐，但是为了读者负责任，我愿意承担这样，不在乎推荐。所以喜欢的，请点赞、关注、转发、评论和收藏。

1.2 Dash是一个纯Python写成的框架,无需JavaScript即可构建交互式的分析类web应用程序。

1.3 Dash是一个优秀的交互式可视化工具，基于plotly。

1.4 python可视化库plotly生态简介(plotly, plotly_express, dash)。

2 安装：

=====

pip install dash==1.12.0
#本机安装
pip3.8 install dash  #我任性一点，不指定版本安装

3 官网：

=====

https://github.com/plotly/dash
https://plotly.com/dash  #本机太卡，基本没进去过
https://dash-gallery.plotly.host/Portal/

4 基本作图：

=========

4.1 柱状图bar：

===========

4.1.1 代码：

# -*- 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)  #方法三
#app=dash.Dash(__name__)  #方法二
app=dash.Dash()  #注意等同于上面，方法一
#html的div容器布局
app.layout=html.Div(
    children=[
        #h1文字，这个与Html的h1~4的字体一样
        #html.H1(children='Hello Dash'),
        html.H1('Hello Dash'),  #同上面
        #html.Label('Hello Dash'),  #注意label与div的文本一样，字体大小等
        #文字
        html.Div(children='''Dash: A web application framework for Python.'''),
        #可视化作图
        dcc.Graph(
        #id='example-graph',  #如果布局较多的内容，id就很重要
        figure={
            'data': [
                #type为bar---柱状图
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': '汽车'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': '火车'},
            ],
            #title就是图表的标题
            'layout': {'title': 'Dash Data Visualization'}
                }
                  )
            ])

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

#其实是结合flask的在线可视化作图

4.1.2 操作和效果图：

4.2 折线图line：

===========

4.2.1 代码：

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

app=dash.Dash()
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': [
                #由bar柱状图改为line折线图，仅仅改type为line---折线图
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'line', 'name': '汽车'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'line', 'name': '火车'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }
        }
    )
])

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

4.2.2 操作和效果图：

4.3 散点图Scatter：

==============

4.3.1 代码：

import dash
import dash_core_components as dcc
import dash_html_components as html

app=dash.Dash()

app.layout=html.Div([
    dcc.Graph(
        figure={
            'data': [
                #A组数据
                {
                    'x': [1, 2, 3, 4],
                    'y': [4, 1, 3, 5],
                    'text': ['鸡', '鸭', '鹅', '鸟'],
                    'name': 'A组',
                    'mode': 'markers',
                    #散点图大小设置
                    'marker': {'size': 20}
                },
                #B组数据
                {
                    'x': [1, 2, 3, 4],
                    'y': [9, 4, 1, 4],
                    'text': ['猪', '狗', '牛', '羊'],
                    'name': 'B组',
                    'mode': 'markers',
                    #散点图大小设置
                    'marker': {'size': 20}
                }
            ],
            'layout': 
               #图表标题
               {'title': 'Dash Data Visualization'}  
        }
    ),
])


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

4.3.2 操作和效果图：注意因为我的谷歌浏览器并没有关闭，所以启动后自动刷新。

4.4 高级散点图Scatter：

==================

4.4.1 代码：

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go

app=dash.Dash()
#在线csv地址和引用
'''
df=pd.read_csv(
    'https://gist.githubusercontent.com/chriddyp/' +
    '5d1ea79569ed194d432e56108a04d188/raw/' +
    'a9f9e8076b837d541398e999dcbac2b2826a81f8/'+
    'gdp-life-exp-2007.csv')
'''
#将数据csv下载到本地的引用
df=pd.read_csv('/home/xgj/Desktop/dash/gdp-life-exp-2007.csv')

app.layout=html.Div([
    dcc.Graph(
        id='life-exp-vs-gdp',
        figure={
            'data': [
                go.Scatter(
                
                    x=df[df['continent']==i]['gdp per capita'],
                    y=df[df['continent']==i]['life expectancy'],
                    text=df[df['continent']==i]['country'],
                    mode='markers',
                    opacity=0.7,
                    marker={
                        'size': 15,
                        'line': {'width': 0.5, 'color': 'white'}
                    },
                    name=i)for i in df.continent.unique()
            ],

            'layout': go.Layout(
                xaxis={'type': 'log', 'title': 'GDP Per Capita'},
                yaxis={'title': 'Life Expectancy'},
                margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
                legend={'x': 0, 'y': 1},
                hovermode='closest')
        }
    )
])

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

4.4.2 操作和效果图：

5 控件：

=====

5.1 代码：

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

app=dash.Dash()

app.layout=html.Div([
    #展示1：
    html.Label('Dropdown=下拉菜单'),
    dcc.Dropdown(
        options=[
            {'label': '太阳', 'value': 'SUN'},
            {'label': '地球', 'value': 'EARTH'},
            {'label': '月亮', 'value': 'MOON'}
        ],
        value='SUN' #初始值
    ),
    #展示2：
    html.Label('Multi-Select Dropdown=多选菜单'),
    dcc.Dropdown(
        options=[
            {'label': '太阳', 'value': 'SUN'},
            {'label': '地球', 'value': 'EARTH'},
            {'label': '月亮', 'value': 'MOON'}
        ],
        #初始值显示对应的label
        value=['SUN', 'MOON'],
        multi=True
    ),
    #展示3：
    html.Label('Radio Items=单选菜单'),
    dcc.RadioItems(
        options=[
            {'label': '太阳', 'value': 'SUN'},
            {'label': '地球', 'value': 'EARTH'},
            {'label': '月亮', 'value': 'MOON'}
        ],
        value='MTL'
    ),
    #展示4：
    html.Label('Checkboxes=复选菜单'),
    dcc.Checklist(
        options=[
            {'label': '太阳', 'value': 'SUN'},
            {'label': '地球', 'value': 'EARTH'},
            {'label': '月亮', 'value': 'MOON'}
        ],
        value=['MTL', 'SF']
    ),

    #展示5：
    html.Label('Slider=滑动条'),
    dcc.Slider(
        min=0,
        max=9,
        marks={i: 'Label {}'.format(i) if i==0 else str(i) for i in range(0, 10)},
        #初始值
        value=5,
    ),
], 
#代表1列；2代表2列;3代表3列=column
style={'columnCount': 1})

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

5.2 操作和效果图：

6 表格table：

=========

6.1 代码：

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')
'''

#下载到本地，引用
df=pd.read_csv('/home/xgj/Desktop/dash/usa-agricultural-exports-2011.csv')
#定义产生表格函数
def generate_table(dataframe, max_rows=10):
    #返回值是一个表格
    return html.Table(
        # Header=表头
        [html.Tr([html.Th(col) for col in dataframe.columns])] +
        # Body=表体
        [html.Tr([
            html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
        ]) for i in range(min(len(dataframe), max_rows))]
    )

app=dash.Dash()
app.layout=html.Div(children=[
    html.H4(children='US Agriculture Exports (2011年)'), #故意中英文混合，提示支持中文
    generate_table(df) #引用自定义函数
])

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

6.2 操作和效果图：

7 回调callback：

============

7.1 代码：

import dash
import dash_core_components as dcc
import dash_html_components as html

app=dash.Dash()
app.layout=html.Div([
    dcc.RadioItems(
        id='dropdown-a',
        options=[{'label': i, 'value': i} for i in ['马', '牛', '羊']],
        value='马'
    ),
    html.Div(id='output-a'),
 
    dcc.RadioItems(
        id='dropdown-b',
        options=[{'label': i, 'value': i} for i in ['鸡', '鸭', '鹅']],
        value='鸭'
    ),
    html.Div(id='output-b')
 
])
 
@app.callback(
    dash.dependencies.Output('output-a', 'children'),
    [dash.dependencies.Input('dropdown-a', 'value')])
#定义函数回调a
def callback_a(dropdown_value):
    #注意python的转义字符\'，就是显示'
    return 'You\'ve selected "{}"'.format(dropdown_value)
 
@app.callback(
    dash.dependencies.Output('output-b', 'children'),
    [dash.dependencies.Input('dropdown-b', 'value')])
def callback_b(dropdown_value):
    return 'You\'ve selected "{}"'.format(dropdown_value)
 
if __name__=='__main__':
    app.run_server()

7.2 操作和效果图：

===自己整理并分享出来===

喜欢的就点赞、关注、转发、评论和收藏。

估计推荐量不高，没关系，我自己觉得修改后的更好。

章关键字：Python做Web网页开发、Dash开源库Bootstrap、信息提示框用法、Bootstrap库Alert函数用法

本章节我们来了解了Python数据可视化Dash框架中的开源库Dash Bootstrap Components组件中信息提示框Alert的基本用法，使用Alert组件为用户操作提供上下文反馈消息。

信息提示框也可以叫做警告框，警告框通常用于输出一些对用户的提示信息，比如在用户输入了错误格式数据时，警告提醒一下用户原因。

接下来，我们来介绍一下Alert这个控件，以及在Python中如何使用Alert，我简单写了一个Demo，效果如下图展示（如果想了解更多内容，可以关注我，对于整个示例的Demo可私信我获取），

此控件的Demo代码如下所示，更多内容可私信我：

import dash_bootstrap_components as dbc
from dash import html, Input, Output, State
from server import app

alert_html=html.Div([
    html.Br(),
    html.P(html.Strong('使用Alert组件为用户操作提供上下文反馈消息, 提醒控件', style={'color': 'rgb(255, 153, 51)'})),
    dbc.Button('关闭或显示一条警报', id='alert-toggle', className='me-1', n_clicks=0),
    html.Hr(),
    dbc.Alert('我是一条警报', 
              id='alert-fade', 
              dismissable=True, # 为警报添加一个解除按钮，单击后关闭警报
              is_open=True,
              fade=True,
              duration=2000, # 警报自动解除的时间，配合fade=True时使用
              color='warning'),
])

@app.callback(
    Output('alert-fade', 'is_open'),
    [Input('alert-toggle', 'n_clicks')],
    [State('alert-fade', 'is_open')]
)
def toggle_alert(n, is_open):
    if n:
        return not is_open
    return is_open

接下来，我们来详细介绍下这alert组件的一些参数

Alert

children：该组件的子组件，可传入list或者单个的dash组件，也可传入字符串或者数字。
id：此组件的ID，用于识别回调中的Dash组件。ID在应用中的所有组件中都必须是唯一的。
class_name：字符串，通常与CSS一起使用，以设置具有公共属性的元素的样式。
color：类型是string，默认success，警告框的颜色，选项有：primary, secondary, success, info, warning, danger, link或任何有效的CSS颜色的选择(例如十六进制代码，十进制代码或CSS颜色名称)
dismissable：类型是boolean，如果为True，则添加一个关闭按钮，允许取消警告框。
duration：类似是number，持续时间(以毫秒为单位)，警报将自行解散。
fade：类型是boolean，如果为True，当is_open被切换时将应用一个渐变动画。如果为False，警报将简单地出现和消失。
key：类型是string，组件的唯一标识符，用于在呈现组件时提高React.js的性能，参见https://reactjs.org/docs/lists-and-keys.html了解更多信息。
loading_state：类型是dict，该对象保存来自dash-renderer的加载状态。
persisted_props：类似是list，在刷新组件或页面后，其用户交互将持续存在的属性。因为只允许value，所以通常可以忽略这个道具。
persistence：布尔或字符串或数字，用于允许在刷新组件(或页面)时保持此组件中的用户交互。如果persistent是真值，并且没有从它之前的值发生变化，那么用户在使用应用程序时更改的值将保持该变化，只要新值也匹配最初给出的值。与persistence_type一起使用。
persistence_type：值等于'local'， 'session'， 'memory'，默认'local'，持久用户更改的存储位置:内存:只保存在内存中，在页面刷新时重置。本地:窗口。localStorage，在浏览器退出后保存数据。会话:窗口。sessionStorage，一旦浏览器退出，数据将被清除。
style：定义将覆盖先前设置的样式的CSS样式。

我们可以对应Demo代码，理解各个参数的含义，如果想了解更多内容，可关注我，对于整个示例的Demo可私信我获取。

在线咨询

上一篇：系统日志收集之初探rsyslog
下一篇：Python基础Python字符串编码：为什么你的网

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Python数据可视化Dash开源库Bootstra

Collapse介绍

Collapse函数介绍

Demo代码示例

更多Demo效果如下

Alert

您的项目需求