【问题标题】:Interactive filtering data table in Plotly by using a dropdown使用下拉菜单在 Plotly 中交互式过滤数据表
【发布时间】:2021-12-02 16:28:03
【问题描述】:

我正在尝试制作一个交互式表格,通过从下拉列表中选择一个值来更改表格的值。这应该只在 Plotly(而不是 Dash)中完成,因为我需要与其他用户共享文件。 (提前致谢)

例如:

如果我选择 Channel_1 那么表格应该是

Date A_item B_item C_item
2020-01-27 2 1 9
2020-02-27 8 7 2

如果我选择 Channel_2 那么表格应该是

Date A_item B_item C_item
2020-03-27 0 10 9
import pandas as pd
import plotly.graph_objects as go

df = pd.DataFrame({"Date":["2020-01-27","2020-02-27","2020-03-27"],
                   "A_item":[2, 8, 0],
                   "B_item":[1, 7, 10],
                   "C_item":[9, 2, 9],
                   "Channel_type":["Channel_1", "Channel_1", "Channel_2"]
                   })

fig = go.Figure()
fig.add_trace(go.Table(
    header=dict(
        values=items,
        font=dict(size=10),
        align="left"
    ),
    cells=dict(
        values=..... ,
        align = "left")
    ))



updatemenu= []
buttons=[]
for channel in df['Channel_type'].unique():
    buttons.append(dict(method='update',
                        label=channel,
                        args=[{.....}])
                  )




updatemenu=[]
your_menu=dict()

updatemenu.append(your_menu)

updatemenu[0]['buttons']=buttons
updatemenu[0]['direction']='down'
updatemenu[0]['showactive']=True
fig.update_layout(updatemenus=updatemenu)

fig.show()

【问题讨论】:

    标签: python dataframe plotly dropdown plotly-python


    【解决方案1】:
    • 您可以修改图形的内容。对于您注意到的用例,它是修改 cells 内容
    • updatemenus 是静态的,因此它是数据框的多个静态视图
    • 代码如下
    import plotly.graph_objects as go
    
    df = pd.DataFrame(
        {
            "Date": ["2020-01-27", "2020-02-27", "2020-03-27"],
            "A_item": [2, 8, 0],
            "B_item": [1, 7, 10],
            "C_item": [9, 2, 9],
            "Channel_type": ["Channel_1", "Channel_1", "Channel_2"],
        }
    )
    
    fig = go.Figure(go.Table(header={"values": df.columns}, cells={"values": df.T.values}))
    fig.update_layout(
        updatemenus=[
            {
                "buttons": [
                    {
                        "label": c,
                        "method": "update",
                        "args": [
                            {
                                "cells": {
                                    "values": df.T.values
                                    if c == "All"
                                    else df.loc[df["Channel_type"].eq(c)].T.values
                                }
                            }
                        ],
                    }
                    for c in ["All"] + df["Channel_type"].unique().tolist()
                ]
            }
        ]
    )
    

    多个菜单

    制作updatemenus列表列表理解

    import plotly.graph_objects as go
    
    df = pd.DataFrame(
        {
            "Date": ["2020-01-27", "2020-02-27", "2020-03-27"],
            "A_item": [2, 8, 0],
            "B_item": [1, 7, 10],
            "C_item": [9, 2, 9],
            "Channel_type": ["Channel_1", "Channel_1", "Channel_2"],
        }
    )
    
    fig = go.Figure(go.Table(header={"values": df.columns}, cells={"values": df.T.values}))
    fig.update_layout(
        updatemenus=[
            {
                "y": 1 - (i / 5),
                "buttons": [
                    {
                        "label": c,
                        "method": "restyle",
                        "args": [
                            {
                                "cells": {
                                    "values": df.T.values
                                    if c == "All"
                                    else df.loc[df[menu].eq(c)].T.values
                                }
                            }
                        ],
                    }
                    for c in ["All"] + df[menu].unique().tolist()
                ],
            }
            for i, menu in enumerate(["Channel_type", "Date"])
        ]
    )
    

    【讨论】:

    • 非常感谢!
    • 是否可以添加第二个下拉菜单作为附加标准,比如说日期?
    • 已更新 - updatemenus 是一个列表,因此请使用列表理解来构建它
    猜你喜欢
    • 2022-07-01
    • 2020-04-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-10-23
    • 2019-01-17
    相关资源
    最近更新 更多