清除 Dash table 和 Plotly 的过滤器

Question

我一直在尝试使用 Dash 和 Plotly 构建交互式破折号

我有几个下拉菜单允许用户 select 过滤器，但是我的图表和饼图只显示过滤后的数据好的，当我清除过滤器以向用户展示完整的数据分析时，图形和图表不起作用，return 空图

有什么建议我应该如何使用我的 update_chart 函数构建或更改完整数据集的完整分析以分别反映过滤/未过滤数据？

我的 data 来自 Firestore，您可以假设数据没有问题（已验证）

这是我的代码：

html

html.Div(
            children=[
                html.Div(
                    children=[
                        html.Div(children="State", className="menu-title"),
                        dcc.Dropdown(
                            id="state-filter",
                            options=[
                                {"label": state, "value": state}
                                for state in np.sort(data.state.unique())
                            ],
                            value="CA",
                            clearable=True,
                            className="dropdown",
                        ),
                    ]
                ),
                html.Div(
                    children=[
                        html.Div(children="Category", className="menu-title"),
                        dcc.Dropdown(
                            id="category-filter",
                            options=[
                                {"label": category, "value": category}
                                for category in data.category.unique() if not pd.isnull(category)
                            ],
                            value="web",
                            clearable=True,
                            className="dropdown",
                        ),
                    ]
                ),
                html.Div(
                    children=[
                        html.Div(
                            children="Date Range", className="menu-title"
                        ),
                        dcc.DatePickerRange(
                            id="date-range",
                            min_date_allowed=data.fundedDate.min().date(),
                            max_date_allowed=data.fundedDate.max().date(),
                            start_date=data.fundedDate.min().date(),
                            end_date=data.fundedDate.max().date(),
                        ),
                    ]
                ),
            ],
            className="menu",
        ),
        html.Div(
            children=[
                html.Div(
                    children=dcc.Graph(
                        id="funding-chart",
                        config={"displayModeBar": False},
                    ),
                    className="card",
                ),
                html.Div(
                    children=dcc.Graph(
                        id="category-chart",
                        figure={}, 
                        className='six columns',
                    ),
                ),
            ],
            className="wrapper",
        ),

数据

@dash_app.callback(
[Output("funding-chart", "figure"), Output("category-chart", "figure")],
[
    Input("state-filter", "value"),
    Input("category-filter", "value"),
    Input("date-range", "start_date"),
    Input("date-range", "end_date"),
],
)
def update_charts(state, category, start_date, end_date):
    mask = (
        (data.state == state)
        & (data.category == category)
        & (data.fundedDate >= start_date)
        & (data.fundedDate <= end_date)
    )
    filtered_data = data.loc[mask, :]
    funding_chart_figure = {
        "data": [
            {
                "x": filtered_data["fundedDate"],
                "y": filtered_data["raisedAmt"],
                "type": "lines",
                "hovertemplate": "$%{y:.2f}<extra></extra>",
            },
        ],
        "layout": {
            "title": {
                "text": "Raised fundings by date",
                "x": 0.05,
                "xanchor": "left",
            },
            "xaxis": {"fixedrange": True},
            "yaxis": {"tickprefix": "$", "fixedrange": True},
            "colorway": ["#17B897"],
        },
    }

    category_chart_figure = px.pie(data_frame=filtered_data, values='raisedAmt',
names='category', title='Raised funding by category')
    return funding_chart_figure, category_chart_figure

使用过滤数据时

当我想清除过滤器并只获得分析的概览时，filtereddata 集导致我无法取回完整数据

调整我的 update_chart 功能以实现我想要的有什么好主意吗？谢谢

Answer 1

如果我没理解错的话，问题是“类别”是空的，这会导致过滤器损坏。

如何在 update_charts 开头的 if 语句中捕获这种情况？

#[...]
def update_charts(state, category, start_date, end_date):
    category_filter = True  #get all categories if category is empty
    if category:
        category_filter = (data.category == category)
    mask = (
        (data.state == state)
        & category_filter
        & (data.fundedDate >= start_date)
        & (data.fundedDate <= end_date)
    )
    #[...]

清除 Dash table 和 Plotly 的过滤器

clear filter for Dash table and Plotly

python

flask

plotly

hyphen