Plotly Dash datetime范围滑块结合下拉筛选的散点图交互问题求助

修复方案 #

核心修改点 #

• 补全回调函数参数，正确接收滑块输入值
• 修正时间字段引用，统一使用数据集的Wallclock字段
• 调整RangeSlider的min、max参数类型为时间戳数值，保证滑块正常渲染
• 调整筛选逻辑，同时叠加胶囊ID、时间范围两个过滤条件
• 移除无效的冗余变量，优化筛选流程
• 新增Wallclock字段格式校验，避免时间转换异常

完整可运行代码 #

import pandas as pd
import plotly.express as px  # (version 4.7.0)
import plotly.graph_objects as go
import numpy as np

import openpyxl
import dash  # (version 1.12.0) pip install dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
from dash.exceptions import PreventUpdate

app = dash.Dash(__name__)
server = app.server

df = pd.read_excel("tcd vs rh 2.xlsx")
# 确保Wallclock字段为标准datetime格式
df['Wallclock'] = pd.to_datetime(df['Wallclock'])

capsuleID = df['Capsule_ID'].unique()
capsuleID_names = sorted(list(capsuleID))

capsuleID_names_1 = [{'label': k, 'value': k} for k in sorted(capsuleID)]
capsuleID_names_2 = [{'label': '(Select All)', 'value': 'All'}]
capsuleID_names_all = capsuleID_names_1 + capsuleID_names_2

app.layout = html.Div([

    html.H1("Relative Humidity vs TCD", style={'text-align': 'center'}),

    dcc.Dropdown(id="capsule_select",
                 options=capsuleID_names_all,
                 optionHeight=25,
                 multi=True,
                 searchable=True,
                 placeholder='Please select...',
                 clearable=True,
                 value=['All'],
                 style={'width': "100%"}
                 ),
    # 滑块最小、最大值转换为时间戳数值格式
    dcc.RangeSlider(id='slider',
                    min=df['Wallclock'].min().timestamp(),
                    max=df['Wallclock'].max().timestamp(),
                    value=[df.iloc[-101]['Wallclock'].timestamp(), df.iloc[-1]['Wallclock'].timestamp()]
                    ),

    html.Div([
        dcc.Graph(id="the_graph"),
    ]),

])

# -----------------------------------------------------------
@app.callback(
    Output('the_graph', 'figure'),
    Output('capsule_select', 'value'),
    Input('capsule_select', 'value'),
    Input('slider', 'value'),
)
# 补全滑块参数接收
def update_graph(capsule_chosen, slider_value):
    # 转换滑块返回的时间戳为datetime格式
    lBound = pd.to_datetime(slider_value[0], unit='s')
    uBound = pd.to_datetime(slider_value[1], unit='s')

    dropdown_values = capsule_chosen
    # 第一步筛选胶囊ID
    if "All" in capsule_chosen:
        dropdown_values = capsuleID_names
        dff = df.copy()
    else:
        dff = df[df['Capsule_ID'].isin(capsule_chosen)].copy()
    
    # 第二步叠加时间范围筛选
    dff = dff[(dff['Wallclock'] >= lBound) & (dff['Wallclock'] <= uBound)]

    scatterplot = px.scatter(
        data_frame=dff,
        x="tcd",
        y="humidity",
        hover_name="Wallclock",
    )

    scatterplot.update_traces(textposition='top center')

    return scatterplot, dropdown_values


# ------------------------------------------------------------------------------

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

内容的提问来源于stack exchange，提问作者haroldchoi