Plotly：如何使用折线图的下拉列表更新 plotly 数据？
Plotly: How to update plotly data using dropdown list for line graph?
我正在尝试将下拉菜单添加到绘图折线图中，以便在选择时更新图表数据源。我的数据有 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
国家/地区列包含英国的 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')}}
我已经使用您的完整数据样本进行了初步设置，我想我已经弄明白了。这里的挑战是 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()
我正在尝试将下拉菜单添加到绘图折线图中，以便在选择时更新图表数据源。我的数据有 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
国家/地区列包含英国的 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')}}
我已经使用您的完整数据样本进行了初步设置，我想我已经弄明白了。这里的挑战是 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()