当前位置：首页 > news >正文

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

news 2025/9/10 5:56:55

一.Dash框架

# 导入 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 表示开启调试模式

二.输入框

# 导入 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'  # 输入框类型为文本),# 创建一个用于显示输出的 Divhtml.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 表示开启调试模式

三.动态

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',  # 下拉菜单的 IDoptions=[{'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 表示开启调试模式

四.压力表

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)