如何在Dash中实现数据集大小的动态展示及移除数据量统计

需要实现的功能 #

• 在网页顶部展示当前数据集的统计信息（原始数量、过滤后数量、移除数量）
• 当用户调整昼夜时间间隔滑块或切换ID时，实时更新统计数据与图表

修改后的完整代码 #

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

# 生成数据集
df = pd.DataFrame({'DATE_TIME':pd.date_range('2022-11-01', '2022-11-06 23:00:00',freq='20min'),
                   'ID':[random.randrange(1, 3) for n in range(430)]})
df['VALUE1'] = [random.uniform(110, 160) for n in range(430)]
df['VALUE2'] = [random.uniform(50, 80) for n in range(430)]
df['INSPECTION'] = df['DATE_TIME'].dt.day

df['MODE'] = np.select([df['INSPECTION']==1, df['INSPECTION'].isin([2,3])], ['A', 'B'], 'C')
df['TIME'] = df['DATE_TIME'].dt.time
df['TIME'] = df['TIME'].astype('str')
df['TIMEINTERVAL'] = df.DATE_TIME.diff().astype('timedelta64[m]')
df['TIMEINTERVAL'] = df['TIMEINTERVAL'].fillna(0)

def to_day_period(s):
    bins = ['0', '06:00:00', '13:00:00', '18:00:00', '23:00:00', '24:00:00']
    labels = ['Nighttime', 'Daytime', 'Daytime', 'Nighttime', 'Nighttime']

    return pd.cut(
        pd.to_timedelta(s),
        bins=list(map(pd.Timedelta, bins)),
        labels=labels, right=False, ordered=False
    )

df['TIME_OF_DAY'] = to_day_period(df['TIME'])
app = Dash(__name__)

app.layout = html.Div([
    # 新增数据集统计展示区域
    html.Div(id='dataset-stats', style={'fontSize':16, 'marginBottom':20}),
    
    html.H4('Interactive Scatter Plot'),
    html.P("Select ID:"),
    # 设置默认选中第一个ID，确保初始加载有数据
    dcc.Dropdown(df.ID.unique(), id='pandas-dropdown-1', value=df.ID.unique()[0]),
    html.P("Filter by time interval during nighttime (18:00-6:00):"),
    dcc.RangeSlider(
        id='range-slider-night',
        min=0, max=600, step=10,
        marks={0: '0', 50: '50', 100: '100', 150: '150', 200: '200', 250: '250', 300: '300', 350: '350', 400: '400',
               450: '450', 500: '500', 550: '550', 600: '600'},
        value=[0, 600]
    ),
    html.P("Filter by time interval during daytime (6:00-18:00):"),
    dcc.RangeSlider(
        id='range-slider-morning',
        min=0, max=600, step=10,
        marks={0: '0', 50: '50', 100: '100', 150: '150', 200: '200', 250: '250', 300: '300', 350: '350', 400: '400',
               450: '450', 500: '500', 550: '550', 600: '600'},
        value=[0, 600]
    ),
    dcc.Graph(id="scatter-plot", style={'width': '130vh', 'height': '80vh'}),
])

@app.callback(
    [Output("scatter-plot", "figure"),
     Output("dataset-stats", "children")],
    [Input("pandas-dropdown-1", "value"),
     Input("range-slider-night", "value"),
     Input("range-slider-morning", "value")]
)
def update_content(selected_id, slider_range_night, slider_range_morning):
    # 计算选中ID的原始总数据量
    original_count = df[df['ID'] == selected_id].shape[0]
    
    low_night, high_night = slider_range_night
    low_morning, high_morning = slider_range_morning
    
    # 修正TIME_OF_DAY的匹配值，与to_day_period函数的标签一致
    df_night = df.query("ID == @selected_id & TIME_OF_DAY == 'Nighttime' & TIMEINTERVAL >= @low_night & TIMEINTERVAL < @high_night").copy()
    df_morning = df.query("ID == @selected_id & TIME_OF_DAY == 'Daytime' & TIMEINTERVAL >= @low_morning & TIMEINTERVAL < @high_morning").copy()
    df_filtered = pd.concat([df_night, df_morning], axis=0).sort_values(['DATE_TIME'])
    
    filtered_count = df_filtered.shape[0]
    removed_count = original_count - filtered_count
    
    # 生成统计文本
    stats_text = [
        html.P(f"原始数据集大小（当前ID）: {original_count} 条"),
        html.P(f"过滤后数据集大小: {filtered_count} 条"),
        html.P(f"被过滤移除的数据点数量: {removed_count} 条")
    ]
    
    # 生成图表
    if filtered_count != 0:
        fig = px.line(df_filtered, x="DATE_TIME", y=["VALUE1", "VALUE2"],
                         facet_col='INSPECTION',
                         facet_col_wrap=2,
                         symbol='MODE',hover_data=['TIMEINTERVAL'],
                         facet_row_spacing=0.1,
                         facet_col_spacing=0.09)
        fig.update_xaxes(matches=None, showticklabels=True)
        return fig, stats_text
    else:
        # 无数据时返回空图表提示和统计信息
        empty_fig = px.line(title="无符合条件的数据")
        return empty_fig, stats_text

app.run_server(debug=True, use_reloader=False)

关键修改说明 #

• 新增统计展示区：在布局顶部添加了dataset-stats容器，用于实时显示数据集的数量统计
• 修正过滤逻辑：原代码中TIME_OF_DAY的标签为Nighttime/Daytime，回调中误用了其他值，已统一匹配
• 扩展回调输出：让回调同时返回图表组件和统计文本，实现数据与可视化同步更新
• 处理初始加载：为Dropdown设置默认选中值，并移除prevent_initial_call=True，确保页面打开时即可展示数据与统计

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