python - 如何向 Plotly Express 图表添加按钮以更新特定值？

Question

我正在尝试做的...

我正在尝试为幸福报告（2018 年）中的数据保留 Plotly Express 散点图的格式。我只是想创建一个按钮，可以更改熊猫数据框中某些列之间的 x 轴值（例如“人均 GDP”、“社会支持”等）

这是一个散点图示例，我正在尝试创建一个按钮来切换图形的 X 值并使其相应更新。

df = pd.read_csv("https://media.githubusercontent.com/media/ajgallard/happiness_report/main/data/2018_eng.csv")
fig = px.scatter(df, 
                 x="GDP per capita", # The Value I am creating a button for 
                 y="Score", 
                 size="Population", 
                 color="Continent",
                 hover_name="Country/Region", 
                 size_max=60, 
                 color_discrete_sequence=px.colors.qualitative.G10)
fig.show()

结果我得到以下结果：Plotly Express Scatter Plot：

尝试的解决方案...

我试图实现一个类似问题的解决方案： 构建一个带有两个下拉按钮的绘图散点图，一个用于 x 轴，一个用于 y 轴

import pandas as pd
import plotly.express as px
import plotly.graph_objects as go

df = pd.read_csv("https://media.githubusercontent.com/media/ajgallard/happiness_report/main/data/2018_eng.csv")

cols = df.columns[2:4].values.tolist() # "GDP per Capita" & "Social Support"

fig = go.Figure()
for col in cols:
    figpx = px.scatter(df,
                       x=col,
                       y="Score",
                       size="Population",
                       color="Continent",
                       hover_name="Country/Region",
                       size_max=60,
                       color_discrete_sequence=px.colors.qualitative.G10).update_traces(visible=False)
    
    fig.add_traces(figpx.data)

fig.update_layout(
    updatemenus=[
        {
            "buttons": 
            [
                {
                    "label": k,
                    "method": "update",
                    "args": 
                    [
                        {"visible": [k for k in cols]},
                    ],
                }
                for k in cols
            ]
        }
    ]
).update_traces(visible=True, selector=0)

fig.show()

使用上面提到的代码，我得到以下结果： Plotly Express with Button Attempt：

似乎正在发生的事情是数据叠加在另一个之上，并且按钮本身不会更新任何相关的数据。

对任何潜在的解决方法持开放态度...

我对在我的数据可视化中实现 Plotly Graphs 相当陌生，我愿意接受任何其他潜在的解决方法来获得我希望实现的那种交互式可视化。

标签： pythonpandasplotly

Answer 1

在引用的答案之后，我们需要添加一个要更新的元素：x 轴的值和标题。作为附加响应，图例已从重复更改为单个。我引用@A。唐达回答回应。

import pandas as pd
import plotly.express as px
import plotly.graph_objects as go

df = pd.read_csv("https://media.githubusercontent.com/media/ajgallard/happiness_report/main/data/2018_eng.csv")

cols = df.columns[2:4].values.tolist() # "GDP per Capita" & "Social Support"

fig = go.Figure()
for col in cols:
    figpx = px.scatter(df,
                       x=col,
                       y="Score",
                       size="Population",
                       color="Continent",
                       hover_name="Country/Region",
                       size_max=60,
                       color_discrete_sequence=px.colors.qualitative.G10).update_traces(visible=False)
    
    fig.add_traces(figpx.data)

fig.update_layout(
    updatemenus=[
        {
            "buttons": 
            [
                {
                    "label": f'{k}',
                    "method": "update",
                    "args": 
                    [
                        {'x': [df[k]]},
                        {'xaxis':{'title':k}},
                        {"visible": k},
                    ],
                }
                for k in cols
            ]
        }        
    ]
).update_traces(visible=True, selector=0)

names = set()
fig.for_each_trace(
    lambda trace:
        trace.update(showlegend=False)
        if (trace.name in names) else names.add(trace.name))

figpx.data[0]['hovertemplate'] = '<b>%{hovertext}</b><br><br>Continent=Europe<br>GDP per capita=%{x}<br>Score=%{y}<br>Population=%{marker.size}<extra></extra>'

fig.show()