一.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)

整理快速構建數據可視化前端 的Dash 相關庫及示例,先展示部分,后續然后點贊收藏等反饋良好,再繼續更新一波進階版;

整理不易，誠望各位看官點贊 收藏 評論 予以支持，這將成為我持續更新的動力源泉。若您在閱覽時存有異議或建議，敬請留言指正批評，讓我們攜手共同學習，共同進取，吾輩自當相互勉勵！