我可以向绘图表达条形图添加 onclick 函数吗？

Question

我想向我的破折号应用程序添加一个模式，该模式显示连接到条形图的过滤数据表，当我单击条形图中的条形时，它将根据单击条形的数据 x 值过滤表。这可能吗？

Answer 1

使用新冠肺炎数据。图为20个随机国家的疫苗接种情况。单击栏将显示过去 5 天的国家/地区表格。

import pandas as pd
import plotly.express as px
import dash
from dash.dependencies import Input, Output, State
import json

df = pd.read_csv(
    "https://raw.githubusercontent.com/owid/covid-19-data/master/public/data/vaccinations/vaccinations.csv"
)
df["date"] = pd.to_datetime(df["date"])

df = df.sort_values(["date", "iso_code"])

px.bar(
    df.groupby("iso_code", as_index=False).last().sample(20),
    x="iso_code",
    y="total_vaccinations",
)

from jupyter_dash import JupyterDash

# Build App
app = JupyterDash(__name__)
app.layout = dash.html.Div(
    [
        dash.dcc.Graph(
            id="bar_chart",
            figure=px.bar(
                df.groupby("iso_code", as_index=False).last().sample(20),
                x="iso_code",
                y="total_vaccinations",
            ),
        ),
        dash.html.Div(
            id="table_container",
        ),
    ]
)


@app.callback(
    Output("table_container", "children"),
    Input("bar_chart", "clickData"),
)
def fig_click(clickData):
    if not clickData:
        raise dash.exceptions.PreventUpdate

    tab = dash.dash_table.DataTable(
        data=df.loc[df["iso_code"].eq(clickData["points"][0]["x"])]
        .tail(5)
        .to_dict("records"),
        columns=[{"name": i, "id": i} for i in df.columns],
    )

    return tab


app.run_server(mode="inline")