如何向 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 散點圖：

嘗試的解決方案...

我試圖實現一個類似問題的解決方案： 構建一個帶有兩個下拉按鈕的繪圖散點圖，一個用於 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 還很陌生，我對任何其他潛在的解決方法持開放態度，以獲得我希望實現的交互式可視化。

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()

Answer 2

• 這種方法有一個核心概念。 需要能夠識別屬於列的痕跡。 在這種情況下，顏色是分類的，每列有多個跟蹤
• 動態地向數據框添加了一個合成列並包含在hoverdata Plot 中。 這意味着它在每個跟蹤中並且可以作為customdata[0][0]
• updatemenus visible然后根據每個跟蹤中的值構建真值列表

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.assign(Plot=col),
                       x=col,
                       y="Score",
                       size="Population",
                       color="Continent",
                       hover_name="Country/Region",
                       hover_data=["Plot"],
                       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": [t.customdata[0][0]==k for t in fig.data]},
                    ],
                }
                for k in cols
            ]
        }
    ]
).update_traces(visible=True, selector=lambda t: t.customdata[0][0]==cols[0] )

fig

• 注意懸停繪圖，這是customdata[0][0]