我可以向 plotly express 条形图添加 onclick 函数吗？

Question

我想向我的 dash 应用程序添加一个模态，它显示 table 连接到条形图的已过滤数据，当我单击条形图中的条形时，它将根据 table 过滤在点击栏的数据 x 值上。可以吗？

Answer 1

使用 COVID 数据。图是20个随机国家的疫苗接种。点击栏将显示最近 5 天的国家/地区 table。

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")

我可以向 plotly express 条形图添加 onclick 函数吗？

Can I add an onclick function to a plotly express bar chart?

plotly

plotly-dash

plotly-express