整理python快速构建数据可视化前端的Dash库

一.Dash框架

python 复制代码

# 导入 Dash 相关库
import dash
from dash import dcc, html  # dcc 是 Dash 核心组件库，html 是 HTML 组件库
from typing import Generic

# 创建一个 Dash 应用实例
app = dash.Dash(__name__)

# 定义应用的布局
app.layout = html.Div(children=[
    # 添加一个标题
    html.H1(children='你好，Dash！'),

    # 添加一段描述文字
    html.Div(children='''
        Dash：一个用于 Python 的 Web 应用框架。
    '''),

    # 添加一个图表
    dcc.Graph(
        id='example-graph',  # 图表的 ID，用于回调函数
        figure={
            'data': [  # 图表的数据
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': '上海'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': '北京'},
            ],
            'layout': {  # 图表的布局
                'title': 'Dash 数据可视化示例'  # 图表的标题
            }
        }
    )
])

# 运行应用
if __name__ == '__main__':
    app.run(debug=True)  # 启动应用，debug=True 表示开启调试模式

二.输入框

python 复制代码

# 导入 Dash 相关库
from dash import Dash, dcc, html, Input, Output

# 创建 Dash 应用实例
app = Dash(__name__)

# 定义应用的布局
app.layout = html.Div([
    # 创建一个文本输入框
    dcc.Input(
        id='input',  # 输入框的 ID，用于回调函数
        value='初始值',  # 输入框的默认值
        type='text'  # 输入框类型为文本
    ),
    # 创建一个用于显示输出的 Div
    html.Div(id='output')
])

# 定义回调函数
@app.callback(
    Output('output', 'children'),  # 输出到 id 为 'output' 的 Div 的 children 属性
    Input('input', 'value')  # 输入来自 id 为 'input' 的输入框的 value 属性
)
def update_output_div(input_value):
    # 返回格式化后的字符串，显示用户输入的内容
    return f'你输入了: {input_value}'

# 运行应用
if __name__ == '__main__':
    app.run(debug=True)  # 启动应用，debug=True 表示开启调试模式

三.动态

python 复制代码

from dash import Dash, html, dcc, Input, Output
import plotly.express as px
import pandas as pd

# 创建 Dash 应用
app = Dash(__name__)

# 定义示例数据集
datasets = {
    '数据集1': pd.DataFrame({
        'x': [1, 2, 3, 4, 5],
        'y': [10, 15, 13, 17, 21]
    }),
    '数据集2': pd.DataFrame({
        'x': [1, 2, 3, 4, 5],
        'y': [5, 10, 8, 12, 15]
    }),
    '数据集3': pd.DataFrame({
        'x': [1, 2, 3, 4, 5],
        'y': [20, 18, 22, 19, 25]
    })
}

# 定义布局
app.layout = html.Div([
    html.H1("动态折线图示例"),  # 标题
    dcc.Dropdown(
        id='dataset-dropdown',  # 下拉菜单的 ID
        options=[{'label': name, 'value': name} for name in datasets.keys()],  # 下拉菜单选项
        value='数据集1'  # 默认选中的数据集
    ),
    dcc.Graph(id='line-chart')  # 用于显示折线图的 Graph 组件
])

# 定义回调函数
@app.callback(
    Output('line-chart', 'figure'),  # 输出到 id 为 'line-chart' 的 Graph 组件的 figure 属性
    Input('dataset-dropdown', 'value')  # 输入来自 id 为 'dataset-dropdown' 的下拉菜单的 value 属性
)
def update_line_chart(selected_dataset):
    # 获取选中的数据集
    df = datasets[selected_dataset]
    # 使用 Plotly Express 创建折线图
    fig = px.line(df, x='x', y='y', title=f'{selected_dataset} 折线图')
    return fig

# 运行应用
if __name__ == '__main__':
    app.run(debug=True)  # 启动应用，debug=True 表示开启调试模式

四.压力表

python 复制代码

from dash import Dash, html
import dash_daq as daq

# 创建 Dash 应用
app = Dash(__name__)

# 定义布局
app.layout = html.Div(
    style={'textAlign': 'center'},
    children=[
        daq.Thermometer(
            id='thermometer',
            value=25,
            min=0,
            max=100,
            label="温度计",
            style={'margin': '20px'}
        ),
        daq.Gauge(
            id='gauge',
            value=50,
            min=0,
            max=100,
            label="压力表",
            style={'margin': '20px'}
        )
    ]
)

# 运行应用
if __name__ == '__main__':
    app.run(debug=True)

整理快速构建数据可视化前端的Dash 相关库及示例,先展示部分,后续然后点赞收藏等反馈良好,再继续更新一波进阶版;

整理不易，诚望各位看官点赞收藏评论予以支持，这将成为我持续更新的动力源泉。若您在阅览时存有异议或建议，敬请留言指正批评，让我们携手共同学习，共同进取，吾辈自当相互勉励！