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并且在尝试指定updatemenusargs 时，似乎我无法使用数据框格式。这是创建整个图形的代码。

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。

\n

但您实际上可以px.line为不同的数据集构建多个图形，并“窃取”具有适合您的图形的正确结构的数据。这将为您提供不同下拉选项的这些数字：

\n

\n

\n

我有点担心第二个图可能有点偏离，但我正在使用您提供的日期，如下所示first_timebuyers：

\n

\n

那么也许这毕竟是有道理的？

\n

以下是没有您的数据的完整代码。我们明天可以讨论细节并进一步调整。暂时再见。

\n

import numpy as np\nimport pandas as pd\nimport plotly.express as px\nfrom pandas import Timestamp\n\nall_dwellings=pd.DataFrame(<yourData>)\nfirst_timebuyers = pd.DataFrame(<yourData>)\n\n# datagrab 1\nlineplt_all = px.line(data_frame = all_dwellings,\n              x=\'Date\',\n              y=\'Average House Price (\xc2\xa3)\',\n              color= \'Country\',\n              hover_name=\'Country\',\n              color_discrete_sequence=[\'rgb(23, 153, 59)\',\'rgb(214, 163, 21)\',\'rgb(40, 48, 165)\', \'rgb(210, 0, 38)\']\n              )\n\n# datagrab 2\nlineplt_first = px.line(data_frame = first_timebuyers,\n              x=\'Date\',\n              y=\'Average House Price (\xc2\xa3)\',\n              color= \'Country\',\n              hover_name=\'Country\',\n              color_discrete_sequence=[\'rgb(23, 153, 59)\',\'rgb(214, 163, 21)\',\'rgb(40, 48, 165)\', \'rgb(210, 0, 38)\']\n              )\n\n### Your original setup\nlineplt = px.line(data_frame = all_dwellings,\n              x=\'Date\',\n              y=\'Average House Price (\xc2\xa3)\',\n              color= \'Country\',\n              hover_name=\'Country\',\n              color_discrete_sequence=[\'rgb(23, 153, 59)\',\'rgb(214, 163, 21)\',\'rgb(40, 48, 165)\', \'rgb(210, 0, 38)\']\n              )\nupdatemenus = [\n{\'buttons\': [\n            {\n            \'method\': \'restyle\',\n            \'label\': \'All Dwellings\',\n            \'args\': [{\'y\': [dat.y for dat in lineplt_all.data]}]\n            },\n            {\n            \'method\': \'restyle\',\n            \'label\': \'First Time Buyers\',\n            \'args\': [{\'y\': [dat.y for dat in lineplt_first.data]}]\n            }\n            ],\n\'direction\': \'down\',\n\'showactive\': True,\n}\n]\n\nlineplt = lineplt.update_layout(\n            title_text=\'Average House Price in UK (\xc2\xa3)\',\n            title_x=0.5,\n            #plot_bgcolor= \'rgb(194, 208, 209)\',\n            xaxis_showgrid=False,\n            yaxis_showgrid=False,\n            hoverlabel=dict(font_size=10, bgcolor=\'rgb(69, 95, 154)\',\n            bordercolor= \'whitesmoke\'),\n            legend=dict(title=\'Please click legend item to remove <br>or add to plot\',\n                        x=0,\n                        y=1,\n                        traceorder=\'normal\',\n                        bgcolor=\'LightSteelBlue\',\n                        xanchor = \'auto\'),\n            updatemenus=updatemenus\n            )\nlineplt = lineplt.update_traces(mode="lines", hovertemplate= \'Date = %{x} <br>\' + \'Price = \xc2\xa3%{y:.2f}\')\nlineplt.show()\n

\n