Plotly：如何使用折线图的下拉列表更新 plotly 数据？答案

【问题标题】：Plotly: How to update plotly data using dropdown list for line graph?Plotly：如何使用折线图的下拉列表更新 plotly 数据？
【发布时间】：2020-12-01 07:14:30
【问题描述】：

我正在尝试将一个下拉菜单添加到一个绘图线图中，该菜单在选择时会更新图形数据源。我的数据有 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 参数时，我似乎无法使用数据框格式。这是创建整个图表的代码。

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')}}

【问题讨论】：

标签： python pandas plotly plotly-dash

【解决方案1】：

我已经使用您的完整数据样本进行了初步设置，我想我已经弄清楚了。这里的挑战是px.line 将通过color 参数对您的数据进行分组。这使得使用直接引用 px.line 绘图源的下拉菜单编辑显示的数据变得有点困难。

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

我有点担心第二个情节可能有点偏离，但我正在使用您提供的日期，看起来像 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()

【讨论】：

我有一个问题希望你能回答：stackoverflow.com/questions/50301094/…
@geds133 感谢您的提示！我明天早上去看看
运气好吗？我明天有一个作业，我希望能用它，但看起来不太可能。如果没有也没问题
不是我的。使用范围滑块时它不允许自动缩放。它对你有用吗？
@geds113 还没有机会测试它。忙碌的一天。