python - Plotly:如何使用折线图的下拉列表更新绘图数据？

Question

我正在尝试将下拉菜单添加到绘图线图中，该图在选择时更新图形数据源。我的数据有 3 列，如下所示:

1               Country  Average House Price (£)       Date
0  Northern Ireland                      47101.0 1992-04-01
1  Northern Ireland                      49911.0 1992-07-01
2  Northern Ireland                      50174.0 1992-10-01
3  Northern Ireland                      46664.0 1993-01-01
4  Northern Ireland                      48247.0 1993-04-01

Country 列包含英国的 4 个国家，用于使用 color 为每个国家创建单独的行。范围。我有 4 个不同的数据框用于不同的住房类型，例如 all_dwellings , first_timebuyers并尝试指定 updatemenus 时args 似乎我不能使用数据帧格式。这是创建整个图形的代码。

lineplt = px.line(data_frame = all_dwellings,
              x='Date',
              y='Average House Price (£)',
              color= 'Country',
              hover_name='Country',
              color_discrete_sequence=['rgb(23, 153, 59)','rgb(214, 163, 21)','rgb(40, 48, 165)', 'rgb(210, 0, 38)']
              )
updatemenus = [
{'buttons': [
            {
            'method': 'restyle',
            'label': 'All Dwellings',
            'args': [{'data_frame': all_dwellings}]
            },
            {
            'method': 'restyle',
            'label': 'First Time Buyers',
            'args': [{'data_frame': first_buyers}]
            }
            ],
'direction': 'down',
'showactive': True,
}
]

lineplt = lineplt.update_layout(
            title_text='Average House Price in UK (£)',
            title_x=0.5,
            #plot_bgcolor= 'rgb(194, 208, 209)',
            xaxis_showgrid=False,
            yaxis_showgrid=False,
            hoverlabel=dict(font_size=10, bgcolor='rgb(69, 95, 154)',
            bordercolor= 'whitesmoke'),
            legend=dict(title='Please click legend item to remove <br>or add to plot',
                        x=0,
                        y=1,
                        traceorder='normal',
                        bgcolor='LightSteelBlue',
                        xanchor = 'auto'),
            updatemenus=updatemenus
            )
lineplt = lineplt.update_traces(mode="lines", hovertemplate= 'Date = %{x} <br>' + 'Price = £%{y:.2f}')
lineplt.show()

但是我收到以下错误:

TypeError: Object of type DataFrame is not JSON serializable

所有示例似乎都将项目转换为列表，但这似乎不适用于数据帧格式。有人可以帮忙吗？如果问题不清楚，请告诉我。
编辑 - all_dwellings.head(20).to_dict() 的输出

{'Country': {0: 'Northern Ireland    ', 1: 'Northern Ireland    ', 2: 'Northern Ireland    ', 3: 'Northern Ireland    ', 4: 'Northern Ireland    ', 5: 'Northern Ireland    ', 6: 'Northern Ireland    ', 7: 'Northern Ireland    ', 8: 'Northern Ireland    ', 9: 'Northern Ireland    ', 10: 'Northern Ireland    ', 11: 'Northern Ireland    ', 12: 'Northern Ireland    ', 13: 'Northern Ireland    ', 14: 'Northern Ireland    ', 15: 'Northern Ireland    ', 16: 'Northern Ireland    ', 17: 'Northern Ireland    ', 18: 'Northern Ireland    ', 19: 'Northern Ireland    '}, 'Average House Price (£)': {0: 47101.0, 1: 49911.0, 2: 50174.0, 3: 46664.0, 4: 48247.0, 5: 54891.0, 6: 53773.0, 7: 57594.0, 8: 49804.0, 9: 58586.0, 10: 55154.0, 11: 55413.0, 12: 60239.0, 13: 59094.0, 14: 57131.0, 15: 61849.0, 16: 61951.0, 17: 61595.0, 18: 68705.0, 19: 74869.0}, 'Date': {0: Timestamp('1992-04-01 00:00:00'), 1: Timestamp('1992-07-01 00:00:00'), 2: Timestamp('1992-10-01 00:00:00'), 3: Timestamp('1993-01-01 00:00:00'), 4: Timestamp('1993-04-01 00:00:00'), 5: Timestamp('1993-07-01 00:00:00'), 6: Timestamp('1993-10-01 00:00:00'), 7: Timestamp('1994-01-01 00:00:00'), 8: Timestamp('1994-04-01 00:00:00'), 9: Timestamp('1994-07-01 00:00:00'), 10: Timestamp('1994-10-01 00:00:00'), 11: Timestamp('1995-01-01 00:00:00'), 12: Timestamp('1995-04-01 00:00:00'), 13: Timestamp('1995-07-01 00:00:00'), 14: Timestamp('1995-10-01 00:00:00'), 15: Timestamp('1996-01-01 00:00:00'), 16: Timestamp('1996-04-01 00:00:00'), 17: Timestamp('1996-07-01 00:00:00'), 18: Timestamp('1996-10-01 00:00:00'), 19: Timestamp('1997-01-01 00:00:00')}}

first_buyers 的输出

{'Country': {0: 'Northern Ireland    ', 1: 'Northern Ireland    ', 2: 'Northern Ireland    ', 3: 'Northern Ireland    ', 4: 'Northern Ireland    ', 5: 'Northern Ireland    ', 6: 'Northern Ireland    ', 7: 'Northern Ireland    ', 8: 'Northern Ireland    ', 9: 'Northern Ireland    ', 10: 'Northern Ireland    ', 11: 'Northern Ireland    ', 12: 'Northern Ireland    ', 13: 'Northern Ireland    ', 14: 'Northern Ireland    ', 15: 'Northern Ireland    ', 16: 'Northern Ireland    ', 17: 'Northern Ireland    ', 18: 'Northern Ireland    ', 19: 'Northern Ireland    '}, 'Average House Price (£)': {0: 29280.0, 1: 32690.0, 2: 29053.0, 3: 30241.0, 4: 31032.0, 5: 31409.0, 6: 31299.0, 7: 28922.0, 8: 28621.0, 9: 31519.0, 10: 33497.0, 11: 35861.0, 12: 32472.0, 13: 34493.0, 14: 33662.0, 15: 32630.0, 16: 33426.0, 17: 37154.0, 18: 36555.0, 19: 36406.0}, 'Date': {0: Timestamp('1992-04-01 00:00:00'), 1: Timestamp('1992-07-01 00:00:00'), 2: Timestamp('1992-10-01 00:00:00'), 3: Timestamp('1993-01-01 00:00:00'), 4: Timestamp('1993-04-01 00:00:00'), 5: Timestamp('1993-07-01 00:00:00'), 6: Timestamp('1993-10-01 00:00:00'), 7: Timestamp('1994-01-01 00:00:00'), 8: Timestamp('1994-04-01 00:00:00'), 9: Timestamp('1994-07-01 00:00:00'), 10: Timestamp('1994-10-01 00:00:00'), 11: Timestamp('1995-01-01 00:00:00'), 12: Timestamp('1995-04-01 00:00:00'), 13: Timestamp('1995-07-01 00:00:00'), 14: Timestamp('1995-10-01 00:00:00'), 15: Timestamp('1996-01-01 00:00:00'), 16: Timestamp('1996-04-01 00:00:00'), 17: Timestamp('1996-07-01 00:00:00'), 18: Timestamp('1996-10-01 00:00:00'), 19: Timestamp('1997-01-01 00:00:00')}}

Answer 1

我已经使用您的完整数据样本进行了初步设置，我想我已经弄清楚了。这里的挑战是 px.line将按 color 对您的数据进行分组争论。这使得使用直接引用您的 px.line 来源的下拉菜单编辑显示的数据变得有点困难。阴谋。
但你实际上可以构建多个 px.line不同数据集的数字，并在那里“窃取”具有正确结构的数据。这将为您提供不同下拉选项的这些数字:


我有点担心第二个 plotly 可能有点偏离，但我正在使用你提供的日期，看起来像这样 first_timebuyers :

所以也许这毕竟是有道理的？
以下是没有您的数据的完整代码。我们可以在明天讨论细节并进一步调整。暂时再见。

import numpy as np
import pandas as pd
import plotly.express as px
from pandas import Timestamp

all_dwellings=pd.DataFrame(<yourData>)
first_timebuyers = pd.DataFrame(<yourData>)

# datagrab 1
lineplt_all = px.line(data_frame = all_dwellings,
              x='Date',
              y='Average House Price (£)',
              color= 'Country',
              hover_name='Country',
              color_discrete_sequence=['rgb(23, 153, 59)','rgb(214, 163, 21)','rgb(40, 48, 165)', 'rgb(210, 0, 38)']
              )

# datagrab 2
lineplt_first = px.line(data_frame = first_timebuyers,
              x='Date',
              y='Average House Price (£)',
              color= 'Country',
              hover_name='Country',
              color_discrete_sequence=['rgb(23, 153, 59)','rgb(214, 163, 21)','rgb(40, 48, 165)', 'rgb(210, 0, 38)']
              )

### Your original setup
lineplt = px.line(data_frame = all_dwellings,
              x='Date',
              y='Average House Price (£)',
              color= 'Country',
              hover_name='Country',
              color_discrete_sequence=['rgb(23, 153, 59)','rgb(214, 163, 21)','rgb(40, 48, 165)', 'rgb(210, 0, 38)']
              )
updatemenus = [
{'buttons': [
            {
            'method': 'restyle',
            'label': 'All Dwellings',
            'args': [{'y': [dat.y for dat in lineplt_all.data]}]
            },
            {
            'method': 'restyle',
            'label': 'First Time Buyers',
            'args': [{'y': [dat.y for dat in lineplt_first.data]}]
            }
            ],
'direction': 'down',
'showactive': True,
}
]

lineplt = lineplt.update_layout(
            title_text='Average House Price in UK (£)',
            title_x=0.5,
            #plot_bgcolor= 'rgb(194, 208, 209)',
            xaxis_showgrid=False,
            yaxis_showgrid=False,
            hoverlabel=dict(font_size=10, bgcolor='rgb(69, 95, 154)',
            bordercolor= 'whitesmoke'),
            legend=dict(title='Please click legend item to remove <br>or add to plot',
                        x=0,
                        y=1,
                        traceorder='normal',
                        bgcolor='LightSteelBlue',
                        xanchor = 'auto'),
            updatemenus=updatemenus
            )
lineplt = lineplt.update_traces(mode="lines", hovertemplate= 'Date = %{x} <br>' + 'Price = £%{y:.2f}')
lineplt.show()